颜色与可访问性

色盲模拟器对照图片与单色的可辨识度

先用 HEX 颜色检查色块,再用自己的截图或图表并排核对原图与模拟图。

色盲模拟器

原始颜色

#FF5733

模拟颜色

#B19F2B

颜色与图片仅在本机浏览器处理,不会自动上传文件。

选项

颜色 / 图片

绿色轴差异;红绿区分可能减弱。

采用 Machado 2009 矩阵与线性 sRGB;强度是模型混合比例,不代表个人病情。

当前结果已生成。

状态图里的红色与绿色在常规屏幕上差异明显,换成另一种色觉条件后却可能难以区分。色盲模拟器把原图留在一侧,让你对着实际界面判断哪些信息只靠颜色传达。

如果只需试品牌色,先用色觉模拟器的单色入口;要检查完整图表,再切到图片入口。这里的图片色盲模拟保留原尺寸,不把缩略预览当作最终导出。

为什么用色盲模拟器检查设计

把颜色相近造成的信息丢失放到原图旁边看。

同屏核对红绿标记

红绿色盲模拟可能让两种状态色靠得很近。这个色盲模拟器并排展示原图和当前类型的结果,方便你判断图例、按钮状态或警示符号是否还可分辨。

四色状态图与绿色盲模拟图并排,模拟图中的红绿标记更接近。

从颜色值追到真实截图

先用 HEX 色块看强度变化,再把实际截图放进图片模式。0% 返回原色,100% 为完整模型;中间值只表示混合比例,不能代表某个人的色弱程度。

同一 HEX 色块的原色、零强度和完整强度模拟结果并排。

三处最容易误解的操作

01

选择真正承载信息的输入

颜色模式适合设计变量;图片模式适合图表、地图和表单截图。可选择、拖入或粘贴 PNG、JPEG、WebP,超过 10 MB 或 1200 万像素时会明确拒绝,不会悄悄缩小。

02

切换类型后等待最新预览

默认是绿色盲、100% 强度;更改类型或强度后约 350 毫秒自动更新。关闭自动预览才出现模拟按钮,也可以按 Ctrl/Cmd+Enter。

03

按结果状态导出

改动输入后,旧结果会立刻变淡,复制和下载都不能使用;看到“当前结果已生成”后再导出。这样不会把上一种类型的 PNG 当成新结果。

从色块到图片的检查能力

四种色觉条件

红色盲、绿色盲、蓝黄色盲使用 Machado 2009 色彩矩阵;全色盲用线性亮度生成灰阶。色弱模拟的强度滑杆只是视觉近似参数,不是临床分级。

图片保留原始像素尺寸

导出的 PNG 按输入图片的宽高逐像素生成,并保留透明度。预览只是页面上的缩放展示,不会改变下载图的尺寸。

结果导出与输入类型对应

单色结果可复制规范化 HEX;图片结果可下载当前模式的 PNG。红绿色盲模拟只改变输出,不回写你输入的原色或原图。

模型能说明什么,不能说明什么

不能用来诊断
模拟结果无法判断使用者是否色盲,也不能测出病型或严重程度。强度百分比是数学混合值,不是医学量表。
不能代替无障碍合规检查
色盲模拟器只提示颜色区分可能丢失,不计算文字对比度,也不判断图标、标签或交互是否符合 WCAG。请另做对比度检查。
仅处理本地静态位图
只接受 PNG、JPEG、WebP,限制为 10 MB、1200 万像素;不抓网页、远程图片或摄像头,不解析 GIF 动画与 SVG。
显示设备和色域会影响观感
模型处理解码后的 sRGB 值。HDR、广色域素材及屏幕校准差异可能改变结果,因此预览只适合定位设计风险。

色盲模拟器常见问题

最常见的色盲类型有哪些?

红绿色盲中的红色盲与绿色盲较常见;蓝黄色盲和全色盲较少见。色盲模拟器提供这四种预览,但它不统计个人患病概率。

这是医学色觉测试吗?

不是。它只把现有图片或颜色套用研究模型,帮助设计者检查色彩信息是否丢失;要判断个人色觉,请使用正规的临床检查。

为什么某些不同的颜色在模拟中看起来一样?

某些色相差异在特定模拟类型下会压缩,原本不同的颜色可能变得接近。若两组状态必须区分,请给它们补上文字、形状或图案。

如何在设计中解决这些颜色冲突?

不要只微调色相。给状态增加明确文字、图标、线型或位置差异,并另用对比度工具确认文字可读。

为什么该模拟器采用 Machado(2009) 模型?

Machado 2009 模型提供可复核的色觉变换矩阵。本页在线性 sRGB 中应用矩阵,但结果仍是近似,不能代表每位色觉差异者的主观体验。

还有疑问?

现在用色盲模拟器核对图表

把截图放进色盲模拟器,查看状态色在模拟后是否合并;若信息消失,就用标签、图标或图案补上。