无障碍设计
颜色对比度检查器 - WCAG AA 与 AAA
检查文字与背景颜色是否符合 WCAG AA 和 AAA,对普通文字、大号文字、按钮、链接和深色模式配色进行对比度测试。
可读性预览
在应用设计之前,通过这段预览检查文字、控件和界面表面的实际可读性。
大号文字 · 普通文字
按钮按钮检查对比度
对比度
17.74:1
AAA- AA 普通文字 ≥ 4.5通过
- AA 大号文字 ≥ 3通过
- AAA 普通文字 ≥ 7通过
- AAA 大号文字 ≥ 4.5通过
如何使用
测试前景色和背景色组合,预览普通文字与大号文字,并生成最接近原色的 WCAG AA 合格文字色。适合正文、按钮、链接、徽章和深色界面。
- 1 选择文字颜色和背景颜色。
- 2 查看普通文字和大号文字的 AA 与 AAA 结果。
- 3 不合格时采用建议的无障碍颜色。
常见问题
WCAG AA 要求多少对比度?
普通文字至少为 4.5:1,大号文字至少为 3:1。
WCAG AAA 要求多少对比度?
普通文字至少为 7:1,大号文字至少为 4.5:1。
按钮和链接也需要检查吗?
需要。默认、悬停、聚焦、禁用和访问状态的颜色组合都可能产生不同对比度。
透明颜色可以检查吗?
透明前景或背景应先与最终可见背景合成,再评估对比度。