WCAG 对比度基础
对比度基于相对亮度计算。公式会先把 sRGB 颜色转换成线性亮度，再比较较亮颜色和较暗颜色。
- 对比度 = (L1 + 0.05) / (L2 + 0.05)
- WCAG AA 普通文本目标：4.5:1
- WCAG AAA 普通文本目标：7:1
颜色工具
颜色对比度检查器
检查文字和背景颜色的对比度，对照 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
继续调整颜色，直到这组搭配达到你需要的可读性标准。
常见无障碍检查示例
#000000 黑字 + #FFFFFF 白底
21:1
黑白组合拥有最高对比度，普通文本和大文本都容易通过。
#777777 灰字 + #FFFFFF 白底
约 4.48:1
非常接近 AA 普通文本阈值，轻微取整或颜色变化都可能影响结果。
品牌蓝按钮上的白色文字
上线前先检查 AA
按钮、链接、禁用态和 hover 状态通常都需要分别检查。
设计评审说明
- 请检查 CSS 实际使用的前景色和背景色，不要只看设计 token 名称。
- 大文本的 AA 阈值较低，但正文、说明文字、占位符和辅助提示通常应按普通文本标准检查。
- 对比度只是无障碍的一部分，还应检查焦点状态、字号、悬停状态，以及是否只靠颜色传达含义。
适合在颜色上线前做无障碍检查
看设计稿和 UI 配色更方便
当你想确认一组文字和背景颜色是否足够易读时，这个页面能直接给出结果。
实时显示通过或未通过
前景色或背景色一变化，对比度比例和 AA、AAA 状态就会立即更新。
按 WCAG 对比度公式计算
对比度基于相对亮度，并使用标准 WCAG 对比度计算方式。
手机桌面都能顺手查
做设计评审、QA、改 CSS 或核对配色时，打开就能快速检查。
编辑与准确性说明
颜色对比度检查器 会把可操作的转换器和必要说明放在同一页。页面会根据当前工具展示换算公式、常见示例、取整提醒和相关工具，帮助用户判断结果是否适合行李、物流、食谱、日志、设计或汽车参数等具体任务。
- 转换结果在浏览器中即时计算，常用单位使用标准换算因子。
- 正式申报、工程、公差、医疗或合规场景，应同时核对原始测量和官方资料。
- 页面说明会优先解释真实使用场景，避免只用重复模板填充页面。
更多颜色工具
颜色对比度常见问题
颜色对比度应该达到多少？
WCAG AA 对普通文本要求 4.5:1，对大文本要求 3:1；AAA 对普通文本要求 7:1，对大文本要求 4.5:1。
为什么颜色对比度很重要？
良好的对比度能提升低视力、色觉差异用户，以及强光或较差显示环境下的阅读体验。
手机上可以使用这个对比度检查器吗？
可以。页面已适配手机、平板和桌面端。