颜色对比度怎么检查？WCAG AA、AAA 和网页可读性标准

网页颜色不只是好不好看，也关系到用户能不能看清。浅灰字放在白底上、彩色按钮用低对比文字、深色背景上叠暗色提示，都可能让页面看起来精致，但实际读起来很费劲。

如果你正在设计网站、按钮、标签、表单提示或深色界面，可以用 颜色对比度检查器 输入文字色和背景色，直接查看 WCAG AA / AAA 是否通过。工具在浏览器本地计算，不需要上传任何设计稿。

什么是颜色对比度

颜色对比度通常指文字色和背景色之间的亮度差异。WCAG 使用相对亮度计算对比度，结果会写成类似 4.5:1、7:1 的形式。数字越大，文字和背景越容易区分。

黑字白底的对比度最高，为 21:1。白字浅灰底、黄字白底、蓝字紫底这类组合往往对比不足。肉眼感觉“还能看见”，不代表在不同屏幕、不同光线、不同视力条件下都能读得舒服。

AA 和 AAA 分别是什么意思

WCAG 常用的两个等级是 AA 和 AAA。对于普通正文，AA 通常要求至少 4.5:1；大字号文字要求至少 3:1。AAA 更严格，普通正文通常要求至少 7:1。

实际做网站时，AA 是比较常见的最低目标。正文、按钮、导航、表单标签、错误提示都建议至少通过 AA。AAA 适合重要信息、阅读型内容、面向更广泛人群的页面，但不是所有品牌色都容易达到。

普通文字和大号文字为什么要求不同

大号文字笔画更粗、面积更大，即使颜色对比稍低，也比小字更容易辨认。因此 WCAG 对大号文字的对比度要求低一些。常见理解是：字号足够大或加粗时，可以按大文本标准判断。

但不要把这个规则用得太激进。移动端屏幕、低质量显示器、强光环境都会降低可读性。按钮、表单、正文这类需要用户准确识别的内容，尽量按普通文字标准做更稳。

常见的低对比问题

很多低对比问题不是故意的，而是设计过程中顺手造成的：

• 次要文字用了过浅的灰色。
• 品牌色按钮上直接放白字，但品牌色本身太亮。
• 成功、警告、错误提示只靠颜色区分。
• 深色模式里边框和说明文字太暗。
• 图片背景上直接压文字，没有遮罩或底色。

这些问题在设计稿里可能不明显，上线后用户在手机上看就会吃力。对比度检查能在开发前提前发现。

怎么修正对比度不足

最直接的方法是让文字更深或背景更浅，或者反过来让文字更浅、背景更深。对于按钮和标签，如果品牌色太亮，可以保持背景色不变，把文字改成深色；如果品牌色太暗，则用白字通常更稳。

也可以调整组件结构。例如在图片上加半透明遮罩，在浅色卡片上加深正文颜色，或者把只靠颜色表达的状态改成颜色加文字、图标、边框一起表达。

总结

颜色对比度检查不是为了限制设计，而是为了让页面在更多环境下都能读。一个颜色组合通过 AA，并不代表它一定最好看；但如果连 AA 都过不了，就要认真考虑是否会影响用户操作。

做网页配色、按钮状态、深色模式和品牌视觉时，可以打开 颜色对比度检查器，快速验证文字色、背景色和 CSS 片段。