颜色对比度检测工具

按 WCAG 2.2 AA 和 AAA 标准检测任意文字色与背景色的搭配。立即获得精确的对比度数值，查看普通文本、大号文本和界面组件是否达标，并生成可分享的链接。免费且保护隐私：所有计算都在你的浏览器中完成。

对比度
17.40:1
AA · 普通文本
≥ 4.5:1
通过
AA · 大号文本
≥ 3:1
通过
AAA · 普通文本
≥ 7:1
通过
AAA · 大号文本
≥ 4.5:1
通过
界面组件与图形
≥ 3:1 (成功标准 1.4.11)
通过

预设配色

实时预览

大号标题文字（24px 粗体）

16px 的普通正文。天地玄黄，宇宙洪荒。良好的对比度能让低视力、色觉异常的用户，或在强烈阳光下看手机的人，都能轻松读完段落。

14px 的小号文字——细则说明同样需要达到普通文本的阈值。

实心按钮描边按钮文字链接

对比度是如何计算的

WCAG 使用相对亮度来定义对比度，即人眼感知到的颜色明亮程度，取值范围从 0（黑色）到 1（白色）。对于每个颜色，ContrastCheck 会：

  1. 把十六进制值拆分为红、绿、蓝三个通道，并分别除以 255。
  2. 对每个通道做线性化处理：小于等于 0.04045 的值除以 12.92，其余按 ((c + 0.055) / 1.055)^2.4 计算。
  3. 按人眼对各通道的敏感程度加权求和：L = 0.2126·R + 0.7152·G + 0.0722·B。

对比度即为 (L_lighter + 0.05) / (L_darker + 0.05)，范围从相同颜色的 1:1 到白底黑字的 21:1。计算结果不做四舍五入，直接与阈值比较：普通文本为 4.5:1（AA）和 7:1（AAA），大号文本为 3:1（AA）和 4.5:1（AAA），界面组件与图形为 3:1。

不确定该达到哪一级？请阅读《WCAG AA 与 AAA 对比度：该选哪一级？》

颜色对比度检测常见问题

›多少的颜色对比度才算合格？

WCAG 2.2 AA 级要求普通正文至少 4.5:1，大号文本至少 3:1。AAA 级则提高到普通文本 7:1、大号文本 4.5:1。对比度范围从 1:1（两色相同）到 21:1（白底黑字）。

›WCAG 中什么算“大号文本”？

大号文本指常规字重下至少 18 磅（约 24 CSS 像素），或粗体下至少 14 磅（约 18.66 CSS 像素）的文字。字形越大越容易辨认，因此大号文本的对比度阈值更低。

›界面组件和图形的 3:1 要求是什么？

WCAG 成功标准 1.4.11“非文本对比度”要求：交互控件的视觉边界（输入框边框、焦点框、开关状态）以及理解内容所必需的图形元素（如图标、图表线条）与相邻颜色的对比度至少为 3:1。

›前景色和背景色的顺序有影响吗？

没有影响。WCAG 公式始终用较亮颜色的亮度除以较暗颜色的亮度，所以交换前景色与背景色得到的对比度相同。预览效果会变化，但数值和达标结果不会变。

›我的数据会被上传吗？

不会。本工具完全在你的浏览器中运行。颜色唯一被保存的地方是页面网址（?fg=…&bg=…），方便你收藏或分享某一组配色。

›4.49:1 已经很接近 4.5:1 了，为什么还是不达标？

WCAG 阈值是硬性下限，不做四舍五入。ContrastCheck 使用精确值进行比较，显示的数值也是截断而非进位，因此显示为 4.49:1 的配色在普通文本 AA 级下判定为不达标。可以使用工具推荐的颜色稍作调整，让它越过及格线。

›这个工具支持 APCA 或 WCAG 3 吗？

暂不支持。ContrastCheck 采用 WCAG 2.x 对比度算法，这也是目前各项法规和采购标准（美国 ADA 指引、Section 508、EN 301 549 / 欧洲无障碍法案）所引用的标准。