颜色对比检查器

颜色对比检查器帮助设计师、开发人员和无障碍专家确保颜色组合符合 WCAG 2.x 无障碍标准。文本和背景颜色之间适当的对比度对于可读性至关重要，特别是对于低视力或色觉障碍用户而言。

什么是颜色对比度？

颜色对比度衡量两种颜色之间感知的亮度差异。其范围从 1:1（颜色相同，无对比）到 21:1（最大对比：白底黑字）。该比例是根据两种颜色的相对亮度值，使用 WCAG 2.x 公式计算得出的。

WCAG 对比度要求

Web 内容无障碍指南 (WCAG) 为颜色对比度定义了两个符合性级别：

什么算作“大文本”？

WCAG 将大文本定义为至少 18 磅 (24px) 常规字重，或至少 14 磅 (18.66px) 加粗字重。大文本的对比度要求较低，因为较大的字符自然更容易阅读。

如何使用此工具

1. 输入您的颜色： 使用颜色选择器选取前景色（文本）和背景色，或输入十六进制代码，也可以点击预设示例。
2. 查看实时预览： 即时查看您的颜色在实际 UI 元素（标题、正文、按钮、链接、表单输入框）上的效果。
3. 点击“检查对比度”： 获取准确的对比度数值以及普通文本、大文本和 UI 组件的 WCAG 合规状态。
4. 应用建议： 如果您的颜色不符合标准，请使用自动建议功能来查找最接近的符合无障碍要求的替代方案。

理解结果

对比度

主数值（例如 8.59:1）告诉您两种颜色的视觉差异程度。数值越高，可读性越好。至少 4.5:1 的比例可确保大多数用户能够舒适地阅读普通大小的文本。

综合等级

• AAA (优秀)： 通过所有 WCAG 标准，包括增强标准 (7:1+)。达到最佳无障碍程度。
• AA (良好)： 通过标准要求 (4.5:1+)。符合大多数地区的法律要求。
• AA 大文本 (部分通过)： 仅通过大文本或 UI 组件标准 (3:1+)。普通文本未通过。
• 失败 (差)： 不符合任何 WCAG 对比度标准。对于许多用户来说，文本将难以阅读。

颜色建议

当您的颜色不符合对比度要求时，该工具会通过调整亮度同时保留色相和饱和度，来建议最接近的无障碍颜色。您可以点击一次即可应用建议。

为什么颜色对比度很重要

• 法律合规： 许多国家法律要求符合 WCAG AA 标准（如 ADA、Section 508、EN 301 549、EAA）。
• 用户体验： 良好的对比度可以提高所有用户的可读性，而不仅仅是残障人士。
• SEO 影响： 搜索引擎越来越多地将无障碍性纳入排名因素。
• 受众覆盖： 大约每 12 名男性中就有 1 人，每 200 名女性中就有 1 人患有色觉障碍。

选择无障碍颜色的技巧

• 从足够的对比度开始，然后优化设计——事后修复对比度会更加困难。
• 避免在没有测试的情况下在彩色背景上放置彩色文字。即使看起来“截然不同”的颜色也可能无法通过对比度检查。
• 白色背景上的浅灰色文本是最常见的无障碍失败案例之一。
• 在设计过程中使用此工具，而不仅仅是在审计期间——尽早发现问题可以节省大量返工时间。
• 不要仅依靠颜色来传达信息；也要使用形状、图案或标签。

常见问题解答

什么是颜色对比度？

颜色对比度衡量两种颜色之间感知亮度的差异。其范围从 1:1（无对比，颜色相同）到 21:1（最大对比，白底黑字）。该比例使用 WCAG 2.x 公式计算：(L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。

WCAG AA 合规需要多少对比度？

WCAG AA 要求普通文本（18pt 以下或 14pt 加粗以下）的最小对比度为 4.5:1，大文本（18pt+ 或 14pt+ 加粗）的最小对比度为 3:1。对于非文本 UI 组件和图形对象，最小值为 3:1。

WCAG AA 和 AAA 有什么区别？

WCAG AA 是标准合规级别，要求普通文本为 4.5:1，大文本为 3:1。WCAG AAA 是增强级别，要求普通文本为 7:1，大文本为 4.5:1。大多数无障碍法律要求达到 AA 级，而 AAA 级是推荐做法，通常不强制要求整个网站都达到该标准。

WCAG 指南中什么是大文本？

在 WCAG 指南中，大文本定义为至少 18 磅 (24px) 的常规字重，或至少 14 磅 (约 18.66px) 的加粗字重。大文本的对比度要求较低，因为较大的字符在较低对比度下也更容易阅读。

如何修复低颜色对比度？

修复低颜色对比度的方法：(1) 加深文字颜色或减浅背景颜色，反之亦然。(2) 使用我们的颜色建议功能，它会自动寻找最接近的通过颜色。(3) 增加字体大小以符合对比度要求较低的“大文本”标准。(4) 避免仅依靠颜色来传达信息。

颜色对比度只适用于文本吗？

不是。WCAG 2.1 成功标准 1.4.11 要求非文本元素（包括表单输入框边框、图标和对理解内容至关重要的图形对象）的最小对比度为 3:1。这适用于按钮、表单字段和焦点指示器等 UI 组件。

更多资源

• WCAG 2.1：理解对比度（最低要求）
• WCAG 2.1：理解对比度（增强型）
• Web 内容无障碍指南 - 维基百科