跳到主要内容
Color Codes

无障碍设计

颜色对比度检查器 - WCAG AA 与 AAA

检查文字与背景颜色是否符合 WCAG AA 和 AAA,对普通文字、大号文字、按钮、链接和深色模式配色进行对比度测试。

可读性预览

在应用设计之前,通过这段预览检查文字、控件和界面表面的实际可读性。

大号文字 · 普通文字

按钮按钮检查对比度
对比度
17.74:1
AAA
  • AA 普通文字 ≥ 4.5通过
  • AA 大号文字 ≥ 3通过
  • AAA 普通文字 ≥ 7通过
  • AAA 大号文字 ≥ 4.5通过

如何使用

测试前景色和背景色组合,预览普通文字与大号文字,并生成最接近原色的 WCAG AA 合格文字色。适合正文、按钮、链接、徽章和深色界面。

  1. 1 选择文字颜色和背景颜色。
  2. 2 查看普通文字和大号文字的 AA 与 AAA 结果。
  3. 3 不合格时采用建议的无障碍颜色。

常见问题

WCAG AA 要求多少对比度?

普通文字至少为 4.5:1,大号文字至少为 3:1。

WCAG AAA 要求多少对比度?

普通文字至少为 7:1,大号文字至少为 4.5:1。

按钮和链接也需要检查吗?

需要。默认、悬停、聚焦、禁用和访问状态的颜色组合都可能产生不同对比度。

透明颜色可以检查吗?

透明前景或背景应先与最终可见背景合成,再评估对比度。