色弱友好配色指南 — 写给设计师和开发者的实用规则

把 Okabe-Ito、Paul Tol 配色与第一、二、三型模拟放在一起比较，并整理了明度对比、双重编码、WCAG 标准等不依赖颜色的设计规则。

如果每12名男性中约有1人（以欧洲血统计）存在红绿色觉异常，那么看图表、地图和仪表盘的人里总有一部分是色弱者。好消息是：只要遵守几条规则，大部分问题就会消失。

规则1 — 不要只用颜色传递信息

网页无障碍标准 WCAG 的成功标准 1.4.1「颜色的使用」规定，颜色不应成为传达信息的唯一视觉手段。输入错误的表单项在红色边框之外还要配上图标和文字，图表中的线条在颜色之外还要用形状、虚线或直接标注。

规则2 — 确保明度差

即使有色觉异常，对亮度差也能看得很清楚。需要相互区分的颜色，请选明度（亮度）明显不同的。最简单的检查方法是看黑白打印后能否区分。

规则3 — 避开红-绿组合，改用蓝-橙

「好=绿，坏=红」是最常见的错误。第一型和第二型都会把这两种颜色看成相近的土黄色。需要对比两个类别时，蓝 ↔ 橙最为稳妥。

经过验证的配色

Okabe 和 Ito 提出的「色彩通用设计」配色，是精心挑选、让红绿色觉异常者也能分辨的8种颜色。下表是把同样的颜色转换为二色视模拟（Machado 2009，强度100%）后的效果。

Paul Tol 的「bright」配色，同样是兼顾色觉异常与黑白打印而设计的。

反之，常用的高饱和红·绿·橙组合，在第一型和第二型眼中会相互重叠。

连续数值要用均匀的明度变化

• 温度、密度等连续数值，请使用明度朝一个方向均匀变化的顺序色标（viridis、cividis 等）。cividis 在设计时就考虑了色觉异常。
• 彩虹（jet）色标的明度忽高忽低，即使没有色觉异常也会引起误解，而且在红绿区间会丢失信息。
• 向两侧分化的数值（增加·减少），用蓝-白-橙（或红）的发散型色标比红绿型更安全。

文字与对比度

• 正文文字与背景的明度对比，建议按 WCAG 1.4.3 标准达到4.5:1以上。在黑色背景上用红色文字，对第一型者来说对比度会大幅下降。
• 链接不要只改颜色，请保留下划线。

检查顺序

• 1. 用黑白（灰度）看也能区分吗
• 2. 在模拟器中以第一型、第二型100%查看也能区分吗
• 3. 除颜色外，还有形状、标注、图案等线索吗
• 4. 能否不用图例、直接在图表上标注

通过这四项检查，资料不仅对色觉异常者，对在模糊屏幕上、黑白打印件上或明亮户外观看的人来说，也会更易读。

在模拟器中查看 →