跳到主内容
UniKit

色盲模拟器

用 Brettel/Viénot 二色觉矩阵模拟红色盲、绿色盲、蓝色盲看到的颜色,给出原色与模拟色的 hex、相对亮度以及对比度变化,可调严重程度。

浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。

模拟设置

选一个前景色与背景色,再挑色觉类型与严重程度,立刻看到模拟结果。

色觉类型
发生率:约 1% 男性
100%

0% 为正常色觉,100% 为完全色盲;中间值对应色弱。

模拟结果

模拟基于 Brettel / Viénot / Mollon(JOSA A 1997、1999)的二色觉线性 RGB 矩阵近似:sRGB 先去 gamma,乘 3×3 矩阵,再回到 sRGB;三组矩阵每行和为 1,所以灰阶不变。

原配色

前景色(文字 / 图标) #FF0000

4.00:1

模拟后

前景色(文字 / 图标) #5E5E0D

6.81:1

前景色(文字 / 图标) 模拟后#FF0000 → #5E5E0D
背景色 模拟后#FFFFFF → #FFFFFF
原对比度4.00:1
模拟后对比度6.81:1 (对比度变化 +2.81)
相对亮度0.2126 → 0.1041
示例调色板

常见色相在所选类型下的模拟效果,左为原色、右为模拟色。

#E53935 → #636337
#43A047 → #999946
#1E88E5 → #8181E5
#FDD835 → #DDDD36
#8E24AA → #3D3DAA
#00897B → #82827B

这个工具能做什么

  • 做数据可视化时检查配色:把图表里的红绿两条线放进来,看红绿色盲能不能区分(模拟后两色经常几乎一样)。
  • 验证「红色表示错误、绿色表示成功」这类状态色是否安全——红绿是最容易混淆的一对,模拟后往往都变成土黄色。
  • 设计无障碍方案时先看模拟结果,再决定要不要同时加上图标或文字标签作为第二重线索。
  • 把严重程度调到 50% 左右,模拟色弱(anomalous trichromacy)人群看到的效果。

示例

输入

前景色 #FF0000,背景色 #FFFFFF,类型「红色盲(protanopia)」,严重程度 100%

输出

前景色模拟为 #5E5E0D,背景保持 #FFFFFF;对比度从 4.00:1 变为 6.81:1(+2.81),相对亮度 0.2126 → 0.1041。

红色盲下纯红被压成暗黄,亮度明显下降,所以白底上的对比度反而变大;但红色与绿色的区分度会一起丢掉。

常见问题

模拟用的是什么算法?

Brettel、Viénot、Mollon 在 JOSA A(1997 / 1999)提出的二色觉线性 RGB 矩阵近似:sRGB 通道先去 gamma 变成线性值,乘 3×3 矩阵,再编码回 sRGB。三组矩阵每一行都恰好和为 1,所以纯白与灰阶在任何类型下都保持不变。

protan / deutan / tritan 有什么区别?

protanopia 缺少对红光敏感的 L 视锥,红色被压暗;deuteranopia 缺少 M 视锥,红绿混成黄褐;tritanopia 缺少 S 视锥,蓝黄难分且非常罕见(约 0.01%)。前两者在男性中各约 1%,所以红绿配色是最需要警惕的。

严重程度滑块是什么?

0% 表示正常色觉,100% 表示完全二色觉;中间值是在单位矩阵与色盲矩阵之间线性插值,用来近似色弱(anomalous trichromacy)的程度。注意这是近似模型,不代替医学检查。

模拟后的对比度为什么可能变高?

二色觉矩阵会重新分配亮度:纯红在红色盲下变成更暗的 #5E5E0D,白底对比度从 4.00:1 升到 6.81:1;而在绿色盲下变成更亮的 #939300,对比度降到 3.27:1。变高不等于更安全:真正的问题是两个不同颜色会不会变成同一个颜色。

颜色会上传吗?

不会。所有矩阵计算都在浏览器里完成,页面不发任何请求,输入的颜色也不会被保存。

关键词:color blindness simulatorprotanopiadeuteranopiatritanopiacolor vision deficiency色盲模拟色弱模拟红绿色盲色觉障碍对比度变化

同类工具