颜色对比度检查

颜色对比度检查

输入文字颜色和背景色，立即算出 WCAG 对比度，并判断正文和大字是否达到 AA、AAA 无障碍标准。不达标时，工具会保持色相、只调整明暗，推荐最接近原色的达标颜色，一键替换。

在浏览器本地运行，输入的内容和文件都不会上传

文字颜色

背景颜色

对比度

4.54:1

AA 正文 ≥ 4.5:1通过
AA 大字 ≥ 3:1通过
AAA 正文 ≥ 7:1不通过
AAA 大字 ≥ 4.5:1通过

大号标题文字

16 像素的正文应该清楚易读。

小字、图片说明和脚注。

按钮

达到 AAA 的最接近文字颜色：#595959（7.00:1）

使用步骤

用取色器选择，或直接输入文字颜色和背景色，支持十六进制、rgb()、hsl()、oklch() 和颜色名。
查看对比度和四项 WCAG 判定，下方预览实际效果。
不达标时，点击推荐颜色旁的「使用这个颜色」即可替换。

参数说明

AA 标准: 正文至少 4.5:1，大字（18pt 即 24px 以上，或 14pt 即约 18.7px 以上的粗体）至少 3:1。大多数法规和设计规范要求达到 AA。
AAA 标准: 正文至少 7:1，大字至少 4.5:1，适合对可读性要求更高的内容。
推荐颜色: 在 OKLCH 色彩空间里保持色相和彩度，只调整亮度，找出刚好达标、与原色最接近的颜色。
半透明颜色: 带透明度的文字颜色按叠加在背景上后的实际颜色计算。

对比度是怎么算出来的

每个颜色先从 sRGB 转换成线性光，再算出相对亮度：

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

绿色的权重最大，因为人眼对它最敏感。以下是白色背景上的一些结果：

文字颜色	对比度	结果
#000000	21 : 1	AAA
#0066cc	5.57 : 1	AA 正文通过，AAA 正文不通过
#767676	4.54 : 1	AA 正文通过
#777777	4.48 : 1	AA 正文不通过，大字通过

WCAG 的定义见 Understanding Success Criterion 1.4.3。

常见问题

对比度是怎么算的？

按 WCAG 2.x 的公式：(较亮颜色的相对亮度 + 0.05) ÷ (较暗颜色的相对亮度 + 0.05)，结果在 1:1 到 21:1 之间。纯黑配纯白是 21:1。

#767676 为什么常被提到？

它是白色背景上能达到 4.5:1（约 4.54:1）的最浅灰色，常被用作辅助文字的颜色下限。

图标、边框也需要检查吗？

需要。WCAG 2.1 起要求界面组件和图形（按钮边框、输入框、图标）与相邻颜色的对比度至少 3:1。