达标的浅底深字配色
正文，轻松达到 AA 和 AAA
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */经典的深石板色配近白色背景。正文轻松达到 AAA（≥ 7:1），还绰绰有余。大多数产品界面默认都应该以这个范围为目标。
WCAG 对比度检查器
检查 WCAG 颜色对比度，一键修复不达标的配色。
最后更新
准备好真正学会编程了吗？
Coddy 让你在浏览器里编写真实代码来学习：互动课程、即时反馈，卡住时还有 AI 帮忙。
WCAG 颜色对比度检查器是什么？
对比度检查器是设计师和开发者在上线页面之前必用的工具。它使用《Web 内容无障碍指南》（WCAG）中定义的公式，计算两种颜色（文字和它背后的背景）之间的**对比度**。比值越大，文字越容易阅读。
WCAG 定义了三个阈值。**3:1** 是大标题（常规字重 24px 以上或粗体 18.66px 以上）的最低要求，也适用于按钮、表单字段和图标等交互式界面组件的可见边界。**4.5:1** 是正文的 AA 最低要求，也是大多数团队的目标。**7:1** 是最高的 AAA 等级，能为低视力读者提供有力支持。
对比度**不等于**两种颜色看起来有多鲜艳。两种醒目的品牌色，如果亮度接近，读起来依然可能很吃力。这个工具会对每个通道运行 WCAG 相对亮度公式，报告精确的比值，并为每种使用场景评级，你不用再靠猜。
检查对比度时你会学到什么
- 对比度范围从 1:1（颜色完全相同）到 21:1（纯白底上的纯黑）。日常的品牌配色通常落在 2:1 到 12:1 之间。
- WCAG 使用的是相对亮度，而不是感知亮度：白底上的黄色在你眼里可能还不错，却只有 1.3:1，不达标。
- 大号文字的阈值更宽松（AA 为 3:1），因为在同样的对比度下，更大的字形更容易辨认。
- 按钮、表单边框和图标与相邻背景之间必须达到 3:1，这是 WCAG 2.1 新增的非文本对比度规则。
- 调整亮度（而不是色相）是修正不达标配色最稳妥的方法，不会改变你的品牌色。
如何一步步检查颜色对比度
输入两种颜色
输入或粘贴 HEX 值，或者使用取色器。前景色是你的文字或图标，背景色是它背后的颜色。
查看对比度
左侧的大数字就是 WCAG 对比度。低于 3:1 对任何界面元素都有风险；低于 4.5:1 的正文不达标。
查看 AA/AAA 等级
三行分别显示普通文字（4.5/7）、大号文字（3/4.5）和界面组件（3:1）是否达标。你的设计实际用到的每一行都应该是绿色对勾。
某一行不达标时，点击“调整前景色”
AA 不达标时，工具会在保持色相不变的前提下调高或调低前景色的亮度，直到这对颜色达标。再点一次即可达到 AAA。
复制最终配色
两种颜色在你需要的场景下都达标后，复制 CSS 代码片段（
color:+background:），放进你的样式表或设计令牌文件。
WCAG 对比度目标一览
对照你要设置样式的元素，找到需要达到的等级。来源：WCAG 2.2 Understanding 1.4.3 与 1.4.11。
| 对象 | AA 最低要求 | AAA 最低要求 | 说明 |
|---|---|---|---|
| 正文（常规字重 < 18pt） | 4.5 : 1 | 7 : 1 | 段落文字、标签、说明文字的默认规则 |
| 大号文字（常规字重 ≥ 18pt 或粗体 ≥ 14pt） | 3 : 1 | 4.5 : 1 | 标题、首屏文案、大号引文 |
| 界面组件与图形对象 | 3 : 1 | - | 按钮边框、表单字段、图标、焦点框 |
| 标志或纯装饰 | 豁免 | 豁免 | 标志字和附带文字不受要求约束，但可用性仍然重要 |
| 禁用状态 | 豁免 | 豁免 | 未激活的控件不受要求约束，但不要借此把低对比度当作默认样式上线 |
可以试试的对比度示例
差一点达到 AA 的品牌蓝
看起来很醒目，计算却不达标
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */白底上的鲜艳蓝色通常在 4:1 左右：用作大标题可读（达到 3:1 的 AA 大号文字标准），但达不到正文 4.5:1 的要求。把它用在 18px 以上的按钮和行动号召文字上，不要用于段落文字。
看着没问题、其实不达标的黄色
眼睛会骗人，亮度不会
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 - fails everything */白底上的亮黄色是一个著名的陷阱：颜色看起来很醒目，但亮度太接近了。这个颜色请留给深色背景使用（例如 #facc15 配 #1f2937，约为 12:1）。
对比度的常见错误
- 相信眼睛而不是比值。明亮、饱和的颜色可能感觉很“醒目”，却依然达不到 WCAG 的计算标准。
- 忘了细字重和轻字重实际上会降低对比度：每个像素上的“墨水”更少。用极细字重时，请提高对比度。
- 只用纯白背景检查。真实的背景往往是米白、渐变或照片，请用文字实际所在的背景色重新检查。
- 把
placeholder和disabled文字设置在 WCAG 下限附近。两者虽然都不受 WCAG 约束，但不受约束不等于好读。 - 忽略 3:1 的非文本对比度规则。与背景融为一体的按钮、没有可见边框的表单字段，以及看不清的焦点框，是仅次于正文对比度过低的最常见无障碍问题。
WCAG 对比度检查器常见问题
多少的颜色对比度才算好？
正文至少达到 4.5:1，大标题或交互式界面元素至少达到 3:1。7:1 是 AAA 目标，要求严格，但对于文档、操作说明和错误提示这类关键阅读内容，值得争取。
AA 和 AAA 有什么区别？
AA 是大多数法规要求的无障碍基线（WCAG 2.1/2.2 AA）。AAA 是更严格的目标，适合希望支持低视力用户的组织。AAA 不是强制要求，但对正文来说是一个合理的目标。
WCAG 中什么算“大号文字”？
WCAG 把大号文字定义为常规字重 18pt 以上（约 24px），或粗体 14pt 以上（约 18.66px）。大号文字只需 3:1 即可达到 AA；更小的文字需要 4.5:1。
为什么我的品牌色对比度不达标？
明亮的中间色调，尤其是亮度约 50% 的蓝色、黄色和红色，在白底上往往略低于 4.5:1。通常的解决办法是把前景色调暗（或者把它用作背景色，上面放白色文字）。用“调整前景色”按钮可以找到最接近的达标色。
禁用状态的控件需要达到 WCAG 对比度要求吗？
不需要，禁用控件和纯装饰元素被明确豁免。但“豁免”不等于“用户体验好”。如果用户分辨不出禁用按钮和背景，他们就不知道这个按钮存在。
