ZeroTool Workbench

色盲模拟器

模拟 8 种色觉障碍类型对颜色和图片的影响,包括红色盲、绿色盲、蓝色盲等。并排对比,纯浏览器端运行,无需上传。

100% 浏览器端运行 数据不离开你的设备 免费 · 无需注册
原色
红色盲 缺少红锥细胞
绿色盲 缺少绿锥细胞
蓝色盲 缺少蓝锥细胞
红色弱 红锥细胞异常
绿色弱 绿锥细胞异常
蓝色弱 蓝锥细胞异常
全色盲 无色彩视觉
全色弱 色彩视觉减弱

使用方法

  1. 颜色模式下,输入 HEX 颜色值或使用取色器。工具会即时展示该颜色在 8 种色觉障碍下的外观。
  2. 图片模式下,拖放图片或点击选择文件。工具在本地处理后显示 9 张并排预览——原图加 8 种模拟效果。
  3. 颜色模式下,点击任意 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 有助于确保设计对所有用户都可用。

全色盲和色弱有什么区别?

全色盲(二色视觉)指缺少一种锥细胞,完全无法感知对应颜色通道。色弱(异常三色视觉)指锥细胞存在但灵敏度偏移,色彩感知减弱但未完全丧失。