色盲与网页设计：你需要了解的知识

比大多数设计师意识到的更常见

色觉缺陷——通常称为色盲——影响着约 8% 的男性和 0.5% 的女性。这大约是每 12 名男性中的 1 位和每 200 名女性中的 1 位，使其比网络无障碍标准所涉及的大多数其他残障更为普遍。

然而它在设计中却经常被忽视。团队用屏幕阅读器和键盘导航进行测试，运行一次自动 WCAG 扫描，就认为无障碍工作已经完成——却从未检查过他们的配色方案对色盲用户是否清晰可辨。

理解色盲以及它实际上对你所设计的网页界面有何影响，是修复它的第一步。

各种类型及其影响

色觉缺陷有几种形式，它们并不都产生相同的体验。

红绿缺陷（最常见）

Protanopia ——完全缺乏红色视锥感光细胞。红色显得暗淡或呈黑色。红绿区分消失。

Protanomaly ——红色敏感度降低。红色、橙色和黄色向绿色偏移，整体体验更暗淡，仿佛红色通道被调低了。

Deuteranopia ——完全缺乏绿色视锥细胞。最常见的色盲形式。绿色和红色被混淆；世界看起来像是透过一层黄棕色滤镜。

Deuteranomaly ——绿色敏感度降低。类似于 deuteranopia，但程度较轻。总体上最普遍的类型，影响约 5% 的男性。

蓝黄缺陷（较罕见）

Tritanopia ——缺乏蓝色视锥细胞。蓝色显得像绿色，黄色显得苍白或不可见。罕见。

Tritanomaly ——蓝色敏感度降低。蓝绿色和红紫色被混淆。

全色盲（非常罕见）

Achromatopsia ——缺乏所有颜色视锥细胞。只能感知亮度；世界呈现为灰色的深浅变化。通常伴有对光敏感和视力下降。

色盲如何破坏常见的网页模式

抽象地了解各种类型，不如了解哪些具体的设计决策会造成问题来得有用。以下是最常见的几种。

仅用红色表示的错误状态

将表单字段边框变红以显示验证错误，是网页设计中最普遍的模式之一。对于红绿缺陷用户来说，白底红色或灰底红色可能几乎不可见，或者与正常的未聚焦状态难以区分。

这直接由 WCAG 2.2 1.4.1 颜色的使用（A 级）所涵盖：颜色不得作为传达信息、指示动作、提示响应或区分视觉元素的唯一手段。

修复方法很简单：将颜色与第二个视觉指示配对——图标、文字标签、边框粗细的变化，或任何其他非颜色信号。

<!-- 仅依赖颜色：未通过 1.4.1 -->
<input type="email" class="field--error">

<!-- 颜色加图标加文字：通过 -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> 请输入有效的电子邮件地址。
  </p>
</div>

对比度不足

低对比度是与色盲不同的另一个问题，但两者会交叉影响。许多在典型色觉下看起来清晰可读的配色方案，在色觉缺陷下会变得更难阅读，因为前景和背景之间的感知差异进一步缩小。

WCAG 1.4.3 要求普通文本的最小对比度为 4.5:1，大号文本为 3:1。使用浏览器 DevTools 取色器或专用检查工具来测试对比度是不可妥协的——不要依赖肉眼观察。

仅用颜色编码的数据可视化

一个仅靠颜色区分六个扇区的饼图。一张红到绿渐变的地图。一个仅靠色相区分四组数据的折线图。

对于 deuteranopia 用户来说，红色和绿色变得无法区分。图表的含义完全崩塌。有关这方面的更多内容，请参阅我们关于无障碍数据可视化的指南。

仅靠颜色从正文中凸显出来的链接

默认情况下，浏览器会为链接加下划线。许多设计师去掉这条下划线，仅靠颜色将链接与周围文本区分开来。色觉缺陷用户——尤其是那些使用低对比度主题的用户——可能根本无法识别出链接。

WCAG 1.4.1 在此同样适用。如果链接颜色是唯一的视觉指示（没有下划线、没有加粗、没有其他区分方式），那么该链接对色盲用户来说就不是无障碍的。

最简单的修复方法：恢复下划线。或者，确保链接颜色与正文文字颜色和背景都有足够的对比度。

在设计时考虑色盲

使用冗余编码

在颜色之外添加第二个视觉通道。在图表中：添加图案、纹理或数据标签。在状态指示器中：添加图标。在表单状态中：添加文字。目标是让完全去掉颜色的人仍然能理解一切。

用模拟工具测试

Chrome DevTools 内置了色盲模拟功能。打开 DevTools >“Rendering”面板 >“Emulate vision deficiencies”。你可以模拟 protanopia、deuteranopia、tritanopia 和 achromatopsia。

Figma 和其他设计工具有类似的插件。运行一次模拟只需几秒钟，往往能揭示在标准预览中看不到的问题。

从整体检查你的配色方案

不要只测试单个元素的配对。将整套配色方案放在一起看：主色、辅色、错误色、成功色、警告色和信息色。在 deuteranopia 模拟下，错误红色和成功绿色看起来是否相似？如果是，那么无论你的对比度在技术上是否达标，你都有问题。

避免有问题的组合

对色觉缺陷特别不可靠的组合：

• 红色和绿色
• 绿色和棕色
• 蓝色和紫色
• 绿色和灰色
• 绿色和黑色

当这些配对需要出现在同一情境中时，请通过明度或图案而非色相来区分它们。

WCAG 涵盖和不涵盖的内容

WCAG 涵盖颜色对比度（1.4.3、1.4.11）以及禁止将颜色作为传达信息的唯一手段（1.4.1）。它并不规定你可以或不可以使用哪些颜色，也不要求你的整套配色方案在每种色觉缺陷下都能被感知。

它要求的是，去掉颜色后不会丢失任何含义。这就是实用的检验标准。从你的设计中去掉颜色。每一条信息是否仍能通过其他方式获取？

如果答案是肯定的，你就满足了要求。如果错误状态消失了，如果图表数据变得模棱两可，如果链接变得不可见——那你就还有工作要做。

我们的无障碍审计将颜色无障碍性作为审查的标准组成部分。如果你想知道你当前的设计处于什么水平，运行一次免费的自动扫描，作为起点来捕捉可自动检测的问题。