直接答案
色彩对比度检测工具依据 W3C WCAG 2.2 官方标准精确测算文字前景色与背景色之间的相对亮度比率,评估在常规文字、大号文字与 UI 控件上的 AA 与 AAA 级无障碍达标状况。
如何使用此工具
输入文字色与背景色
键入十六进制 HEX 代码、RGB 或使用内置取色板选择颜色。
实时查看计算对比度
即时获取精确的数值对比度比率(例如 4.5:1 或 10.7:1)。
检查 WCAG 达标评级
系统自动核对普通正文、大号标题与非文本界面的 AA/AAA 合规性。
应用智能修正建议
轻触智能微调滑块,在保持原有色相的前提下自动匹配合规明度。
相对亮度与 WCAG 对比度计算标准公式
相对亮度(L)衡量 sRGB 色彩空间中各颜色通道经过伽马矫正后的感知明度,归一化在 0(纯黑)到 1(纯白)之间。对比度比率范围从 1:1(无对比)到 21:1(黑白最大对比)。
- WCAG AA 级标准:普通字号正文对比度需达到 4.5:1,大号文字(>=18pt 或 14pt 加粗)需达到 3.0:1。
- WCAG AAA 级标准:普通正文需达到 7.0:1,大号文字需达到 4.5:1,专为低视力用户提供最佳可读性。
- 非文字交互元素(如表单输入框边框、聚焦指示环、图标按钮)需满足至少 3.0:1 的界面对比度。
实用示例
测试深灰文字在浅灰背景上的可读性
输入: 文字颜色:#1f2937,背景颜色:#f3f4f6
输出: 对比度比率:10.7:1(全面通过 WCAG 2.2 AA 及 AAA 级无障碍全部标准)
为企业设计系统与政府公共服务网站提供符合法定数字无障碍要求的科学依据。
限制
- WCAG 算法针对单色实底背景进行数学测算;对于背景为复杂照片或多色弥散渐变的情况,需选取对比最弱的局部区域测算。
常见问题
为什么普通正文必须达到 4.5:1 的对比度基线?
4.5:1 是国际公认的保障中度视力受损人群及在室外强光照射下普通人群均能无障碍识读文字内容的科学阈值。
如果我选定的品牌主色对比度不达标,该如何修正?
工具提供“智能修正”功能,在尽可能锁定原有色相与饱和度的前提下微调明度,一键生成最接近的合规配色方案。
权威技术标准与参考文献
- W3C 网页内容无障碍指南 (WCAG) 2.2 规范 ↗ — 对比度比率计算标准、AA/AAA 级基准线与非文本对比度指标官方标准。
- W3C 相对亮度数学公式与定义 ↗ — sRGB 颜色空间相对亮度计算与伽马校正官方数学公式。