颜色对比度检测器
FREE TOOL

颜色对比度检测器

实时计算WCAG对比度比值,检测AA/AAA无障碍标准合规性,让设计对每个人都友好

🔒 100% 本地运行 · 数据不上传服务器 · 安全隐私
颜色对比度实时预览
这是一段正文文字示例,用于展示前景色与背景色的实际搭配效果。良好的对比度能确保所有用户都能清晰阅读内容。
大号标题文字示例 (24px Bold)
小号文字示例 (12px) — 用于测试小尺寸文字的可读性
按钮示例
🖌️ 前景色(文字色)
HEX
RGB
🎨 背景色
HEX
RGB
对比度比值
21.00
: 1
WCAG 合规状态
AA
正常文字
✓ 通过
需 ≥ 4.5:1
AA
大文字
✓ 通过
需 ≥ 3:1
AAA
正常文字
✓ 通过
需 ≥ 7:1
AAA
大文字
✓ 通过
需 ≥ 4.5:1

📊 WCAG 对比度计算公式

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颜色对比度使用指南

什么是 WCAG 颜色对比度?

WCAG(Web Content Accessibility Guidelines,Web内容无障碍指南)是由 W3C 制定的国际标准,其中定义了前景色与背景色之间的最小对比度要求。对比度比值范围从 1:1(无对比)到 21:1(黑白最大对比),比值越高可读性越好。良好的颜色对比度不仅能帮助视障用户、色盲用户阅读内容,也能在强光环境下提升所有人的阅读体验。

WCAG 对比度标准一览

级别 文字类型 最小对比度
AA正常文字(<18pt 或 <14pt 加粗)4.5 : 1
AA大文字(≥18pt 或 ≥14pt 加粗)3 : 1
AAA正常文字7 : 1
AAA大文字4.5 : 1
AAUI组件和图形(图标、边框等)3 : 1

如何改善对比度?

常见问题 FAQ

什么是 WCAG 颜色对比度?

WCAG 颜色对比度是指前景色(文字)与背景色之间的亮度差异比值,范围从 1:1 到 21:1。它是 W3C Web 内容无障碍指南中定义的核心指标,用于衡量文字内容的可读性。比值越高,文字越容易被识别,对视障用户和色觉障碍用户越友好。

AA 和 AAA 标准有什么区别?

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。

为什么 AA 正常文字的标准是 4.5:1?

4.5:1 这个数值是基于视力损失约 20/40(约等于 0.5 视力)的人群研究得出的。研究表明,对比度达到 4.5:1 时,视力在 20/40 以上的用户基本能正常阅读文字内容。这个标准平衡了无障碍需求和设计灵活性,是 W3C 经过大量科学验证后确定的最佳实践值。

对比度不达标怎么改善?

最直接的方法是调整颜色亮度:如果文字太浅,将文字色调暗(降低 RGB 值);如果背景太深,将背景色调亮(提高 RGB 值)。本工具在检测到不合规时会自动推荐满足 AA 标准的替代色方案,点击即可应用。另外,也可以尝试使用黑白搭配(21:1 最大对比度)作为安全方案,或使用工具的"随机配色"功能探索合规的组合。