可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
试试常见对比色组合
可读性示例
除了数值比例，也用此预览判断颜色组合。
对比度比例
17.74:1
AA normal text
通过AA large text
通过AAA normal text
通过AAA large text
通过颜色对比度检查器可以计算文字颜色和背景颜色之间的对比度。
它适合检查按钮、链接、正文、深色模式和品牌配色的可读性。
清晰输入
准备好要处理的前景色和背景色，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
检查白色文字放在绿色按钮上是否足够清晰。
假设
输入颜色代表实际页面中使用的前景和背景。
限制
对比度只是可读性的一部分，字号、字体、状态和环境也会影响体验。
输入实际前景和背景
不要只检查品牌主色，按钮、禁用态、提示文字和深浅背景都要用真实色值测试。
区分字号和权重
大字号和小字号的 WCAG 要求不同，正文小字通常需要更高对比度。
别忽略状态色
错误、成功、警告、链接 hover 和 focus 状态也需要保持可读，不只是默认状态。
适合发布前可读性 QA
按钮、说明文字、卡片副标题和表单错误提示都可以在上线前快速检查。
移动端更要看弱文本
手机屏幕亮度、户外光线和小字号会放大低对比度问题，辅助文字不要太淡。
不只服务无障碍分数
对比度好也能减少用户误读，特别是价格、错误提示、下载按钮和表单状态。
按钮设计
确认按钮文字清晰。
正文排版
检查长文本可读性。
主题色
验证品牌色搭配。
深色模式
检查暗色背景上的文字。
什么是对比度？
它表示前景和背景亮度差异，常用于判断文字可读性。
支持 HEX 吗？
支持常见颜色格式，具体以页面输入为准。
结果等于无障碍合规吗？
不完全等于，还需要结合界面上下文检查。
会上传颜色吗？
不会。计算在浏览器中完成。
对比度通过就一定无障碍吗？
不一定。对比度只是可读性的一部分，还要看字号、行高、焦点状态、键盘操作和语义结构。
为什么辅助文字不能太浅？
辅助文字往往字号更小，在移动端和弱光环境里更难读，过低对比度会直接影响理解。
什么是对比度？
它表示前景和背景亮度差异，常用于判断文字可读性。
支持 HEX 吗？
支持常见颜色格式，具体以页面输入为准。
结果等于无障碍合规吗？
不完全等于，还需要结合界面上下文检查。
会上传颜色吗？
不会。计算在浏览器中完成。
对比度通过就一定无障碍吗？
不一定。对比度只是可读性的一部分，还要看字号、行高、焦点状态、键盘操作和语义结构。
为什么辅助文字不能太浅？
辅助文字往往字号更小，在移动端和弱光环境里更难读，过低对比度会直接影响理解。
推荐流程
配色检查流程
先取色或转换颜色，再检查对比度。