实时计算WCAG对比度比值,检测AA/AAA无障碍标准合规性,让设计对每个人都友好
1. 相对亮度 L = 0.2126*R + 0.7152*G + 0.0722*B
2. 通道值:RsRGB ≤ 0.03928 时 R = RsRGB/12.92,否则 R = ((RsRGB+0.055)/1.055)^2.4
3. 对比度 = (L_亮 + 0.05) / (L_暗 + 0.05)
WCAG(Web Content Accessibility Guidelines,Web内容无障碍指南)是由 W3C 制定的国际标准,其中定义了前景色与背景色之间的最小对比度要求。对比度比值范围从 1:1(无对比)到 21:1(黑白最大对比),比值越高可读性越好。良好的颜色对比度不仅能帮助视障用户、色盲用户阅读内容,也能在强光环境下提升所有人的阅读体验。
| 级别 | 文字类型 | 最小对比度 |
|---|---|---|
| AA | 正常文字(<18pt 或 <14pt 加粗) | 4.5 : 1 |
| AA | 大文字(≥18pt 或 ≥14pt 加粗) | 3 : 1 |
| AAA | 正常文字 | 7 : 1 |
| AAA | 大文字 | 4.5 : 1 |
| AA | UI组件和图形(图标、边框等) | 3 : 1 |
WCAG 颜色对比度是指前景色(文字)与背景色之间的亮度差异比值,范围从 1:1 到 21:1。它是 W3C Web 内容无障碍指南中定义的核心指标,用于衡量文字内容的可读性。比值越高,文字越容易被识别,对视障用户和色觉障碍用户越友好。
AA 是 WCAG 的基本合规级别,要求正常文字对比度不低于 4.5:1、大文字不低于 3:1,是大多数网站应达到的最低标准。AAA 是更严格的增强级别,要求正常文字不低于 7:1、大文字不低于 4.5:1,适用于对无障碍有高要求的场景(如政府网站、医疗平台)。AA 是推荐的基础目标,AAA 不是所有内容都能达到的通用要求。
WCAG 定义的大文字是指:字体大小不小于 18pt(约 24px)的普通文字,或字体大小不小于 14pt(约 18.5px)的加粗文字。大文字因为面积更大、笔画更粗,对对比度的要求相对降低,所以 AA 标准只要求 3:1 而非 4.5:1。
4.5:1 这个数值是基于视力损失约 20/40(约等于 0.5 视力)的人群研究得出的。研究表明,对比度达到 4.5:1 时,视力在 20/40 以上的用户基本能正常阅读文字内容。这个标准平衡了无障碍需求和设计灵活性,是 W3C 经过大量科学验证后确定的最佳实践值。
最直接的方法是调整颜色亮度:如果文字太浅,将文字色调暗(降低 RGB 值);如果背景太深,将背景色调亮(提高 RGB 值)。本工具在检测到不合规时会自动推荐满足 AA 标准的替代色方案,点击即可应用。另外,也可以尝试使用黑白搭配(21:1 最大对比度)作为安全方案,或使用工具的"随机配色"功能探索合规的组合。