颜色工具
颜色对比度检查器
检查文字和背景颜色的对比度，对照 WCAG AA 和 AAA，适合做无障碍评审、UI 设计和 CSS 调整。
颜色选择
预设组合
对比结果
示例文本
这就是所选颜色下文本的大致显示效果。
21.00:1
对比度比例
WCAG 合规性
AA Normal Text (4.5:1)通过
AA Large Text (3:1)通过
AAA Normal Text (7:1)通过
AAA Large Text (4.5:1)通过
WCAG 指南
WCAG AA
普通文本需要 4.5:1 对比度，大文本需要 3:1 对比度。
WCAG AAA
普通文本需要 7:1 对比度，大文本需要 4.5:1 对比度。
如何使用颜色对比度检查器
1
选择你要测试的文字颜色和背景颜色。
2
查看实时预览、对比度比例，以及是否通过 WCAG AA 和 AAA。
3
继续调整颜色，直到这组搭配达到你需要的可读性标准。
适合在颜色上线前做无障碍检查
看设计稿和 UI 配色更方便
当你想确认一组文字和背景颜色是否足够易读时，这个页面能直接给出结果。
实时显示通过或未通过
前景色或背景色一变化，对比度比例和 AA、AAA 状态就会立即更新。
按 WCAG 对比度公式计算
对比度基于相对亮度，并使用标准 WCAG 对比度计算方式。
手机桌面都能顺手查
做设计评审、QA、改 CSS 或核对配色时，打开就能快速检查。
更多颜色工具
颜色对比度常见问题
颜色对比度应该达到多少？
WCAG AA 对普通文本要求 4.5:1，对大文本要求 3:1；AAA 对普通文本要求 7:1，对大文本要求 4.5:1。
为什么颜色对比度很重要？
良好的对比度能提升低视力、色觉差异用户，以及强光或较差显示环境下的阅读体验。
手机上可以使用这个对比度检查器吗？
可以。页面已适配手机、平板和桌面端。