色盲模拟器
把图片转换成 8 种色盲色弱视角，实时对比并导出模拟结果。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传1. 选择图片
点击选择图片或拖拽到此处
支持 PNG / JPG / WebP / GIF 首帧，单张不超过 20 MB
或使用内置测试图（Canvas 现场绘制）
2. 色觉类型（勾选 1~4 种）
已选 1 种3. 对比视图
4. 视觉特征与配色警示
工作原理
- 1选择图片来源：上传本地图片（通过 File API 以 Blob 方式读取，不经过网络），或点击内置测试图，由 Canvas 现场绘制色卡、交通信号、图表与 UI 示意。
- 2按所选类型与强度生成 3×3 色彩变换矩阵：色盲取 Machado 2009 的 100% 严重度矩阵，色弱与强度通过单位矩阵插值 M = I × (1 − a) + M_cvd × a 得到。
- 3逐像素变换：sRGB 先做反 gamma 进入线性空间，矩阵运算后再 gamma 编码回 sRGB，alpha 通道保持不变；全色盲使用 0.2126R + 0.7152G + 0.0722B 的 WCAG 亮度系数。
- 4对比视图叠放原图与模拟图，滑动模式仅改变顶层 canvas 的 clip-path 裁剪范围，因此拖动不触发重算，保持流畅。
- 5同时用中位数切割提取图像前 8 个主色，计算每对颜色在 CIE Lab 空间模拟前后的 ΔE（CIE76），把「原图 ΔE > 25 但模拟后 ΔE < 10」的颜色对列入可访问性警示清单。
常见问题
模拟结果准确吗？依据是什么？
色觉障碍矩阵采用 Machado、Oliveira、Fernandes（2009）论文给出的 100% 严重度系数，这是工程上最常用的近似方案；全色盲使用 Rec.709 / WCAG 相对亮度系数。模拟结果用于设计自查与沟通，不等同于医学诊断，也不代表某位色觉障碍者的真实主观感受。
为什么矩阵运算要在线性 RGB 空间做？
sRGB 数值本身经过 gamma 编码，若直接对 0~255 的数值做矩阵乘，会在中间调产生明显偏色。本工具先把 sRGB 反 gamma 转为线性光强，做 3×3 矩阵运算后再用同样的传递函数编码回 sRGB，结果才符合色觉缺陷模型。
强度 0% 时结果和原图一样吗？
是的。强度为 0 时矩阵退化为单位矩阵，工具对该情况做了快速路径处理，输出与原图逐像素完全一致。色弱类型（Protanomaly / Deuteranomaly / Tritanomaly / Achromatomaly）默认强度为 60%，色盲类型默认为 100%。
上传的图片会被发送到服务器吗？
不会。图片通过浏览器的 File API 在本地读取并直接绘制到 Canvas，整个过程没有任何网络请求，断网状态下同样可以完整使用。页面上的示例图片也全部由 Canvas 现场绘制，不加载任何外部资源。
为什么大图会被自动缩小？
逐像素处理的时间与像素数成正比。为保证拖动与切换类型的流畅度，处理前会把长边缩放到 1200px 以内（导出时也使用该分辨率）。这与 PRD 中「大图降采样预览、导出时再算」的性能策略一致。
易混淆颜色对是怎么判断的？
先用中位数切割（median cut）量化提取图中出现频率最高的 8 个主色，再逐对计算模拟前后的 CIE76 色差 ΔE。若某对颜色原图 ΔE 大于 25（肉眼容易区分）而模拟后 ΔE 小于 10（很难区分），就判定为「易混淆」，并建议通过加大明度差、叠加图案 / 纹理 / 文字标签来区分。