WCAG 对比度检查工具
输入前景色与背景色，实时检测对比度是否符合 WCAG 2.1 无障碍标准，输出 AA / AAA 合规结果
前景色（文字）
#
相对亮度0.0130
背景色
#
相对亮度1.0000
实时预览
大号文字 Aa 大标题
普通文本示例：The quick brown fox jumps over the lazy dog. 这是一段用于检测对比度的中文和英文混排文字。
小号文字示例：辅助说明文字 12px
WCAG 合规检测
通过AA
普通文本
适用于字号小于 18pt（24px）或小于 14pt（18.66px）加粗的文本
要求：≥ 4.5:1
通过AA
大号文本
适用于字号 ≥ 18pt（24px）或 ≥ 14pt（18.66px）加粗的文本
要求：≥ 3:1
通过AAA
普通文本
最高无障碍等级，适用于需要极高可读性的文本
要求：≥ 7:1
通过AAA
大号文本
适用于大号文本的最高无障碍等级
要求：≥ 4.5:1
通过AA
UI 组件 / 图形
适用于按钮边框、图标、图表等非文本的界面元素
要求：≥ 3:1
关于 WCAG 对比度检查工具
WCAG 对比度检查工具是一款免费的在线无障碍检测工具，帮助设计师和开发者验证网页、APP 中的文字与背景对比度是否符合 WCAG 2.1（Web Content Accessibility Guidelines）国际无障碍标准。您只需输入前景色（文字颜色）和背景色，工具会实时计算两者的对比度比值，并给出 AA、AAA 等级的通过结果。同时，工具还提供真实场景的文字预览，让您直观感受可读性。无论您是在做网站配色、移动应用界面，还是产品无障碍优化，本工具都能帮您快速发现可读性不足的问题，提升产品的无障碍体验。
什么是 WCAG 对比度标准
WCAG 是由 W3C 制定的国际无障碍标准，其中 1.4.3（最低对比度）和 1.4.6（增强对比度）两条规则对文字与背景的对比度做出了明确规定。对比度是用两组颜色的相对亮度计算的比值，范围从 1:1（同色，完全不可读）到 21:1（黑白，最高对比度）。WCAG 要求：普通文本对比度至少 4.5:1（AA 级）或 7:1（AAA 级）；大号文本对比度至少 3:1（AA 级）或 4.5:1（AAA 级）。此外，图标、按钮边框等 UI 组件也建议对比度不低于 3:1。本工具完整覆盖了这些规则，一次检测即可得到所有合规结论。
如何使用对比度检查工具
使用工具非常简单。第一步，在「前景色」卡片中选择文字颜色，可以通过颜色选择器、HEX 输入或 RGB 通道输入三种方式。第二步，在「背景色」卡片中以同样方式选择背景颜色。第三步，工具会实时计算对比度，并在顶部结果栏显示比值与等级：绿色代表 AAA、蓝色代表 AA、橙色代表仅通过大号文本、红色代表不通过。第四步，在「实时预览」区域查看大号、普通、小号三种字号下的实际可读性，直观判断是否满足需求。第五步，在「合规检测」区域查看每一条 WCAG 规则的通过情况，覆盖 AA/AAA 普通文本、大号文本和 UI 组件。第六步，点击「复制报告」把当前检测结果复制下来，方便存档或分享给团队成员。
WCAG 对比度的应用场景
WCAG 对比度检查的应用场景非常广泛。在网站和应用开发中，对比度是产品是否通过无障碍审计的关键指标之一，政府、金融、医疗等行业的项目通常强制要求达到 AA 级以上。在移动端 UI 设计中，弱对比度文字在户外或光线不佳的环境下几乎不可读，检测后调整能显著提升体验。在品牌视觉设计中，主色和辅助色作为背景与文字搭配时，往往需要通过对比度检测来验证可读性，避免设计稿好看但实际看不清。此外，在数据可视化、图表、地图等场景中，色彩对比同样影响信息传达效率，WCAG 检测也是必要的质量把关环节。
对比度检查使用经验
使用对比度检查工具时有几个经验值得参考。第一，不要只看数字，要结合字号和字重判断：14pt（18.66px）加粗或 18pt（24px）以上的文字视为大号文本，标准会放宽。第二，纯黑配纯白虽然对比度最高，但长时间阅读容易疲劳，可以考虑略浅的前景色（如 #1E1E1E）配浅灰背景（如 #FAFAFA），既美观又满足 AAA。第三，品牌的彩色主色往往对比度不足，用于大面积背景时容易翻车，建议在主色与白色之间寻找一个折中的中间色，或直接使用深色文字。第四，图形和图标虽然不属于文本，但也建议满足 3:1，否则在低视力用户眼中几乎不可辨认。第五，颜色不是唯一的区分方式，除了对比度，还应该通过图标、下划线、字重等辅助手段来传达信息。