私有的浏览器内图像工具

色盲模拟器

探索图像在四种色觉近似下的颜色呈现方式。这是设计预览,不用于诊断,也不完全代表任何人的视觉。

您的图像将保存在此设备上

解码、模拟、比较及 PNG 导出均在您的浏览器中进行。图像不会被上传、存储,或计入分析。

尝试模拟器

选择一个 PNG、JPEG 或 WebP 图像,粘贴图像,或使用我们的示例图像开始。

您的图像将保存在此设备上

PNG、JPEG 或 WebP · 最大 20 MiB · 最大 16.8 MP · 每边最多 8192 px

您也可以从剪贴板粘贴一张图像。

什么是色盲模拟器?

色盲模拟器会根据常见色觉差异模型转换图像,帮助设计师对比同一个界面、图表、地图、插图或照片中颜色关系可能发生的变化,而不会修改源文件。

本页是面向设计的教育辅助工具。它只预览图像像素,不检测你的视力、不识别个人色觉类型,也无法精确再现他人的视觉。

想检查自己的红绿色识别能力?请使用简短的非诊断性筛查测试。

进行色盲筛查测试

什么时候适合使用这个模拟器?

在设计早期和发布前都可以使用此预览,尤其适合检查用颜色表达状态、类别、方向或重点的内容。

01

界面与产品状态

对比错误、成功、警告、禁用、选中和焦点状态,检查色调变得接近时含义是否仍然清楚。

02

图表与数据可视化

检查图表系列、图例、热力图和小型标记,找出容易混在一起或难以追踪的颜色。

03

地图与示意图

检查路线、区域、标签和注释,避免仅靠颜色区分而隐藏重要信息。

04

品牌与宣传素材

预览标志、行动按钮、社交图片和宣传素材,同时关注对比度与非颜色线索。

如何使用模拟器

  1. 1选择、拖放或粘贴一张支持的图片,或加载附带的示例。
  2. 2选择 Protan、Deutan、Tritan,或固定的全色盲近似。
  3. 3对于 Protan、Deutan 或 Tritan,可将示意强度从 0% 调整到 100%。
  4. 4比较原始图像和模拟视图,如果有用,可以下载无元数据的 PNG。

模拟类型

这里的 Protan、Deutan 与 Tritan 是模型类别的总称,不是对个人的诊断。请选择与你想检查的颜色关系相符的模式。

Protan(红锥型)

Protan 是 protanopia(红色盲)与 protanomaly(红色弱)的总称,涉及 L 锥体(L-cone,长波)范围。本模式使用 Machado 模型近似相关色觉差异。

Deutan(绿锥型)

Deutan 是 deuteranopia(绿色盲)与 deuteranomaly(绿色弱)的总称,涉及 M 锥体(M-cone,中波)范围。本模式使用 Machado 模型近似相关色觉差异。

Tritan(蓝锥型)

Tritan 是 tritanopia(蓝黄色盲)与 tritanomaly(蓝黄色弱)的总称,涉及 S 锥体(S-cone,短波)范围。这是蓝锥体差异近似,模型证据与个体体验均有限。

Achromatopsia(全色盲近似)

使用固定、保留相对亮度的灰阶示意。它不模拟畏光、视力下降、眼球震颤或其他真实病症表现。

静态对照示例

原始: 色盲模拟器

原始

Protan(红锥型): 模拟 100%

Protan(红锥型)

Deutan(绿锥型): 模拟 100%

Deutan(绿锥型)

Tritan(蓝锥型): 模拟 100%

Tritan(蓝锥型)

同一张内置示例图的原图,以及在 100% 示意强度下的 Protan、Deutan 与 Tritan 近似效果。

各面板使用固定设置以便比较,并不精确代表任何个人的视觉。

如何解读模拟预览

请寻找丢失的视觉区分,而不是把结果当成一次通过或失败。应在用户实际看到的尺寸下,将每个模拟视图与原图对比。

1

寻找合并的颜色

留意相邻控件、图表系列、路线或状态颜色何时变得难以区分。

2

检查小型和低对比细节

检查细线、小字、图标、边框和弱化状态;大图中可见的差异在实际尺寸下可能消失。

3

把观察转化为设计调整

增加标签、图标、图案、形状或更强对比度,然后再次预览,并结合更全面的无障碍检查与用户研究。

方法

Protan、Deutan 与 Tritan 使用 Machado、Oliveira 和 Fernandes 于 2009 年发表的预计算矩阵。示意强度会在相邻模型样本间插值,颜色在线性光 RGB 中转换并保留 alpha。Achromatopsia 使用固定的相对亮度灰阶示意。

重要限制

模拟无法精确再现某个特定个体所见。个人视觉、显示器校准、色彩配置、环境光、图像压缩和模型范围都会影响结果。Achromatopsia 灰阶视图也不模拟畏光、视力下降、眼球震颤或其他真实表现。本工具不诊断或分类个人,也不进行颜色矫正。

色彩无障碍设计清单

把模拟作为观察步骤之一,然后用以下实用检查继续验证设计。

  • 不要把颜色作为传达含义或操作的唯一方式。
  • 为状态和类别颜色搭配文字、图标、形状、图案或边框。
  • 在预期显示尺寸下分别检查文字与非文字对比度。
  • 检查细线、小标签、禁用状态、焦点状态和图表系列。
  • 测试多种模拟模式,不要假设一次预览能覆盖所有色觉差异。
  • 把自动与人工无障碍检查和色觉差异用户研究结合起来。

常见问题

方法和无障碍资源

模拟方法依据 Machado、Oliveira 和 Fernandes(2009)。健康来源用于说明色觉差异与 Achromatopsia,WCAG 来源支持设计建议。这些机构没有审核或认可本站。

仅为教育设计近似。不是医疗测试、诊断、认证,也不是对个人视力的精确表示。