颜色无障碍标准 WCAG 完全指南

← 返回博客

颜色无障碍标准 WCAG 完全指南

· 7 分钟阅读

什么是 WCAG，为什么重要

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是由 W3C 制定的国际标准，旨在确保网页对所有用户可访问，包括有视觉、听觉、运动或认知障碍的用户。颜色相关的无障碍要求主要集中在 WCAG 1.4 系列准则，这些准则对全球数百万视觉障碍用户至关重要。

WCAG 三个合规级别

WCAG 定义了三个合规级别，逐级递进：A 级（最低，基本无障碍）、AA 级（中等，大多数法规和合同要求的最低标准）、AAA 级（最高，并非所有内容都能达到）。大多数组织以 WCAG 2.1 AA 级为目标。美国的 ADA 法规、欧洲的 EN 301 549 等法规都要求达到 AA 级。

关键准则 1.4.3：文字对比度

这是颜色无障碍中最重要的要求：文字和背景之间必须有足够的对比度。具体要求：

• **AA 级，正常文字：**对比度至少 4.5:1（适用于小于 18pt 或小于 14pt 粗体的文字）
• **AA 级，大号文字：**对比度至少 3:1（适用于 18pt 及以上，或 14pt 及以上粗体）
• **AAA 级，正常文字：**对比度至少 7:1
• **AAA 级，大号文字：**对比度至少 4.5:1

/* Contrast ratio examples */
Black on White:        21:1  (PASS AAA)
Dark gray on White:    15:1  (PASS AAA)
#767676 on White:     4.54:1 (PASS AA, FAIL AAA)
#999999 on White:     2.85:1 (FAIL ALL)
White on Blue #4A90E2: 3.1:1 (PASS AA for large text only)

准则 1.4.1：不能仅靠颜色传达信息

这是一个容易被忽视的重要准则：颜色不应该是传达信息的唯一方式。例如：不能只用红色表示表单错误（需同时提供错误图标或文字说明）、不能只用绿色和红色区分成功和失败状态（色盲用户无法区分）、不能只靠颜色区分图表中的数据系列（需同时使用不同图案或标签）。

准则 1.4.11：非文字对比度

WCAG 2.1 新增的准则，要求用于传达信息的 UI 组件（非文字元素）也需要符合对比度标准：所有处于激活状态且用于传达信息的用户界面组件（按钮边框、输入框边框、单选按钮等），以及图表和图示中传达信息的部分，与相邻颜色的对比度至少需要 3:1。

色盲用户的考量

全球约 8% 的男性和 0.5% 的女性有不同程度的色觉缺陷。最常见的类型是红绿色盲（Deuteranopia/Protanopia），患者无法区分红色和绿色。设计建议：

• 避免仅用红/绿颜色区分关键信息（如成功/错误状态）
• 在颜色旁添加图标（✓ ✗）或文字标签
• 使用色盲模拟工具（如 Coblis、Figma 插件）预览你的设计
• 在图表中同时使用颜色和形状/图案来区分数据
• 链接颜色应与正文文字有足够区别，且最好加下划线

实用的无障碍颜色策略

以下是确保颜色无障碍的实用策略：

• 在设计阶段就检查对比度，而不是最后再修补
• 使用 Lighthouse、axe、WAVE 等工具进行自动化无障碍扫描
• 为文字选择颜色时，以深色为主（深色文字比浅色文字更易读）
• 灰色文字要慎用：#767676 在白色背景上刚好通过 AA，比这更浅则不达标
• 对于需要同时支持深色和浅色模式的网站，两种模式都需要验证对比度

APCA：下一代对比度算法

WCAG 3.0（仍在草案阶段）将引入新的对比度算法 APCA（Advanced Perceptual Contrast Algorithm）。APCA 比当前的 WCAG 2.x 对比度算法更精确地模拟人眼感知，特别是对小字体、粗字体和特殊颜色组合的处理更合理。虽然 WCAG 3.0 尚未发布，但 APCA 作为参考工具已经被一些设计师采用。

立即尝试在线工具，无需安装，免费使用。

打开工具 →