← ToolBox / 对比度检查器

⚖️ 对比度检查器

实时检测前景色与背景色的 WCAG 对比度，确保网页无障碍可读性

🎨 常用配色

21.00 : 1
无障碍评级
1:1 3:1 4.5:1 7:1 21:1
✅
AA 正常文字
≥ 4.5 : 1
通过
✅
AA 大文字
≥ 3 : 1
通过
✅
AAA 正常文字
≥ 7 : 1
通过
✅
AAA 大文字
≥ 4.5 : 1
通过
这是一段正常大小的示例文字，用于展示当前前景色在背景色上的可读性效果。The quick brown fox jumps over the lazy dog.
大文字示例 24px Bold
小号辅助文字 12px — 小字在低对比度下更容易难以辨认，需要更高的对比度来保证可读性。
⚖️ 对比度检查器说明 ▼

WCAG（Web 内容无障碍指南）对比度检查器，帮助设计师和开发者验证文字颜色与背景颜色之间的对比度是否符合无障碍标准。

📌 WCAG 对比度标准

  • AA 级正常文字：对比度 ≥ 4.5:1
  • AA 级大文字（18px+ 或 14px 粗体+）：对比度 ≥ 3:1
  • AAA 级正常文字：对比度 ≥ 7:1
  • AAA 级大文字：对比度 ≥ 4.5:1

🎯 使用场景

  • UI 设计稿配色验证
  • 网页开发颜色可读性检查
  • 品牌色与文字色搭配优化
  • 无障碍合规性审查

❓ 常见问题

什么算"大文字"？
WCAG 定义大文字为 18pt（24px）或 14pt（18.66px）粗体及以上的文字。大文字因为笔画更粗，在较低对比度下仍可辨识。
对比度是如何计算的？
先将 sRGB 颜色值线性化，然后按公式 L = 0.2126 × R + 0.7152 × G + 0.0722 × B 计算相对亮度。对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 为较亮的颜色。