色盲模拟器
查看任意图片在红色盲、绿色盲、蓝色盲或全色盲人群眼中的样子——与原图并排对比，严重程度可调节。
色盲模拟器基于canvas完全在你的浏览器中运行。你的图片在你的设备上处理，绝不会上传。
由 Udit Agarwal 开发和维护
打开对比度检查工具
关于 色盲模拟器
色盲模拟器能让你透过大约8%男性和0.5%女性所拥有的色觉障碍视角，来查看你的图表、界面或照片。拖入一张图片，选择色觉类型——常见的红绿类型是绿色盲和红色盲；罕见的蓝黄类型是蓝色盲；或者完全没有颜色的全色盲——然后把结果与原图并排对比。这个模拟使用了具有生理学依据的Machado变换矩阵，在正确处理伽马校正的线性光空间中进行应用。严重程度滑块覆盖了远比完全色盲更常见的部分色觉障碍。如果你的错误状态和成功状态只靠红色和绿色来区分，那么在这里花三十秒，就能准确看到色觉障碍用户看不到什么。
功能特性
- 支持红色盲、绿色盲、蓝色盲和全色盲
- 在线性光空间中应用基于生理学的模拟矩阵
- 严重程度滑块，从轻度异常到完全二色视觉
- 原图与模拟效果并排对比展示
- 标注每种色觉类型的发生率
- 可下载模拟后的图片用于评审
如何使用 色盲模拟器
- 拖入截图、图表或设计稿
- 选择要模拟的色觉类型
- 为部分色觉障碍调节严重程度
- 对比两个面板，需要时下载结果
示例
输入
Dashboard with red error and green success badges
输出
Under deuteranopia both badges render as the same murky ochre
经典的红绿混淆问题——不用正确的眼睛去看，根本发现不了。
常见错误与故障排除
- 模拟后的图片看起来几乎没有变化。 — 以蓝色、黄色和中性色为主的图片，在红绿色觉障碍下表现良好——这是通过测试，而不是出了故障。请试试那些依赖红绿色区分含义的界面。
- 在全色盲模式下所有东西都变成了灰色——是不是太极端了？ — 完全性全色盲确实会去除所有色相，而且这种情况极其罕见。可以把它当作终极对比度测试：能在灰度下过关的内容，在任何情况下都能过关。
- 结果和其他模拟器有轻微差异。 — 有些工具没有经过伽马校正就直接应用矩阵。这个工具会先进行线性化处理——这是已发表的研究方法；差异主要体现在暗部区域。
常见问题
- 色觉障碍的不同类型分别是什么意思？
- 红色盲缺少红色视锥细胞，绿色盲缺少绿色视锥细胞——两者都会把红色和绿色混在一起，各自影响大约1%的男性，而轻度的异常色觉类型则要常见得多。蓝色盲影响的是蓝黄轴，比较罕见；全色盲则完全去除颜色感知。
- 色觉障碍有多常见？
- 大约8%的男性和0.5%的女性存在某种红绿色觉障碍——相当于你所构建的任何产品中，每十二位男性用户就有一位受到影响。
- 这个模拟的准确度如何？
- 它使用的是视觉研究领域的Machado、Oliveira和Fernandes矩阵，在经过正确伽马转换的线性RGB空间中应用——这是二色视觉预览的标准方法。
- 如何让我的设计对色觉障碍用户更友好？
- 永远不要让颜色成为唯一的信息载体：搭配图标、文字标签或图案。文字对比度应保持在4.5:1以上，图表中优先选择蓝橙配色，而不是红绿配色。
相关工具
- 图片配色提取器 — 从图片提取主色与配色，导出 HEX、RGB、HSL、CSS 与 Tailwind。
- 颜色格式转换器 — 把任意 CSS 颜色转换为 HEX、RGB、OKLCH 等
- 图片取色器 — 在浏览器中从图片取任意像素的 HEX、RGB 和 HSL 颜色值。
- 对比度检查工具 — 检查两种颜色之间的 WCAG 对比度以及是否通过 AA/AAA。
- 图片打码 — 把截图局部永久模糊、马赛克或涂黑。
- 图片圆角工具 — 裁成圆角矩形或圆形，导出透明PNG。
更多图片工具
查看全部图片工具 (40) · 全部工具