什么是色盲模拟器？

色盲模拟器向您展示不同类型色觉障碍人士眼中的图片和配色方案。测试红色盲、绿色盲、蓝色盲和全色盲情况，找出在每种情况下会失效的颜色。

工具基于 Brettel 与 Machado 的色觉缺陷模型,对每个像素应用对应矩阵,近似还原八种常见色觉差异下的画面。「全部对比」模式把所有类型与原图并排显示,审稿 UI 设计或图表时,比一个个切换更省事。

使用方法

1. 上传图片或输入要测试无障碍性的颜色。
2. 选择一种色觉类型,然后拖动分隔线在原图与模拟视图之间淡入淡出。轻度异常时可使用程度滑块调节。
3. 同时比较所有模拟类型，并下载模拟图片用于存档。

何时使用

• 走查仪表盘上的状态标签颜色,在 UX 评审前发现盲区。
• 确认图表里红绿对比的差异还能不能看出来。
• 公共报告挑配色时,确保各种读者都能读懂。

结果

一位UI设计师上传了应用仪表盘的截图，发现红/绿状态指示器在绿色盲模式下无法区分。于是在颜色基础上添加了图标形状来解决这个问题。

常见问题

模拟和真实色觉缺陷者看到的画面差多少?

Brettel 和 Machado 矩阵给出的是可用的近似,不是精确还原。真实感知还受光照和个体差异影响,可以用这里的视图发现明显问题,但不能当作医学级参考。

「protanopia」和「protanomaly」有什么区别?

Protanopia 是红色视锥完全缺失,红色会明显变暗。Protanomaly 是红色感受变弱,画面相似但变化更轻。绿色(deutera)和蓝色(trita)同样有「全色盲」和「色弱」之分。

设计中最常见、要优先照顾的是哪几种色觉缺陷?

绿色弱(deuteranomaly)在男性中约占 5%,是最常见的红绿色觉缺陷。Protanopia 和 deuteranopia 合计约 2%。蓝色缺陷与全色盲都比较少见。做大众产品时,优先照顾绿色弱。

不上传图片也能测试单个颜色吗？

可以。切换到“颜色”标签，输入任意十六进制代码，每个颜色旁边都会显示七种视觉类型各自看到的样子，无需截图即可核对品牌色板或界面色值。对于整张图片，“色彩校正”按钮更进一步，会为图片重新上色，让色觉障碍者也能真正分辨出这些色调。

上传的图片会发送到服务器吗?

不会。图片在浏览器标签页里解码到 canvas,色觉矩阵在本地运算,模拟图直接渲染出来。整个过程不离开页面,关闭标签页所有数据都会被丢弃。

相关工具