色盲模拟器,粘贴 hex 或上传图,看红色盲/绿色盲/蓝色盲/全色盲眼里是什么样。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
无障碍配色建议
- 不要只靠色相传达信息 —— 配上图标、文字或位置 (WCAG 1.4.1)。
- 相邻类别拉开明度差,不只拉色相差。明度对比在 8 种异常里都站得住。
- 避开经典混淆色:红↔绿 (红绿型)、蓝↔黄 (蓝色盲)、紫↔蓝 (蓝色盲)。
这个工具能做什么
免费在线色盲模拟器。粘贴一个 HEX 颜色、一组 HEX 配色 (每行一个), 或者直接拖一张图片进来,一次看完 8 种色觉异常的对照视图:红色盲 (protanopia,L 视锥缺失,男性约 1%)、绿色盲 (deuteranopia,M 视锥 缺失,约 1%)、蓝色盲 (tritanopia,S 视锥缺失,约 0.01%)、三种较轻的 色弱型 (红弱 / 绿弱 / 蓝弱),以及全色盲 (achromatopsia) 与部分全色盲 (achromatomaly)。算法是 Brettel-Vienot-Mollon 1997/1999 的 LMS 投影模型,Sim Daltonism、Color Oracle、ColorBrewer 用的就是它。 整套流程纯浏览器跑,图片逐像素在 `<canvas>` 上变换,不上传、 不登录、不打点。适合设计师按 WCAG 1.4.1 验证品牌配色 (不能只靠 颜色传达信息)、前端检查数据可视化图表、无障碍顾问出审计前后对比图。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 下载 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 25 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
色盲模拟器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
产品上线前验证 6 色仪表盘配色
数据看板下周上线,6 条折线分别是红、橙、绿、青、蓝、紫。把 6 个 hex 全粘进多色模式,在绿色盲面板里红线和绿线塌成同一坨暗黄, 绿色盲的产品经理根本分不出收入和流失。你把绿换成更深的青,留出 明显明度差,再把 8 块面板挨个核一遍,直接发一套八种异常都扛得住 的配色,不用靠猜。
给无障碍审计报告做前后对比证据
WCAG 1.4.1 审计要的是有据可查,不是打个勾。把客户定价页截图拖进 图片模式,截下红色盲和全色盲两块面板,在报告里并排贴出来。那个只 靠绿色描边的"推荐"标记,在每 12 个男性就有 1 个的眼里直接糊进 背景,这就是一条带图的硬结论,客户没法反驳。
单个品牌色对红绿色觉的快速核验
市场部选了 #E63946 当新的错误态红色,要你签字。粘这一个 hex, 横向看红弱和绿弱两块面板,它偏向了棕色但跟你的成功态绿 #2A9D8F 仍能分开。这就确认了这对颜色对约 6% 有红绿色觉异常的男性是站得 住的,你附上模拟截图签字,不靠感觉拍板。
给设计团队讲清楚为什么不能只靠色相
新人老爱用红绿小圆点标状态。10 分钟的小课上,你把这两个圆点色一 粘,切到绿色盲面板,当着全组的面两个都变成几乎一样的浅棕。这比 任何幻灯片都来得快:你当场给两个状态加上对勾和叉的图标,重跑面板, 不管对方色觉如何两个状态都还认得出。
常见踩坑
只看红色盲和绿色盲两块面板,跳过蓝色盲和全色盲。一个蓝↔黄的图表能过红绿检查,却可能坑了蓝色盲,纯靠色相的图例在全色盲下直接报废。8 块面板每块都要扫。
拿一个 200px 的大色块测完就当安全了。大色块里分得开的颜色,放进 12px 图例或 1px 细边框里可能就糊了。要按颜色在 UI 里实际出现的尺寸重新核一遍。
把二色觉面板当成"他们真就这么看"。它显示的是颜色表象,不是混淆线,所以两个颜色在这看着不一样仍可能难分。每个颜色都配上图标、文字或明度差,别只信面板。
隐私说明
所有运算都在你的浏览器里跑。hex 和图片像素读进 `<canvas>`,用同一套 LMS 投影矩阵变换后在本地画回来。不上传、不注册、没有分析打点带走数据, 也不写进 URL,所以粘的颜色或拖进来的截图既不会离开你的机器,也不会 出现在可分享链接里。打开 DevTools 的网络面板,粘色或拖图时你会看到 零请求发出,拿来处理还没上线的品牌资产和签了 NDA 的客户稿很放心。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。