颜色对比度检查器

基于 WCAG 2.1 相对亮度公式，实时计算文字与背景的对比度并判定 AA/AAA 级别，帮助设计师与开发者制作无障碍友好的界面。

什么是颜色对比度？

颜色对比度（Color Contrast Ratio）衡量前景色与背景色之间的亮度差异，数值范围从 1:1 到 21:1。对比度越高，文字越清晰易读，尤其在弱光环境或低分辨率屏幕上更为重要。WCAG 2.1（Web 内容无障碍指南）给出了标准的相对亮度计算公式：先将 sRGB 颜色分量线性化，再按 0.2126、0.7152、0.0722 的系数加权求和得到亮度 L，最后用 (L1 + 0.05) / (L2 + 0.05) 计算对比度。

WCAG AA 与 AAA 级别要求

  • AA 普通文本：对比度 ≥ 4.5:1，是大多数网站的最低无障碍标准
  • AA 大号文本（≥18pt 或 14pt 加粗）：对比度 ≥ 3:1
  • AAA 普通文本：对比度 ≥ 7:1，适合需要更高可读性的场景
  • AAA 大号文本：对比度 ≥ 4.5:1

如何使用本工具

  1. 点击色块或直接输入十六进制色值，分别设置前景色（文字）与背景色
  2. 工具实时计算对比度并显示 AA/AAA 各级别判定结果
  3. 预览区以所选配色渲染示例文字，直观查看效果
  4. 未通过时调整颜色，直到满足目标级别

常见问题

对比度达到多少才安全？普通正文建议至少达到 AA 的 4.5:1；如果面向老年用户或弱视人群，推荐提升至 AAA 的 7:1。大标题、按钮文字等大号文本可放宽至 3:1。

为什么我的配色对比度不达标？浅灰文字配白色背景通常只有 2:1 左右。可以加深文字颜色、提亮背景，或改用更深的品牌色。本工具支持实时微调，直到通过为止。

数据会上传到服务器吗？不会。所有计算都在浏览器本地完成，颜色数据不会离开你的设备。