测试前景与背景色的可读对比度
WCAG 颜色对比度检查：测试前景/背景 hex 是否达到 AA、AAA，帮助无障碍阅读与 UI 配色。浏览器本地计算，不上传颜色数据 免费。
Sample text Aa
对比度: 3.15:1
AA 正文（≥4.5）未通过
AA 大号文字（≥3）通过
AAA 正文（≥7）未通过
提示：加深前景或提亮背景，通常能更快过 AA。
私密 · 快速 · 免费
对比度是无障碍（a11y）的基础项。比值越高，文字在背景上越清晰。WCAG 对正常正文与大号文字给了不同门槛。
本页帮你快速试色，不是法律意见，也替代不了完整无障碍审计（还涉及焦点、读屏、键盘等）。
品牌色很浅时，可加深文字或加底衬，而不是指望用户「仔细看」。
如何检查
- 输入前景色与背景色 hex
- 查看比值与 AA/AAA 提示
- 调整颜色直到达标
查对比度能避免什么
- 降低视力不佳用户的阅读障碍。
- 上线前少被设计走查打回。
- 用数字说话，避免「我觉得能看清」争议。
场景
- 定稿按钮字色与填充色
- 检查页脚浅灰链接
- 深色模式下一组文字色是否够
提示
- 正文更严格，大标题可略松，仍建议尽量高对比。
- 图标与文字一样需要可辨认。
- 渐变底请取文字背后的实际区域色来测。
参考
| 输入 | 输出 | 说明 |
|---|---|---|
| 深字 + 白底 | 易过 AA | 常见正文 |
| 浅灰字 + 白底 | 可能不及格 | 需加深 |
对比度常见问题
- AA 和 AAA 差在哪？
- AAA 更严。公共信息类站点常以 AA 为最低目标，有余力再冲 AAA。
- 大号文字怎么算？
- 大致是较大字号或加粗的大字；页面会按常见阈值分别提示。
- 色弱模式呢？
- 对比度是基础；色弱还需避免只靠颜色传达信息。