颜色够不够看得清：WebAIM 对比度检查，按 WCAG 标准给结论

「这个灰字放在深色背景上能不能看清」，凭感觉判断经常偏乐观 —— 做的人显示器好、环境暗，看的人可能正相反。这类事应该交给公式。

它解决什么问题

配色方案视觉上好看，不代表文字可读。对比度不足的内容，在户外强光下、老显示器上、视力不佳的用户那里会直接变成「看不见」。

而无障碍标准（WCAG）对正文与标题的对比度有明确数值要求，很多设计交付时并没有核对过。

核心能力

对比度是怎么算出来的

公式是 (L1 + 0.05) / (L2 + 0.05)，L1 是较亮色的相对亮度，L2 是较暗色。相对亮度不是简单的 RGB 平均，而是先把每个通道做伽马校正（sRGB 线性化），再按人眼敏感度加权：绿色权重最高（0.7152），红色次之（0.2126），蓝色最低（0.0722）。

这解释了为什么蓝色背景上的白字往往比看起来更难读 —— 蓝色的加权系数低，算出来的亮度远低于视觉印象。也解释了为什么深蓝配浅蓝的界面，明明「看着有层次」，文字对比度却总是不达标。

谁适合用

• 做界面设计、需要交付可用配色的人
• 前端开发，要核对文字与背景是否达标的人
• 要满足无障碍合规要求的政府与教育类项目
• 做 PPT 与公众号排版、想让内容更易读的人

怎么开始

1. 打开 WebAIM 对比度检查页面，分别填入前景色与背景色。
2. 看中间的对比度数值与下方的判定结果（Normal Text / Large Text / UI Components）。
3. 不达标时看它给出的建议：提示把前景调亮或调暗到某个值即可通过。
4. 配色定稿前把每一组「文字色 + 背景色」都过一遍，包括按钮、标签、提示文字这些次要元素。
5. 深色主题尤其要检查：半透明白字叠在彩色底上时，实际对比度往往低于预期。

常见问题

4.5:1 是硬性要求吗？
WCAG AA 级要求正文达到 4.5:1，大字号（约 18.66px 粗体或 24px 常规以上）可放宽到 3:1。这是国际通行的无障碍标准。

装饰性文字也要达标吗？
纯装饰、不承载信息的文字不受此限制，但凡是用户需要阅读的内容都应该达标。

有本地版吗？
公式很简单，很多设计工具与浏览器扩展都内置了同样的计算。

页面是英文的会有影响吗？
不会，输入输出都是色值和数字，不涉及语言理解。

授权与合规

WebAIM 提供的对比度检查器面向公众免费开放使用，其结果依据 WCAG 标准计算。 官网：webaim.org/resources/contrastchecker。