色盲模拟器 — 免费在线色觉测试

查看您的颜色对不同类型色盲人群的外观。优化您的设计以实现无障碍性、可用性和包容性。

颜色选择器

选择或输入颜色代码

#2596BE

HSL/HSV 方形选择器

色盲模拟

检查具有不同类型色盲的人如何感知颜色，以创建更具可访问性的设计。了解颜色感知有助于确保您的内容对所有人都可访问。

影响

8%的男性和0.5%的女性有某种形式的色觉缺陷。

类型

红绿色盲最常见，影响红色和绿色的感知方式。

更好的设计

使用对比度和图案与颜色一起传达信息。

原始颜色

这是正常色觉下颜色的外观。

#2596BE

红绿色盲（红色盲）

三种颜色在色轮上均匀分布，每种颜色的色相差120度。最好让一种颜色占主导地位，其他颜色作为强调色。

红色盲

✓82%

1.3%的男性，0.02%的女性

外观

#5657B4

红色弱

✓90% 相似度

1.3%的男性，0.02%的女性

Original

#2596BE

Simulated

#3A70B9

红色弱

✓90% 相似度

1.3%的男性，0.02%的女性

外观

#3A70B9

红绿色盲（绿色盲）

三种颜色在色轮上均匀分布，每种颜色的色相差120度。最好让一种颜色占主导地位，其他颜色作为强调色。

绿色盲

✓80%

1.2%的男性，0.01%的女性

外观

#4F47B2

绿色弱

✓92% 相似度

5%的男性，0.35%的女性

Original

#2596BE

Simulated

#3C79B8

绿色弱

✓92% 相似度

5%的男性，0.35%的女性

外观

#3C79B8

蓝黄色盲（蓝色盲）

三种颜色在色轮上均匀分布，每种颜色的色相差120度。最好让一种颜色占主导地位，其他颜色作为强调色。

蓝色盲

✓93% 相似度

0.008%的男性和女性

外观

#2BADAB

蓝色弱

✓97% 相似度

0.01%的男性和女性

Original

#2596BE

Simulated

#29A1B7

蓝色弱

✓97% 相似度

0.01%的男性和女性

外观

#29A1B7

完全色盲

三种颜色在色轮上均匀分布，每种颜色的色相差120度。最好让一种颜色占主导地位，其他颜色作为强调色。

全色盲

✓75%

0.003%的男性和女性

外观

#797979

色弱

✓86%

0.00001%的男性和女性

Original

#2596BE

Simulated

#538698

色弱

✓86%

0.00001%的男性和女性

外观

#538698

格式转换

颜色变体

配色组合

对比度检查

核心功能

多种色盲模式
模拟真实条件，包括：
红色盲（Protanopia）
绿色盲（Deuteranopia）
蓝色盲（Tritanopia）
红色弱（Protanomaly）
绿色弱（Deuteranomaly）
蓝色弱（Tritanomaly）
全色盲（Achromatopsia）
并排对比
同时查看正常视觉与色盲视觉，快速评估。
真实UI预览
测试颜色在以下元素上的外观：
按钮
文本
卡片
图标
背景
上传您自己的图片
直接使用您自己的图片、图形或品牌视觉测试色盲可见性。
即时且准确的模拟
模拟由准确、基于研究的颜色映射算法提供支持。

如何使用

输入颜色值 — 输入HEX颜色代码或从<a href="https://colorpicker.pinart.ai/zh/color-wheel">色轮</a>中选择。

选择色盲类型 — 一键切换不同的模拟模式。

比较实时结果 — 并排查看正常视图与模拟视图。

调整您的颜色 — 使用洞察改进对比度、饱和度或配色选择。

查找常见问题的答案

色盲模拟器的作用是什么？

它可以预览一种颜色或一个界面在不同色觉条件下的可见效果，例如红色盲、绿色盲和蓝色盲。

为什么产品设计需要色盲模拟？

因为很多状态色、警示色和分类色在不同色觉条件下会变得难以区分，提前检查能减少可用性问题。

我可以测试自己的颜色吗？

可以。您可以从一个自定义颜色开始，查看它在多种模拟模式下的表现差异。

色盲模拟能替代对比度检查吗？

不能。二者解决的问题不同，最好结合对比度检查一起评估可访问性。

这个色盲模拟工具免费吗？

是的。该模拟器可直接在浏览器中使用，无需注册。