色盲模拟器

输入一个颜色或上传一张图片,按红色盲 / 绿色盲 / 蓝色盲 / 全色盲的标准色彩矩阵逐像素换算,直接看到色觉障碍者眼中的效果,并给出红绿混淆警告与蓝橙替代配色建议。全部在浏览器本地计算,图片不上传服务器。

1输入

选择一种模式:模拟单个 UI 颜色,或整张设计稿 / 图表截图。

2模拟结果

四种色觉障碍视角的换算结果,点击色值即可复制。

上传图片后,这里会显示四张模拟图。

8 组常见配色场景 × 色觉强度对照

选一组真实项目配色,用强度滑块从 0%(正常视觉)过渡到 100%(完全二色觉)。下方 SVG 对照条逐色列出原色与红/绿/蓝三种模拟;模拟后距离过近的颜色会被标红,提示改用第二通道编码。

载入配色后显示对照条

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入,也能生成可分享链接;结果里的数值列会自动画成对比图,并支持导出 CSV / JSON。

最近方案 暂无

🌈口径说明与常见误填

把模拟口径说清楚,配色结论才站得住。

模拟矩阵
按学界常用的 RGB 线性变换矩阵换算二色觉视角,与 Ischemia、Color Oracle 同源;红色盲(protanopia)、绿色盲(deuteranopia)、蓝色盲(tritanopia)各用一套矩阵。
全色盲档
第四档按明度灰阶换算(接近 achromatopsia),用于检查完全去掉色相后信息是否仍可辨,是 WCAG 用色最严的验收口径。
混淆警告
单色模式下自动计算原色与模拟色的色相偏移与感知距离,红绿互混时给出警告——颜色本身没问题,组合才可能出问题。
替代建议
警告触发时按蓝橙组合(如 #0072B2 配 #E69F00)思路给出可替换色值,蓝黄、青紫在色盲视角下同样保持可辨。
图片模式
整张设计稿逐像素换算后输出四宫格对比图;图片仅在本地 Canvas 处理不上传,GIF 取首帧参与换算。

这个工具解决什么问题

全球约 3 亿色觉障碍用户,男性红绿色盲比例高达 5%~8%,而 UI 里的成功绿、失败红对他们可能完全同色。本工具把任意颜色或整张图片按红色盲 / 绿色盲 / 蓝色盲 / 全色盲四套标准矩阵逐像素换算,直接看到色觉障碍者眼中的效果,并自动给出红绿混淆警告与蓝橙替代配色;单色可复制色值,图片可下载四宫格对比图,全程浏览器本地计算不上传。

三条配色验收铁律

① 别只测单色,要测组合:两个颜色各自好看、放在一起却互相混淆才是事故高发区,重点检查同屏出现、承担同一语义的颜色对。

② 颜色必须配第二通道:状态标签除了颜色再加图标或文字,报错别只把边框标红;WCAG 要求信息不能只靠颜色传达。

③ 色相数量控制在 5 个内:图表里色相越多,总有一对落在同一混淆带;超过 5 个系列时改用不同线型、标记或直接标注。

怎么用

  1. 第 1 步 · 选模式输入颜色
    默认「单色模式」:在 HEX 框输入色值、用取色器选色,或点常用 UI 色快捷块直接试。
  2. 第 2 步 · 或切图片模式上传设计稿
    点「图片模式」后选择或拖入 PNG / JPG / WebP 设计稿截图,工具逐像素换算四种色觉视角。
  3. 第 3 步 · 读模拟结果与警告
    右侧四宫格显示红色盲、绿色盲、蓝色盲、全色盲视角效果;出现红绿混淆警告时参考给出的蓝橙替代色,点色值即复制。
  4. 第 4 步 · 复制色值或下载对比图
    单色模式点「复制全部色值」带走原色与四组模拟色;图片模式点「下载四宫格对比图」存档给团队评审。

更新记录

  • v1.0 2026-11-02 v1.0 上线:红/绿/蓝/全色盲四套标准矩阵模拟、单色与整图双模式、红绿混淆自动警告与蓝橙替代建议、色值一键复制、四宫格对比图下载,图片全程本地处理。

常见问题

红绿色盲看颜色是什么样?
红色盲(protanopia)与绿色盲(deuteranopia)最难区分红、橙、黄、绿这一色带:鲜红常变暗褐,绿色与土黄几乎同色。本工具用经典矩阵把任意颜色换算成他们眼中的样子,绿色盲约占男性 5%,比红色盲更常见。
在线色盲模拟工具准吗?
本页采用学界常用的 RGB 线性变换矩阵模拟 dichromacy(二色觉),与 Ischemia、Color Oracle 等主流插件同源,适合设计与自查;但色觉障碍程度因人而异,医学诊断请以 Ishihara 比色图等正规检查为准。
UI 设计要考虑色盲吗?
需要。全球约 3 亿色觉障碍用户,其中红绿色盲占绝大多数。WCAG 也要求信息不能只靠颜色传达。做法是:状态标签除了颜色再加图标或文字,表单报错不要只把边框标红,关键数据用双通道编码。
图表配色怎么避免红绿对比?
把红绿组合换成蓝橙组合(如 #0072B2 配 #E69F00)最安全,蓝黄、青紫对比也在色盲视角下保持可辨;本工具的替代建议按钮就是按这个思路生成的。同一组数据尽量控制色相数量在 5 个以内。
色盲测试可以在线自测吗?
在线自测只能参考:可以反向使用本工具——上传自己的作品,看红绿色盲视角下哪些信息糊成一团。若怀疑色觉异常,请做 Ishihara 石原氏比色卡或在线 Farnsworth-Merre 色相排列测试,本工具不输出任何个人信息,图片也不离开发送端。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言,来抢沙发吧!

✍️ 说点什么
0 / 500
图形验证码
👣 做完这一步,顺便看看
📱 手机样机 Mockup 生成器 上传应用截图即可套入 iPhone、Android 或经典款… → 📐 8pt 栅格间距计算器 按 8pt 或 4pt 基准栅格计算界面间距:输入尺寸自动吸… → 🔤 模块化字阶生成器 以基准字号与比率生成模块化字阶:内置黄金比、大三度等八种经典… → 🎨 色阶与深色模式映射器 输入主色 HEX 自动校验并派生 50 到 900 十档色阶… →
全部工具 →