颜色对比度检查器

检测前景色与背景色的WCAG对比度比值,判断是否满足AA/AAA无障碍标准。

前景色(文字)

预览效果

快速棕色狐狸跳跃
The quick brown fox jumps over the lazy dog.
4.96
对比度比值(应 ≥ 4.5)

关于 颜色对比度检查器

颜色对比度检查器帮助你检测前景色与背景色的对比度比值,确保网页内容符合WCAG(Web内容无障碍指南)的对比度要求,让所有用户(包括视力障碍者)都能清楚阅读内容。

WCAG对比度标准

  • AA 标准(普通文字):对比度 ≥ 4.5:1
  • AA 标准(大号文字18pt+/14pt加粗):对比度 ≥ 3:1
  • AAA 标准(普通文字):对比度 ≥ 7:1
  • AAA 标准(大号文字):对比度 ≥ 4.5:1

对比度计算原理

对比度比值 = (L1 + 0.05) / (L2 + 0.05),其中L1为较亮颜色的相对亮度,L2为较暗颜色的相对亮度。相对亮度根据sRGB色彩空间中RGB分量加权计算得出。

使用建议

  • 正文文字应优先满足AA标准(4.5:1)。
  • 大型标题至少满足3:1对比度。
  • 按钮和图标等UI元素至少3:1对比度。
  • 避免使用纯红绿等仅靠色相区分的组合。