Color Blindness Simulator

关于本工具

色盲模拟器将CSS颜色矩阵滤镜应用于示例颜色，让您看到不同色觉障碍的人如何看到您的设计。

在设计依赖颜色传达信息的UI组件、图表、地图等视觉内容时使用此工具。

色盲类型

• 正常视觉: 正常视觉：完整色觉
• 红色盲（第一色盲）: 红色盲：缺乏红色感光细胞（约1%男性）
• 绿色盲（第二色盲）: 绿色盲：缺乏绿色感光细胞（最常见，约1%男性）
• 蓝色盲（第三色盲）: 蓝色盲：缺乏蓝色感光细胞（罕见，约0.003%）
• 全色盲（无色觉）: 全色盲：无色觉，只能看到灰度（极罕见）
• 色弱（色觉减退）: 色弱：多种锥细胞类型的色彩敏感度降低

使用方法

1. 从下拉菜单选择模拟类型。
2. 观察选定滤镜下颜色样本和光谱如何变化。
3. 与正常视觉对比，找出有问题的颜色组合。

使用场景

UI/UX设计师检查按钮状态和状态指示器是否仍可区分。数据可视化创作者确保图表颜色具有可访问性。游戏开发者验证UI元素不仅依赖颜色。

常见问题

• 这些模拟有多准确？ — 使用已建立的颜色矩阵变换，是很好的近似值。可能无法完美复制个人感知，但给设计师提供可靠的问题指示。
• 有多少人患有色盲？ — 约8%的男性和0.5%的女性有某种形式的色觉缺陷。绿色弱（绿色敏感度降低）是最常见类型。
• 针对色盲的最佳设计方式是什么？ — 将颜色与形状、图案、标签或纹理等视觉线索结合使用。确保元素间足够的对比度，并用多种模拟类型测试。