跳到主要内容

色盲模拟器

上传图片、截图或用你的调色板测试,立即比较在红色盲、绿色盲、蓝色盲和全色盲下的效果。容易混淆的颜色会自动标出。

或拖放到此处

文件须为 JPEG、PNG、WebP 或 SVG,最大 40 MB

手边没有图片?试试示例:

视觉类型

发现冲突: 绿色盲, 蓝色盲, 全色盲

什么是色盲,为什么在设计中很重要

色盲(或色觉缺陷)会影响分辨某些颜色的能力,通常是红色和绿色,也有影响其他色调的类型。它并不是单一的情况:有多种类型,每种的颜色混淆模式不同,大约每 12 名男性和每 200 名女性中就有 1 人受影响。

这对任何用颜色传达信息的项目都有直接影响:在你看来区分明显的配色,对一部分真实用户来说可能几乎一样。例如,绿色背景上的红色“错误”按钮,对绿色盲人士来说可能根本看不见。

色盲类型详解

红色盲

约 1% 的男性

对红色缺乏或降低敏感度。红色看起来更暗,可能与绿色或棕色混淆。

绿色盲

约 1% 的男性

对绿色缺乏或降低敏感度。这是最常见的类型;红色和绿色难以区分。

蓝色盲

非常罕见

对蓝色缺乏或降低敏感度,比前两种少见得多。影响蓝色与黄色的区分。

全色盲

约 3 万分之一

完全没有色觉,更加罕见。患者以灰度感知世界。

三步使用模拟器

  1. 上传图片或调色板

    拖入图片、用 Ctrl + V 粘贴截图,或使用示例。没有图片时,也可以直接测试调色板中的颜色。

  2. 选择视觉类型

    选择“全部”可同时比较四种类型。选择某一种,可在原图旁边以更大尺寸查看。

  3. 修正冲突

    容易混淆的颜色会标上警告。选中一个,在编辑器中调整,直到警告消失。

如何兼顾色盲人士进行设计

每个示例都展示了错误版本和正确版本在最常见的绿色盲人士眼中的样子(第三个为灰度)。

  • 不要只用颜色传达信息

    绿、琥珀、红三色状态指示会变得几乎一样。请加上图标、文字或不同形状。

  • 避免只用红绿搭配

    比较两组数据时,蓝色和橙色在所有常见色盲类型下都能区分。

  • 同时用亮度区分

    如果两种颜色亮度相同,在灰度下就一样。请把深色和浅色搭配使用。

  • 给图表添加标签或纹理

    直接标注或加上斜线纹理,即使颜色相近也能读懂图表。

常见问题

这是一种难以分辨某些颜色的情况。主要类型有红色盲、绿色盲、蓝色盲和全色盲,每种的颜色混淆模式不同。

两者都影响红绿区分,但原因不同:红色盲降低对红色的敏感度,绿色盲降低对绿色的敏感度。视觉效果相似,但并不相同。

大约每 12 名男性和每 200 名女性中有 1 人,是需要考虑的最常见的视觉无障碍问题之一。

红色盲和绿色盲最常混淆的是红与绿、绿与棕、蓝与紫,以及橙与浅绿。蓝色盲主要混淆蓝与绿、黄与浅粉。

使用在亮度上也能区分的颜色搭配,例如用蓝和橙代替红和绿,并且不要只依赖颜色:加上标签、图标或纹理。然后把截图上传到模拟器检查。

这是近似模拟:对每个像素应用常用的模拟矩阵。它有助于发现有问题的配色,但每个人感知颜色的方式略有不同,尤其是轻度类型(色弱)。

不会。分析和模拟都在你自己的浏览器中处理,你的图片不会发送到或存储在任何外部服务器上。

对比度检查器检查两种具体颜色之间的可读对比度。这个模拟器让你看到整张图片或设计在色盲人士眼中的样子,发现超出单一颜色组合的理解问题。

你可以上传 JPG、PNG 或 WebP 文件,拖入工具,或用 Ctrl + V(Mac 上为 Cmd + V)直接粘贴截图。

更多工具