免费在线对比度检查器（WCAG）

评估前景色与背景色的对比度，检查普通文本和大号文本是否符合 WCAG AA 和 AAA 无障碍要求。

文字颜色

背景颜色

常规文本

大字号文本（18pt / 14pt 粗体）

The quick brown fox jumps over the lazy dog.

对比度

17.40:1

WCAG AA：普通文本Pass (4.5:1)

WCAG AA：大号文本Pass (3:1)

WCAG AAA：普通文本Pass (7:1)

WCAG AAA：大号文本Pass (4.5:1)

WCAG AA：界面组件Pass (3:1)

如何检查颜色对比度

输入两种颜色。

选取文字颜色和背景颜色，或在每个框中输入 6 位十六进制色值，例如 #1a1a1a。

查看对比度和检测结果。

对比度会随你的输入实时更新，五行结果会显示 AA 和 AAA 文本以及界面部件是否通过。

调整并复制。

把颜色调深或调浅，直到你需要的各项都通过，用「交换」试试反向组合，然后复制对比度用于你的记录。

常见问题

关于 WCAG 对比度、大号文本、四舍五入以及本检查器可识别内容的解答。

WCAG AA 要求的对比度是多少？

WCAG AA 要求普通文本至少 4.5:1，大号文本至少 3:1。图标、输入框边框和其他界面部件与相邻颜色之间需要达到 3:1。AAA 把文本要求提高到普通文本 7:1、大号文本 4.5:1。

对比度是如何计算的？

每种颜色的红、绿、蓝值会先转换为线性光，再加权得出相对亮度。对比度等于较亮的亮度加 0.05，除以较暗的亮度加 0.05，所以范围从相同颜色的 1:1 到白底黑字的 21:1。

WCAG 中什么算大号文本？

大号文本是指常规字重至少 18pt（24px），或粗体至少 14pt（约 18.66px）的文字。它在 AA 下只需 3:1，在 AAA 下只需 4.5:1。检查器不会询问字号，所以只有当你的文字达到这个大小时，才需要参考大号文本的结果。

WCAG AA 够用吗，还是需要 AAA？

AA 是大多数法律和政策所采用的等级，包括欧盟的 EN 301 549 和美国 2024 年针对州和地方政府网站的规定，它们都采用 WCAG 2.1 AA。AAA 更严格，对于长篇阅读文本是个不错的目标。

界面组件检测是什么意思？

它测试的是非文本部件的 3:1 规则，即 WCAG 成功标准 1.4.11。可用于图标颜色、输入框边框、焦点环和图表线条。请把部件的颜色填入文字颜色框，把它后面的颜色填入背景框。

为什么显示 3.00:1 却不通过？

屏幕上的对比度会四舍五入到两位小数，但检测使用的是精确值，这也是 WCAG 的要求。白色背景上的灰色 #959595 为 2.995:1，所以显示 3.00:1，但仍未通过 3:1 的各项检测。把颜色稍微加深一点就能通过。

为什么检查器显示 0.00:1？

它只能识别 6 位十六进制色值，带不带 # 都可以。像 #fff 这样的短代码、带透明度的 8 位代码、rgb()、hsl() 和颜色名称都会得到 0.00:1，并且所有检测项都不通过。请把 #fff 写成 #ffffff。如果写错了字母，比如 #12345g，它会被当作另一种颜色读取，且不会有任何提示。