色盲模拟器
用 Brettel/Viénot 二色觉矩阵模拟红色盲、绿色盲、蓝色盲看到的颜色,给出原色与模拟色的 hex、相对亮度以及对比度变化,可调严重程度。
浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。
模拟设置
选一个前景色与背景色,再挑色觉类型与严重程度,立刻看到模拟结果。
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 → #FFFFFF4.00:16.81:1 (对比度变化 +2.81)0.2126 → 0.1041常见色相在所选类型下的模拟效果,左为原色、右为模拟色。
这个工具能做什么
- 做数据可视化时检查配色:把图表里的红绿两条线放进来,看红绿色盲能不能区分(模拟后两色经常几乎一样)。
- 验证「红色表示错误、绿色表示成功」这类状态色是否安全——红绿是最容易混淆的一对,模拟后往往都变成土黄色。
- 设计无障碍方案时先看模拟结果,再决定要不要同时加上图标或文字标签作为第二重线索。
- 把严重程度调到 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色盲模拟色弱模拟红绿色盲色觉障碍对比度变化