🎨
← 返回教程列表

无障碍颜色对比度：为设计师解读的 WCAG 指南

· 标签: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

无障碍颜色对比度：为设计师解读的 WCAG 指南

颜色对比度是 Web 无障碍性最重要的方面之一。它直接关系到用户能否阅读你的内容、浏览你的界面并完成任务。然而，对比度失效仍然是 Web 上最常见的无障碍问题之一——通常是因为设计师选择了在自己屏幕上看起来不错的颜色，却没有验证对比度比例。

本指南解释了你需要了解的关于 WCAG 颜色对比度要求的一切、如何满足这些要求，以及如何在不牺牲视觉质量的情况下设计无障碍界面。

什么是颜色对比度比例？

颜色对比度是对两种颜色感知亮度差异的度量——通常是前景（文字）和背景。对比度以比例表示，范围从 1:1（颜色相同，文字不可见）到 21:1（白色背景上的黑色文字，这是可能的最大值）。

对比度比例使用相对亮度计算，相对亮度考虑到了人眼如何感知不同波长的光。公式为：

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。人眼对绿光比红光或蓝光更敏感，因此亮度计算会对不同通道进行加权。

你不需要手动计算这个。 每个对比度检查工具，包括我们的颜色转换器，都能即时完成。

WCAG 对比度要求

Web 内容无障碍指南（WCAG）定义了三个合规级别：A、AA 和 AAA。颜色对比度要求适用于 AA 和 AAA 级别。

WCAG AA 级别（推荐的最低标准）

AA 是大多数网站的最低标准，在许多司法管辖区是法律要求（包括《欧洲无障碍法案》以及美国、加拿大和澳大利亚的无障碍法规）。

| 文字类别 | 最低比例 | 白底合规灰色示例 | |---------------|--------------|-------------------------------------| | 常规文字（18px 以下 / 14px 粗体以下） | 4.5:1 | 白底 #767676 | | 大号文字（18px+ 粗体或 24px+ 常规） | 3:1 | 白底 #9A9A9A | | UI 组件（边框、图标、表单字段） | 3:1 | 组件边框、焦点指示器 | | 非装饰性图形 | 3:1 | 图表、信息图、图标 |

WCAG AAA 级别（增强）

AAA 是更高的标准，提供更好的可读性，特别是对于低视力或有对比度敏感问题的用户。

| 文字类别 | 最低比例 | 白底合规灰色示例 | |---------------|--------------|-------------------------------------| | 常规文字 | 7:1 | 白底 #595959 | | 大号文字 | 4.5:1 | 白底 #777777 |

大多数法规不要求 AAA 合规，但推荐为服务老年人或视力受损用户的网站使用。

这些要求涵盖什么

WCAG 对比度要求适用于：

  • 文字 — 所有正文、标题、标签、说明文字和链接文字
  • 图片中的文字 — 作为图片一部分的文字（装饰性文字除外）
  • UI 组件 — 按钮、表单字段、滑块、切换开关及其边框
  • 图标 — 传达信息的基本图标（非装饰性的）
  • 焦点指示器 — 键盘焦点轮廓与相邻背景的对比度必须达到 3:1

这些要求不涵盖什么

  • 徽标 — 作为品牌徽标或公司名称一部分的文字
  • 装饰元素 — 纯装饰性的、没有功能用途的图片
  • 非活动 UI — 禁用的按钮或表单控件（不过它们仍必须是可感知的）
  • 感官文字 — 作为背景图片一部分的文字，且该文字并非必需

常见的对比度失效及其修复方法

1. 浅灰色文字

白色背景上的浅灰色文字是迄今为止最常见的对比度失效。白底 #CCCCCC 这样的灰色对比度比例只有 1.6:1——远低于 4.5:1 的最低标准。

修复方法： 加深你的灰色文字。对于白色背景上的正文，目标至少为 #595959（AAA 合规）。即使是 #767676（14px 文字的 AA 最低标准）也比大多数"微妙的"灰色选择明显更深。

2. 品牌色用作正文

品牌色用作文字时往往太浅。白底中蓝色 #3366CC 的比例约为 3.5:1——低于 4.5:1 的标准。

修复方法： 将品牌色保留给标题和点缀。使用接近黑色（#1A1A1A 到 #333333）作为正文。检查任何彩色文字是否达到该比例。

3. 仅用颜色区分链接

仅通过颜色与正文区分的链接不符合 WCAG 成功标准 1.4.1（颜色的使用）。色盲用户可能感知不到这种差异。

修复方法： 始终为链接提供非颜色的指示器。常见方法：

  • 链接加下划线（最稳妥的解决方案）
  • 添加图标（箭头或外部链接符号）
  • 为行内链接使用粗体字重
  • 提供背景高亮

4. 背景图片上的文字

放在照片或渐变上的文字很少在整个图片上都有足够的对比度。

修复方法：

  • 在图片和文字之间添加半透明覆盖层
  • 使用文字阴影实现微妙的轮廓效果
  • 将文字放在纯色盒状覆盖层中
  • 确保可能出现在文字后面的图片的任何部分都达到最低比例

5. 低对比度的占位符文字

白底 #BDBDBD（1.9:1）这样的表单占位符很常见，但不符合对比度要求。

修复方法： 将占位符加深到至少 #757575（4.6:1）。更好的做法是使用标签而不是占位符——标签始终可见，用户开始输入时也不会消失。

测试颜色对比度

自动化工具

  • 浏览器 DevTools — Chrome 和 Firefox DevTools 内置对比度检查功能。检查一个元素，在"样式"或"无障碍"面板中查看对比度比例。
  • 在线对比度检查器 — 输入两种颜色即可获得 AA 和 AAA 的即时通过/失败状态。
  • 设计工具插件 — Stark、A11y 和 Contrast 可用于 Figma、Sketch 和 Adobe XD。这些工具直接在设计文件中检查对比度。
  • Lighthouse — Google 的 Lighthouse 审计会自动报告对比度失效。

手动测试

自动化工具只能检查文字对比度。要进行完整的无障碍审查：

  1. 关闭显示器 — 你能区分所有界面元素吗？
  2. 使用灰度滤镜 — 没有颜色，信息还能正确传达吗？
  3. 使用色盲模拟器测试 — 像 Colorblindly（Chrome 扩展）这样的工具可以展示你的网站在各类色觉缺陷用户眼中的样子。
  4. 在直射阳光下测试 — 高环境光会降低感知到的对比度。

为色盲进行设计

大约每 12 名男性中有 1 人（8%）和每 200 名女性中有 1 人（0.5%）患有某种形式的色觉缺陷。最常见的类型是：

  • 绿色盲（绿色弱视，男性中占 6%）— 难以区分红色和绿色
  • 红色盲（红色弱视，男性中占 2%）— 红色看起来更深，与绿色混淆
  • 蓝色盲（蓝色弱视，罕见）— 难以区分蓝色和黄色

设计策略

  1. 切勿只依赖颜色 — 任何通过颜色传达的信息（错误状态、状态指示器、图表类别）也必须通过文字、图标、图案或位置传达。

  2. 避免有问题的组合 — 红/绿、蓝/紫、绿/棕和绿/蓝是最常被混淆的颜色对。

  3. 使用图案和纹理 — 在图表中，除了颜色之外，还要使用虚线、斜线填充和不同的形状。

  4. 直接添加标签 — 在数据可视化中，直接标注数据点，而不是依赖颜色编码的图例。

  5. 使用模拟器测试 — 每个设计在发布前都应通过绿色盲和红色盲模拟器进行测试。

构建无障碍颜色系统

第 1 步：选择无障碍的基础颜色

从天然具有良好对比度的颜色开始。深蓝色、深绿色和浓郁红色在恰当搭配时都可以成为无障碍的基础颜色。

第 2 步：生成合规的梯度

创建一个明度梯度，使每一步与较浅和较深的相邻色都保持足够的对比度。OKLCH 非常适合这个用途，因为它的明度通道在感知上是均匀的：

--text-primary: oklch(10% 0.01 0);    /* 接近黑色，白底对比度约 19:1 */
--text-secondary: oklch(35% 0.02 0);  /* 深灰色，白底对比度约 9:1 */
--text-muted: oklch(45% 0.02 0);      /* 中灰色，白底对比度约 5.5:1 */
--text-disabled: oklch(60% 0.02 0);   /* 浅灰色，白底对比度约 3:1 */

第 3 步：验证每一种组合

设计系统中每一对前景-背景组合都必须经过验证：

  • 表面上的主要文字 — 最低 4.5:1（推荐 7:1）
  • 表面上的次要文字 — 最低 4.5:1
  • 表面上的弱化文字 — 最低 3:1（仅用于非必需文字）
  • 交互元素 — 状态最低 3:1
  • 焦点指示器 — 最低 3:1

给开发者的实用清单

  • [ ] 所有正文的对比度比例达到或超过 4.5:1
  • [ ] 所有大号文字的对比度比例达到或超过 3:1
  • [ ] 链接有非颜色的指示器（下划线、图标或字重变化）
  • [ ] 表单输入有可见的边框或背景（不仅仅是占位符文字）
  • [ ] 焦点指示器与相邻背景的对比度达到 3:1
  • [ ] 错误状态将颜色与文字或图标结合使用
  • [ ] 图表和图形除了颜色之外还使用图案或直接标签
  • [ ] 占位符文字达到 4.5:1 的最低标准
  • [ ] 禁用元素在视觉上可区分但仍可感知
  • [ ] 设计已使用色盲模拟器进行测试

结论

无障碍颜色对比度不是可选项——它是包容性 Web 设计的基本要求。满足 WCAG AA 标准可以让视力受损的用户访问你的内容，为每个人提高可读性，并且往往会带来更干净、更有目的性的设计。从在流程中加入对比度检查开始，将颜色作为其他视觉指示器的补充而非替代，并始终通过无障碍的视角测试你的设计。

使用我们内置对比度检查功能的免费在线颜色转换器来对照 WCAG AA 和 AAA 标准验证你的颜色组合。