WCAG对比度检查器指南：AA/AAA要求及如何修复失败

颜色对比度是网络上最常见的无障碍问题。根据WebAIM的年度无障碍分析，低对比度影响了超过80%的主页。然而，这也是最容易修复的问题之一——只要您了解规则并拥有合适的工具。本指南解释了WCAG对比度要求、对比度比率的工作原理，以及如何在不重新设计整个调色板的情况下修复失败。

什么是颜色对比度？为什么它很重要？

颜色对比度是文本与其背景之间亮度（感知亮度）的差异。高对比度使文本对每个人都易读——包括低视力、色盲或在强烈阳光下查看屏幕的用户。

《网络内容无障碍指南》（WCAG）2.1定义了最低对比度比率以确保可读性。满足这些标准不仅是良好实践——根据《美国残疾人法案》（ADA）、第508条和世界各地的类似法律，它在法律上是必需的。

WCAG对比度要求

WCAG为对比度定义了两个合规级别：

AA级（最低标准）

普通文本（小于18pt或小于14pt粗体）： 最低比率 4.5:1

大文本（18pt+或14pt+粗体）： 最低比率 3:1

UI组件和图形对象： 最低比率 3:1（WCAG 2.1新增）

AAA级（增强标准）

普通文本： 最低 7:1

大文本： 最低 4.5:1

大多数组织以AA级为基准。AAA推荐用于文本密集型应用程序和服务于视障用户的产品。

对比度比率的计算方法

对比度比率是较亮颜色的相对亮度除以较暗颜色的相对亮度，表示为从1:1（无对比度）到21:1（白底黑字）的比率。

您无需手动计算。 使用我们的WCAG对比度检查器即时测试多个颜色对。

示例

文本	背景	比率	AA普通	AA大	AAA普通
#000000	#FFFFFF	21:1	✅ 通过	✅ 通过	✅ 通过
#767676	#FFFFFF	4.54:1	✅ 通过	✅ 通过	❌ 失败
#3B82F6	#FFFFFF	3.15:1	❌ 失败	✅ 通过	❌ 失败
#1E40AF	#FFFFFF	7.04:1	✅ 通过	✅ 通过	✅ 通过

常见失败和修复

白色背景上的浅灰色文本

失败： 白色背景上color: #999999 = 2.85:1 — AA失败。 修复： AA加深至#767676（4.54:1）或AAA加深至#595959（7.0:1）。

白色背景上的品牌色

失败： 白色背景上color: #3B82F6（Tailwind blue-500） = 3.15:1 — AA普通文本失败。 修复： 仅用于大文本，或为正文加深至#1E40AF（blue-700, 7.04:1）。

使用批量对比度检查器在几秒钟内测试整个调色板。