全球约有 3 亿人存在某种形式的色觉障碍（CVD）。如果你的 UI 仅靠颜色来传达错误提示、区分图表数据系列或标记必填字段，相当一部分用户可能无法获取这些信息。

色盲究竟是怎么回事

人类的色觉依赖视网膜上的三种锥细胞——L 锥细胞（对红色波长敏感）、M 锥细胞（绿色）和 S 锥细胞（蓝色）。当某一类锥细胞缺失（二色视觉）或灵敏度发生偏移（异常三色视觉）时，就会出现色觉障碍。

对设计的实际影响：

  • 绿色弱（deuteranomaly） 是最常见的类型，约影响 5–6% 的男性。绿色和红色变得难以区分——想想交通灯、成功/错误状态提示或图表图例。
  • 红色盲和红色弱（protanopia / protanomaly） 影响红色感知。红色看起来更暗更灰，偏向棕色。
  • 蓝色盲（tritanopia） 虽然罕见，但会影响蓝黄色的分辨。黄底蓝字链接可能直接”消失”。
  • 全色盲（achromatopsia） ——完全丧失色彩视觉——极为罕见，但如果你的 UI 纯粹通过色相传达语义，仍值得测试。

模拟器的工作原理

色盲模拟器对输入应用 3×3 色彩变换矩阵。这些矩阵基于 Viénot（1999）和 Brettel（1997）的研究，通过重新映射 RGB 通道来近似每种色觉障碍类型的视觉感知。

颜色模式下，输入任意 hex 值即可在对比网格中看到 8 种色觉障碍类型的效果。图片模式下，拖入截图或设计稿——工具通过 Canvas API 在浏览器端完成处理，显示 9 张并排预览。

图片数据不会离开你的设备。无需注册、无需上传、无服务器处理。

实用测试流程

将色觉障碍测试融入设计流程的方法：

  1. 选出关键颜色。 在颜色模式中测试你的错误提示红、成功绿、主操作色以及数据可视化配色。如果两个颜色在绿色盲（deuteranopia）模拟下映射到相同的 hex 值，它们对绿色觉异常类 CVD 用户（约占男性的 6%）来说就是无法区分的。

  2. 截图你的 UI。 切换到图片模式，拖入仪表盘、表单验证状态或图表的截图。优先检查绿色觉异常和红色觉异常类型——红绿类 CVD 占全部病例的 95% 以上。

  3. 用冗余来修复。 不要去掉颜色，而是增加第二信道。在彩色状态徽标旁加上图标，在图表扇区上加图案或标签，给链接加下划线。目标是确保颜色不是传达信息的唯一手段。

  4. 验证对比度。 将本工具与颜色对比度检测器配合使用，确认调整后的颜色仍然满足 WCAG AA 阈值（正文 4.5:1，大号文字和 UI 组件 3:1）。

WCAG 要求

WCAG 2.1 成功标准 1.4.1（“颜色的使用”）规定：

颜色不能作为传达信息、指示操作、提示响应或区分视觉元素的唯一视觉手段。

这适用于表单验证、正文中的链接、图表数据、状态指示器和交互控件。模拟器帮你系统性地审计这些场景，而不是凭直觉判断。

不只是红和绿

大多数无障碍测试止步于”不要同时使用红色和绿色”。这确实覆盖了多数场景，但会遗漏更微妙的问题：

  • 橙色和黄绿色在绿色盲下可能合并——这在警告系统中是常见配色。
  • 蓝色和紫色在蓝色弱下可能变得无法区分。
  • 深色背景上的高饱和颜色比浅色背景上的柔和色调更容易丧失区分度。

使用网格视图测试全部 8 种类型只需几秒钟，能捕获红绿启发式方法遗漏的边缘情况。

立即试用

打开色盲模拟器，测试当前项目的配色方案。从错误状态色开始——如果它在绿色盲模拟下与默认文本色融合，那就是你的第一个修复点。