颜色对比度检查

颜色对比度检查器测量两种十六进制颜色之间的对比度，并报告这对颜色是否通过 WCAG 的 AA 和 AAA 阈值。它显示从 1:1 到 21:1 的精确比值、普通文本和大文本各自的判定、实时预览，以及每种颜色的相对亮度。设计师和开发者用它把一个无障碍问题变成一个数字，而不是一种主观意见。

如何使用

• 输入前景（文字）色和背景色，可以键入十六进制值，也可以使用取色器。
• 比值随输入实时更新；结果面板显示到两位小数。
• 阅读四个合规徽章：AA 普通、AA 大文本、AAA 普通、AAA 大文本。
• 用交换按钮反转两种颜色，检查对调后的组合。
• 调整任一颜色，观察比值实时变化。

WCAG 公式逐步解析

比值来自 WCAG 2.1 的相对亮度定义。对每种颜色：

1. 把 sRGB 通道换算到 0–1 范围：s = channel / 255。
2. 线性化：如果 s <= 0.04045，用 s / 12.92；否则用 ((s + 0.055) / 1.055) ^ 2.4。
3. 给三个线性通道加权：L = 0.2126 × R + 0.7152 × G + 0.0722 × B。

然后，令 L1 为较亮的亮度、L2 为较暗的亮度：

ratio = (L1 + 0.05) / (L2 + 0.05)

白色的亮度是 1，黑色是 0，常数 0.05 让结果保持有限，这就是最大可能比值为 (1 + 0.05) / (0 + 0.05) = 21 的原因。

这些通道权重并非随意选取。绿色取 0.7152，是因为眼睛对它的敏感度远高于红色或蓝色；而蓝色的 0.0722 反映了它对感知亮度的贡献很小。2.4 次幂以及低于 0.04045 时的线性段，共同还原了显示器的伽马响应。一个有用的推论是：RGB 数值和相同的两种颜色可能得到不同的分数——在相同数值下，绿色在感知上比蓝色亮得多。

实操示例

前景色	背景色	比值	AA 普通	AA 大文本	AAA 普通
#333333	#FFFFFF	12.63:1	通过	通过	通过
#595959	#FFFFFF	7.00:1	通过	通过	通过（刚好）
#767676	#FFFFFF	4.54:1	通过	通过	不通过
#777777	#FFFFFF	4.48:1	不通过	通过	不通过

最后两行只差一个十六进制步进，却落在 AA 普通阈值的两侧。这正是实际检查而非凭感觉估算的价值所在，因为人的感知在临界点附近判断力很差。#595959 那行是著名的「七比一」灰，用于白底上的 AAA 正文；而 #333333 默认值则轻松达到 AAA。当某个颜色接近阈值时，一次只调整一个通道，观察比值直到它以一点余量越过门槛。

AA 与 AAA 的要求

文本	AA 最低	AAA 最低
普通（低于 18pt / 24px）	4.5:1	7:1
大文本（18pt 及以上，或加粗 14pt 及以上）	3:1	4.5:1

UI 组件和图形对象另有一条 3:1 的要求，本工具不评估它，因为它只比较两种纯色。

常见错误

• 用与正文相同的阈值去测占位符文字或禁用状态；禁用控件虽然豁免，但那些文字依然很难读。
• 通过采样平均颜色来检查渐变或照片上的文字，这会掩盖最差的那一块。
• 忘记不透明度和叠加层会改变实际颜色。50% 的黑色叠加在白底上得到的是中灰，不是黑色。
• 因为某个品牌色「在设计师的显示器上看着没问题」就假定它通过。明亮环境和廉价面板要不宽容得多。
• 只检查默认主题。暗色模式、高对比度模式和强制颜色模式可能重映射你的调色板，所以要验证用户实际会看到的那些组合。
• 忽略焦点环和边框。即便标签文字已经通过，轮廓也需要与其周围保持 3:1。

准确性与局限

在 WCAG 2.1 公式下，检查器对纯色 sRGB 十六进制颜色是精确的，并且接受带或不带前导 # 的 3 位或 6 位值。它会忽略 alpha 通道、渐变、图片，以及你字体的实际像素尺寸或字重。它也不会去核实一个网站真正使用了哪些文字尺寸，所以大文本/普通文本的规则要你自己套用。亮度显示到四位小数，但真正重要的是比值；无效输入会让结果留空，而不是去猜。请把判定当作一项必要的检查，而不是完整的审计——它无法替代屏幕阅读器测试、键盘导航走查，或来自使用辅助技术者的反馈。做合规记录时，把十六进制颜色对和比值一起记下，因为之后的一次颜色微调可能悄悄把一对本来通过的颜色拉回线下。

相关工具

• 颜色选择器 — 从调色板中获取精确的十六进制值。
• 配色方案生成器 — 一开始就构建无障碍的配色。
• 颜色名称查询 — 为一个十六进制值找到最接近的颜色名称。