👁️

颜色对比度检查

检查两种颜色的对比度是否符合 WCAG 标准

🎨选择颜色

前景(文字)
背景
常用组合:

👁️实时预览

大号文字 18pt / 24px 粗体

正文文字 14pt / 18.66px

辅助说明文字,用于次要信息展示

对比度
14.68 : 1
总体评级
AAA 优秀
建议
任意场景可用

WCAG 2.1 合规检查

等级要求当前正文大字
AA 普通文本最低要求≥ 4.5:114.68通过通过
AA 大号文本 / 图形≥ 3:114.68通过通过
AAA 普通文本增强要求≥ 7:114.68通过通过
AAA 大号文本增强要求≥ 4.5:114.68通过通过

「大字」指 18pt(24px)以上,或 14pt(18.66px)以上的粗体文字。 对比度按 WCAG 相对亮度公式计算,与官方工具结果一致。

颜色对比度检查怎么用

按 WCAG 标准计算前景与背景的对比度,直接给出 AA / AAA 是否达标,做无障碍配色必备。

  1. 填入前景色与背景色
  2. 查看对比度与达标等级
  3. 调整颜色直到达标

小贴士正文建议至少 4.5:1,大号文字 3:1 即可。

颜色对比度检查常见问题

颜色对比度检查是免费的吗?

完全免费,无需注册登录,也不限使用次数。997 工具箱所有工具都不收费。

使用颜色对比度检查会把我的数据上传到服务器吗?

不会。颜色对比度检查在浏览器本地完成计算,输入的文本和文件都不会离开你的设备,页面关闭后数据即消失。

颜色对比度检查在手机上能用吗?

可以。页面做了移动端适配,手机和平板的浏览器打开同样能正常使用,也不需要安装任何 App。