颜色对比度检查
检查两种颜色的对比度是否符合 WCAG 标准
🎨选择颜色
前景(文字)
背景
常用组合:
👁️实时预览
大号文字 18pt / 24px 粗体
正文文字 14pt / 18.66px
辅助说明文字,用于次要信息展示
对比度
14.68 : 1
总体评级
AAA 优秀
建议
任意场景可用
✅WCAG 2.1 合规检查
| 等级 | 要求 | 当前 | 正文 | 大字 |
|---|---|---|---|---|
| AA 普通文本最低要求 | ≥ 4.5:1 | 14.68 | 通过 | 通过 |
| AA 大号文本 / 图形 | ≥ 3:1 | 14.68 | 通过 | 通过 |
| AAA 普通文本增强要求 | ≥ 7:1 | 14.68 | 通过 | 通过 |
| AAA 大号文本增强要求 | ≥ 4.5:1 | 14.68 | 通过 | 通过 |
「大字」指 18pt(24px)以上,或 14pt(18.66px)以上的粗体文字。 对比度按 WCAG 相对亮度公式计算,与官方工具结果一致。
颜色对比度检查怎么用
按 WCAG 标准计算前景与背景的对比度,直接给出 AA / AAA 是否达标,做无障碍配色必备。
- 填入前景色与背景色
- 查看对比度与达标等级
- 调整颜色直到达标
小贴士正文建议至少 4.5:1,大号文字 3:1 即可。
颜色对比度检查常见问题
颜色对比度检查是免费的吗?
完全免费,无需注册登录,也不限使用次数。997 工具箱所有工具都不收费。
使用颜色对比度检查会把我的数据上传到服务器吗?
不会。颜色对比度检查在浏览器本地完成计算,输入的文本和文件都不会离开你的设备,页面关闭后数据即消失。
颜色对比度检查在手机上能用吗?
可以。页面做了移动端适配,手机和平板的浏览器打开同样能正常使用,也不需要安装任何 App。