◐
颜色对比度检测
计算前景/背景对比度,判定是否符合 WCAG AA / AAA 无障碍标准。
本地处理 · 不上传
加载工具中…
相关：对比度检测 · WCAG · 可访问性 · 颜色对比度 · 无障碍
颜色对比度检测计算前景色与背景色的对比度，并给出 WCAG 无障碍标准的达标判定。做设计评审与无障碍合规检查时的硬指标。
使用步骤
- 选择前景色与背景色
- 查看对比度数值
- 对照 AA/AAA 达标情况
- 调整颜色直到达标
使用场景
- 检查正文文字在背景上是否够清晰
- 无障碍合规审查
- 评估品牌色用作文字色是否可行
- 为浅色主题挑选合适的灰阶
小贴士
- WCAG 要求正文至少 4.5:1，大号文字（18pt 以上或加粗 14pt 以上）放宽到 3:1，AAA 级则分别是 7:1 和 4.5:1。
- 对比度算的是相对亮度之比，与色相无关——两种亮度接近的鲜艳颜色对比度可能很低，尽管肉眼看着「很不一样」。
- 非文字元素如图标、输入框边框也有 3:1 的要求，容易被忽略。
常见问题
4.5:1 是怎么来的？
WCAG 依据的是视力约 20/40（轻度视力下降）人群的可读性研究。这大致相当于未矫正的老花或中度近视者的视觉条件。
灰色文字为什么总不达标？
白底上的浅灰亮度太接近背景。白底要达到 4.5:1，灰色需要深到约 #767676，比多数设计稿里的浅灰深得多。
半透明颜色怎么算？
需要先与背景做 alpha 混合得到实际呈现的颜色再计算。直接拿带透明度的色值算会得到偏乐观的结果。
颜色对比度检测是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用颜色对比度检测，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。