颜色对比度检查器

检查WCAG无障碍合规的颜色对比度。测试前景色和背景色的AA和AAA合规级别。

大文本预览（18pt+）

这是使用这些颜色时普通正文的显示效果。

对比度

✓ AAA
普通文本
(<18pt / <14pt bold)
✓ AAA
大文本
(≥18pt / ≥14pt bold)
✓ AA
UI组件
(icons, borders)
AAA: 优秀AA: 良好Fail: 不足
WCAG 2.1要求普通文本4.5:1对比度（AA）和增强7:1（AAA）。大文本（18pt+或14pt粗体）AA需要3:1，AAA需要4.5:1。UI组件最低需要3:1。

使用方法

  1. 1

    输入前景色

    输入HEX颜色代码或使用颜色选择器选择文本或图标颜色。

  2. 2

    输入背景色

    使用HEX代码或颜色选择器设置背景颜色。常见背景是#FFFFFF（白色）和#000000（黑色）。

  3. 3

    检查WCAG合规

    查看对比度并确认颜色是否通过普通文本、大文本和UI组件的AA和AAA标准。

  4. 4

    调整以符合无障碍标准

    如果颜色不合格，尝试加深文本或提亮背景直到达到AA或AAA合规。

常见问题

需要什么对比度？
WCAG AA合规：普通文本4.5:1，大文本（18pt+）3:1。AAA（增强）：普通文本7:1，大文本4.5:1。UI组件和图标最低需要3:1。
什么算大文本？
大文本定义为普通字重18pt（24px）以上，或粗体14pt（18.5px）以上。大文本的对比度要求较低。
AA和AAA哪个更好？
AAA提供更好的无障碍性，但品牌色可能较难达到。AA是大多数情况下的最低法律要求。尽可能追求AAA，特别是正文文本。
对色盲用户有用吗？
对比度对所有用户都有帮助，包括视力低下者。但色盲用户可能还需要避免仅用颜色的指示。请结合使用图案、图标或文本标签。