ZeroTool Workbench
色盲模拟器
模拟 8 种色觉障碍类型对颜色和图片的影响,包括红色盲、绿色盲、蓝色盲等。并排对比,纯浏览器端运行,无需上传。
使用方法
- 在颜色模式下,输入 HEX 颜色值或使用取色器。工具会即时展示该颜色在 8 种色觉障碍下的外观。
- 在图片模式下,拖放图片或点击选择文件。工具在本地处理后显示 9 张并排预览——原图加 8 种模拟效果。
- 颜色模式下,点击任意 HEX 值即可复制到剪贴板。
色觉障碍简介
色觉障碍(CVD)影响眼睛锥细胞对光的反应。人类色觉依赖三种锥细胞:L 型(红色)、M 型(绿色)和 S 型(蓝色)。当某一类型缺失或功能异常时,特定颜色会变得难以区分。
- 红色盲 / 红色弱——影响 L 锥细胞(红色感知)。红色变暗,偏向棕色或绿色。约 2% 的男性受影响。
- 绿色盲 / 绿色弱——影响 M 锥细胞(绿色感知)。最常见类型,约 6% 的男性受影响。绿色和红色看起来相似。
- 蓝色盲 / 蓝色弱——影响 S 锥细胞(蓝色感知)。罕见,影响不到 0.01% 的人群。蓝色和绿色容易混淆。
- 全色盲 / 全色弱——影响所有锥细胞类型。完全性全色盲呈灰度视觉;全色弱显著降低色彩饱和度。
无障碍设计建议
将此工具与颜色对比度检测器配合使用,进行完整的无障碍审查。传达信息时不要仅依赖颜色,应同时使用形状、图案或文字标签。至少通过红色盲和绿色盲模拟测试关键 UI 元素(错误状态、图表、状态指示器),因为这两种类型覆盖了大多数受影响用户。
隐私
所有模拟均在浏览器端运行。颜色数据和图片不会发送到任何服务器。
FAQ
这个工具支持哪些色盲类型?
支持 8 种:红色盲(protanopia)、绿色盲(deuteranopia)、蓝色盲(tritanopia)、红色弱(protanomaly)、绿色弱(deuteranomaly)、蓝色弱(tritanomaly)、全色盲(achromatopsia)和全色弱(achromatomaly),涵盖所有主要色觉障碍类型。
模拟结果有多准确?
使用 Viénot(1999)和 Brettel(1997)色彩变换矩阵,与浏览器 DevTools 和无障碍测试工具所用算法一致。色弱类型使用 60% 严重度插值。结果是高度近似——个体感知会有差异。
图片会被上传吗?
不会。所有处理都在浏览器端通过 Canvas API 完成,图片不会离开你的设备。
为什么要检查设计的色盲可访问性?
约 8% 的男性和 0.5% 的女性有某种形式的色觉障碍。WCAG 2.1 成功标准 1.4.1 要求不能仅用颜色来传达信息。使用模拟器测试 UI 有助于确保设计对所有用户都可用。
全色盲和色弱有什么区别?
全色盲(二色视觉)指缺少一种锥细胞,完全无法感知对应颜色通道。色弱(异常三色视觉)指锥细胞存在但灵敏度偏移,色彩感知减弱但未完全丧失。