颜色对比度检测教程：文字看不清？用 WCAG 标准检查配色
一句话答案
打开颜色对比度检测工具，填写文字颜色和背景颜色，工具会算出对比度并判断是否通过 WCAG 标准：普通文字 AA 需要 4.5:1、AAA 需要 7:1，大号文字 AA 需要 3:1、AAA 需要 4.5:1。
浅灰色文字看起来很“高级”，但在手机强光下、对视力不好的读者来说可能根本看不清。WCAG（Web 内容无障碍指南）用“对比度”衡量文字和背景的区分程度，从 1:1（同色）到 21:1（白底黑字）。颜色对比度检测 可以直接算出对比度并判断是否达标。
WCAG 对比度标准
| 等级 | 普通文字 | 大号文字 |
|---|---|---|
| AA（常用的基本要求） | 至少 4.5:1 | 至少 3:1 |
| AAA（更高要求） | 至少 7:1 | 至少 4.5:1 |
大号文字一般指 18pt（约 24px）及以上，或 14pt（约 18.7px）及以上的粗体。
操作步骤
- 填写颜色：打开 颜色对比度检测，在“文字颜色”和“背景颜色”中填写或选择颜色。
- 看示例：页面会用这两种颜色显示大号和普通文字示例，直观感受是否清楚。
- 看结果：查看对比度数值，以及 AA、AAA 在普通文字和大号文字下是否通过。
- 调整颜色：不通过时把文字调深（或背景调浅），直到达到需要的等级。
🌓 颜色对比度检测
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
一个常见例子
白底上的 #777777 灰字对比度是 4.48:1，只差一点达到 4.5:1，所以普通文字不通过 AA，只适合大号文字。把颜色稍微调深到 #767676，对比度就达到约 4.54:1，普通文字也能通过 AA。很多设计规范把 #767676 作为白底上可用的最浅灰色正文颜色。
让配色达标的方法
- 调深文字或调浅背景：用 颜色深浅色阶 生成同一色相的深浅版本，挑一个达标的；
- 加大字号或加粗：大号文字的要求更低；
- 避免靠颜色区分信息：红绿色在色弱用户眼中可能很接近，配合图标或文字说明；
- 渐变或图片背景：检查文字下方最浅和最深的部分，必要时加半透明遮罩。
常见问题
WCAG AA 对比度要求是多少？
普通文字至少 4.5:1，大号文字（约 24px 以上，或约 18.7px 以上的粗体）至少 3:1。
白底上最浅可以用什么灰色？
按 AA 标准，白底上的普通文字常用 #767676（约 4.54:1）作为最浅的灰色；#777777 是 4.48:1，略低于要求。
对比度是怎么计算的？
先按 WCAG 公式计算两种颜色的相对亮度 L1 和 L2（L1 较亮），对比度 =（L1 + 0.05）÷（L2 + 0.05），结果在 1:1 到 21:1 之间。
只有网页需要考虑对比度吗？
不是。PPT、海报、App 界面、视频字幕都会遇到同样的问题，在投影仪和户外屏幕上对比度不足更明显。