颜色对比度检测

颜色对比度检测用来量化一段文字和它所在背景之间的明暗差异，把"看得清不清楚"这种主观感受变成一个从 1 到 21 的确定数值。很多配色在设计师自己的显示器上看着没问题，但换到亮度更高的屏幕、户外强光下，或对低视力、色觉异常的用户来说就难以辨认，对比度检测正是提前发现这类隐患的手段。你只需分别指定前景色（文字色）和背景色，工具立刻给出对比度比值，并对照 WCAG 无障碍标准告诉你是否达标，省去手算亮度公式的麻烦。它主要面向前端、UI 设计，以及需要做无障碍合规（如政府、金融、教育类站点）的可读性检测场景。

这个比值并不是简单比较两个颜色的 RGB 数值，而是先算出每个颜色的相对亮度（relative luminance）。具体做法是把 R、G、B 三个通道各自归一化到 0 到 1，做一次 gamma 反校正（低值线性除以 12.92，高值按 ((c+0.055)/1.055) 的 2.4 次方处理），再按 0.2126、0.7152、0.0722 的权重加权求和——绿色权重最高，因为人眼对绿光最敏感。得到较亮的亮度 L1 和较暗的 L2 后，对比度等于 (L1+0.05)/(L2+0.05)，其中 0.05 用来模拟环境杂散光。因此纯黑配纯白得到最高的 21:1，两个完全相同的颜色则是 1:1。

最常见的用法是在敲定一套配色前先做校验。比如你想用浅灰 #999999 的文字放在白色背景上，检测会给出约 2.85:1，达不到普通文本 AA 要求的 4.5，这时把文字调深到 #767676 左右即可越过 4.5 这条线。又比如做暗色主题时，深灰背景上的次要文字往往对比度不足，通过反复微调颜色并观察比值，你能在"够暗不刺眼"和"看得清"之间找到平衡。对于大号标题或加粗文字，WCAG 的门槛更宽松（AA 只需 3:1），工具会单独列出大字等级，方便你区别对待正文和标题。

还有几个容易踩的点值得留意：WCAG 对"大号文本"有明确界定，指约 18pt（24px）以上的常规字重，或 14pt（约 18.66px）以上的加粗字，达不到这个尺寸就要按普通文本 4.5 的标准来要求。另外对比度只衡量明暗关系、与色相无关，所以红配绿这类色觉障碍者难以区分的组合，即便比值达标也未必友好，配色不能只盯这一个数字。最后要注意工具计算的是不透明实色，若文字或背景带有半透明 alpha，需要先把它与底层颜色叠加成最终呈现的实色再来检测，否则得到的比值会有偏差。

颜色对比度检测是一个免费的在线工具，打开网页就能用，不用下载也不用注册。平时大家搜的“对比度检测”、“颜色对比度”、“wcag对比度”，说的都是这个。