色盲模拟器

步 1 / 3 模拟类型

约8%的男性和0.5%的女性存在某种形式的色觉缺陷，其中最常见的是红绿色觉缺陷。上传设计稿、截图或插图，选择一个模拟模式，即可并排比较原图和模拟结果。它适合检查图表、地图或界面在不只依赖颜色时是否仍然清晰可读。

模拟器的工作原理

1

插入图片

PNG、JPG、WebP 或 SVG 格式。直接在浏览器中处理，无需上传。
2

选择模拟模式

可选择红色盲、红色弱、绿色盲、绿色弱、蓝黄色盲、蓝黄色弱、全色盲或全色弱等模式。
3

并排预览

浏览器会应用矩阵变换，并将原图与所选模拟效果并排显示。
4

导出模拟图像

将所选模拟结果下载为 PNG，或截取对比画面用于设计评审。

色觉缺陷的类型

类型	患病率	特征
绿色弱（第二色弱）	约5%的男性	红绿色觉异常，M锥细胞反应偏移
红色弱（第一色弱）	约1%的男性	红绿色觉异常，L锥细胞反应偏移
绿色盲（第二色盲）	约1%的男性	M锥细胞缺失，红色和绿色几乎无法区分
红色盲（第一色盲）	约1%的男性	L锥细胞缺失，红色感知发生改变
蓝黄色盲（第三色盲）	极罕见	S锥细胞缺失，蓝黄色轴失去功能
蓝黄色弱（第三色弱）	极罕见	S锥细胞反应偏移，蓝黄色辨别轻微减弱
全色盲	极为罕见	完全色盲，仅能识别灰度

大多数设计人员会先检查绿色盲和红色盲，因为红绿色觉缺陷最常见，然后再加入色弱和蓝黄色轴模式做更完整的检查。

设计意义

不应仅依赖红色/绿色来区分状态。错误/成功标识除颜色外还需具备形状、图标或文字标签。红色叉号与绿色勾号具有明显的视觉差异；而红色圆圈与绿色圆圈则无此差异。
图表：可使用图案填充、直接标签或视觉效果鲜明的色板（如 ColorBrewer、Viridis）；数据可视化时应避免使用交通灯色方案。
地图：使用边界线和阴影填充区分不同区域；仅靠颜色无法实现区分。
超链接：切勿仅使用颜色进行样式设置；下划线或粗细效果能帮助所有人阅读，包括色觉正常的人。
必填字段：以红色星号加“必填”标签或红色边框加“必填”辅助文字标示。
状态指示灯：红、黄、绿三种颜色仅作为辅助标识，绝非唯一信号。

适合色觉安全设计的优质调色板

Viridis（默认用于matplotlib和D3图表）：从紫色渐变至黄色，视觉效果均匀一致。
ColorBrewer定性色卡：包含8种独特色号，专为在常见 CVD 中保持清晰区分而设计。
Okabe-Ito：专为色盲用户设计的8色色卡系列。

工具与测试

模拟器预览（此工具），快速视觉检查。
** WCAG 对比度检测工具**，确保文本在不同颜色环境下均保持清晰可读。
真实用户测试，没有什么比将设计方案展示给真正的色盲用户更能验证其效果了。

有趣的事实

现代色觉模拟器通常用矩阵近似来把视锥细胞响应映射到 RGB。请把预览结果当作实用的设计检查，而不是医学诊断，也不是某个人真实感知的精确复刻。

常见问题

它是有用的近似，但真实色觉因人而异。大多数红绿色觉缺陷都处在从轻度到重度的连续范围内，因此请把预览结果当作设计参考，而不是诊断。

第二色弱（绿色弱）覆盖了色盲用户中最大的群体（约占男性总数的5%）。针对绿色盲（严重类型）进行测试是一种保守的做法，若设计方案在此情况下有效，则对较轻类型的绿色弱同样适用。

是的，但发生率远低（约0.5%）。红绿色觉缺陷为X连锁隐性遗传病，因此男性（XY）仅需一个受累X染色体；女性（XX）则需要两个受累X染色体。蓝黄色盲（tritanopia）为常染色体遗传病，男女发病率相同。

该工具并不直接支持此功能，这属于通用的低视力模拟功能，同时也涉及模糊处理和对比度降低。要实现完整的无障碍模拟效果，则需使用专门工具，例如Chrome浏览器的Lighthouse或NoCoffee插件。

相关工具