网页配色验收
设计师用#00FF00和#FF0000做按钮主色，自认为对比强烈。但红绿色盲用户看这两个颜色几乎一样，导致无法区分“提交”和“取消”。用本工具上传设计稿截图，直接看到红绿色盲视角下的效果，发现按钮区变成一片灰黄。团队据此将取消按钮改为蓝色加下划线，确保色盲用户也能独立操作。
拖入 / 点击 / 粘贴图片
设计稿 · 图表 · 照片 —— 看它在色觉障碍用户眼中的样子
截图直接 CtrlV 粘贴
或试示例
色 觉 类 型Type of Color Vision Deficiency
缺陷程度
60%
色弱（anomalous）= 在正常视觉与全色盲之间按此比例插值；色盲（-opia）固定为 100%。
查 看 方 式View Mode
颜 色 可 分 辨 性Distinguishability · CIE76 ΔE
ΔE<10 几乎无法区分（红字）· 10–25 勉强（橙）· >25 可区分（绿）。用于检查图表 / 状态色在各 CVD 下是否仍然可辨。
上传或选一张示例图，
在此拖动中线对比「正常 ↔ 模拟」
在此拖动中线对比「正常 ↔ 模拟」
原图 / 模拟 对比拖动中线
正常
模拟
声明：模拟基于标准色觉缺陷矩阵（线性 sRGB → LMS 投影，Brettel/Viénot 法）的近似，真实色觉因人而异；全部计算在浏览器本地 Canvas 完成，图片不离开本机。设计建议：不要只靠颜色传递信息，辅以图标 / 文字 / 形状。
就绪 · 拖入 / 粘贴图片或选示例图开始
第一节
关于本工具
About设计师在选配色方案时，红绿色盲用户看到的界面可能完全不是预期效果。把设计稿拖进页面，它实时生成红绿色盲、蓝黄色盲和全色盲三种模拟视图，让设计师在出图前就发现对比度不足、信息靠颜色区分的隐患。所有图片处理在浏览器本地完成，不上传服务器。
使用场景
地图路线标注
社区志愿者为老人手绘就医路线图，用红蓝两色标出“去程”和“返程”。打印前用本工具模拟红绿色盲视图，发现红色和蓝色在色盲视角下都偏灰，路线完全混在一起。志愿者改用实线和虚线区分方向，并在每个路口标注地标照片，确保色弱老人也能看明白。
PPT数据图表
季度汇报中，销售用红色和绿色柱状图对比“去年”和“今年”业绩。总监是红绿色盲，在投影上看不出两组柱子的差异。汇报人用本工具提前检查PPT，发现红绿柱在模拟图中几乎等高。他改用橙色和蓝色填充，并在柱顶加注具体数字，总监当场就看清了增长趋势。
商品包装设计
一款果汁饮料用红底绿字标注“100%纯果汁”，但色盲消费者在货架上只看到一片红色，根本找不到关键信息。品牌方用本工具模拟蓝黄色盲视角，发现红底上的绿字在蓝黄色盲眼中变成暗红底加棕字，辨识度极低。最终改白底黑字加红色图标，色盲消费者也能一眼看到核心卖点。
医院导视系统
新门诊楼用红绿两色区分“内科”和“外科”区域，地面引导线也是红绿条纹。一名红绿色盲患者按绿色线走，结果走进了内科。院方用本工具模拟全色盲视图，发现所有颜色都变成灰度，引导线完全消失。最终改用不同形状的图标（十字 vs 圆形）配合颜色，确保色盲患者也能独立找到诊室。
第二节
使用指南
Getting Started使用步骤
- 1上传或粘贴一张图片（支持 JPG/PNG），预览区立即显示原图缩略图
- 2点击「红绿色盲」「蓝黄色盲」或「全色盲」标签，预览区切换为对应模拟效果
- 3拖动「严重程度」滑块（0%–100%），模拟图同步调整色觉缺失强度
- 4点击「对比视图」按钮，原图与模拟图并排显示，便于逐像素比对差异
- 5右键模拟图或点「下载」按钮，将当前模拟结果保存为 PNG 文件
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 上传一张包含红苹果和绿叶的彩色照片 | 红绿色盲模拟图：苹果与绿叶均变为黄褐色，对比度极低，难以区分；蓝黄色盲模拟图：苹果变为暗蓝，绿叶变为黄绿，对比保留；全色盲模拟图：整图转为灰度，仅靠明暗区分 | 常规：红绿色盲最典型场景，验证工具对红绿对比度消失的模拟效果 |
| 上传一张纯蓝色背景的图片 | 红绿色盲模拟图：蓝色基本不变，背景仍为蓝色；蓝黄色盲模拟图：蓝色变为暗灰或黑色；全色盲模拟图：蓝色转为中灰色 | 常规：蓝黄色盲对蓝色敏感度测试，验证工具对单一纯色的处理 |
| 上传一张纯白色图片（RGB 255,255,255） | 三种模拟图均输出纯白色（RGB 255,255,255），无变化 | 边界：白色在三种色盲中均无感知差异，验证工具对无色彩信息输入的正确处理 |
| 上传一张纯黑色图片（RGB 0,0,0） | 三种模拟图均输出纯黑色（RGB 0,0,0），无变化 | 边界：黑色同样无色彩信息，验证工具对极端亮度值的处理 |
| 上传一张包含红色文字和蓝色文字的图片 | 红绿色盲模拟图：红色文字变为黄褐色，蓝色文字不变；蓝黄色盲模拟图：红色文字变为暗紫，蓝色文字变为暗灰；全色盲模拟图：所有文字转为灰度，仅靠明度区分 | 易错：用户常误以为色盲只能看到灰度，实际红绿色盲仍能区分蓝红，但红绿混淆 |
| 上传一张包含渐变红色的图片（从 RGB 255,0,0 渐变到 RGB 128,0,0） | 红绿色盲模拟图：渐变变为从亮黄褐到暗黄褐，梯度保留但色相消失；蓝黄色盲模拟图：渐变变为从暗紫到更暗紫；全色盲模拟图：变为从亮灰到暗灰 | 边界：渐变中的色相变化在色盲眼中变为亮度变化，验证工具对连续色调的映射精度 |
| 上传一张包含交通信号灯（红、黄、绿）的图片 | 红绿色盲模拟图：红灯变为黄褐色，绿灯变为黄褐色，两者几乎无法区分；黄灯变为亮黄褐，可区分；蓝黄色盲模拟图：红灯变为暗紫，绿灯变为黄绿，黄灯变为亮黄；全色盲模拟图：三灯均转为不同灰度 | 易错：红绿色盲无法区分红绿灯，但黄灯仍可识别，验证工具对实际生活场景的模拟准确性 |
常见错误对照
1.上传了带透明通道的 PNG，模拟结果出现异常色块
✗ 错误
上传一个透明背景的 PNG 图标✓ 修复
先合并图层、填充白色或纯色背景再上传色盲模拟算法对透明像素（alpha=0）的处理方式因浏览器而异，可能导致边缘出现黑色或随机色块，干扰模拟效果。
2.用手机拍摄的屏幕照片模拟，误以为工具不准
✗ 错误
用手机对着显示器拍一张网页截图上传✓ 修复
使用系统截图工具（Win+Shift+S 或 Cmd+Shift+4）保存为 PNG 再上传手机摄像头会引入白平衡偏差和摩尔纹，这些伪影会被模拟算法放大，导致结果与真实色觉差异无关。
3.只模拟红绿色盲，忽略蓝黄色盲场景
✗ 错误
只选择“红色盲（Protanopia）”测试所有设计稿✓ 修复
至少分别测试红色盲、绿色盲和蓝黄色盲三种模式蓝黄色盲（Tritanopia）发病率虽低（约0.01%），但影响蓝色/黄色区分，UI 中蓝色链接和黄色警告按钮可能完全不可见。
4.用低分辨率缩略图模拟，误判颜色可辨识度
✗ 错误
上传一张 200×150 像素的缩略图✓ 修复
上传原始尺寸的设计稿（至少 800×600 像素）色盲模拟在像素级工作，低分辨率下相邻像素颜色被强制平均，丢失细节，导致误以为颜色对比足够。
5.模拟后只看缩略图，不点击放大查看细节
✗ 错误
在结果预览小图上扫一眼就说“没问题”✓ 修复
点击模拟结果图放大到 100% 比例，逐区域检查文字和图标缩略图会丢失像素级差异，而色盲用户对细线、小号文字的颜色依赖更强，必须查看原始分辨率。
6.用 JPEG 格式上传，导致颜色失真
✗ 错误
将设计稿导出为 JPEG 后上传✓ 修复
使用 PNG 或 WebP 无损格式导出JPEG 的有损压缩会改变相邻像素的色相和亮度，尤其在高频边缘（文字/图标），使模拟结果包含压缩伪影而非真实色觉差异。
7.混淆“全色盲模拟”和“灰色模式”
✗ 错误
把全色盲模拟结果当作“灰度图”用于无障碍报告✓ 修复
全色盲模拟保留亮度层次，但色相完全消失；灰度图是等比例加权亮度，两者视觉不同全色盲（Achromatopsia）模拟基于 CIE 色彩空间转换，保留原始亮度对比；而简单去饱和度会丢失亮度信息，不能替代。
第三节
工作原理
How It Works核心公式
C_{sim} = M \cdot C_{orig}
变量说明
C_{sim}模拟后的颜色向量 (R,G,B)M色盲类型对应的 3×3 变换矩阵C_{orig}原始像素颜色向量 (R,G,B)
示例
以红色盲（Protanopia）为例，变换矩阵 M = [[0.567, 0.433, 0], [0.558, 0.442, 0], [0, 0.242, 0.758]]。原始像素 (R=200, G=100, B=50)：R_sim = 0.567×200 + 0.433×100 + 0×50 = 113.4 + 43.3 = 156.7；G_sim = 0.558×200 + 0.442×100 + 0×50 = 111.6 + 44.2 = 155.8；B_sim = 0×200 + 0.242×100 + 0.758×50 = 24.2 + 37.9 = 62.1。最终模拟颜色为 (157, 156, 62)，红色通道显著降低，绿色通道升高，模拟了红色盲对红绿分辨的缺失。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问上传一张正常照片，模拟出来的色盲图到底准不准？＋
答
本工具基于国际通用的色觉障碍模拟算法（如 Brettel 1997 模型和 Viénot 改进版），对红绿色盲、蓝黄色盲和全色盲分别做色域映射。准确度取决于原始照片的色彩丰富度——如果原图本身颜色单一或偏色严重，模拟结果可能不够典型。建议上传色彩对比明显、包含红绿蓝三色的照片（如交通灯、花朵、水果）来测试效果。
问我上传的图片会不会被存到服务器上？＋
答
本工具完全在浏览器本地运行，所有图片处理由前端 JavaScript 完成，不会上传到任何服务器。上传的图片仅存在于当前浏览器内存中，关闭页面或刷新后自动释放。如果担心隐私，可以断开网络后使用，工具仍然可以正常工作。
问为什么模拟出来的图看起来颜色变化不大？＋
答
两种常见原因。一是原图本身的颜色本就集中在灰色或蓝色区域，对红绿色盲用户来说原本就分辨不清，所以模拟后差异小。二是色盲类型选错了——红绿色盲（deuteranopia/protanopia）和蓝黄色盲（tritanopia）的敏感区域不同，选错类型会导致模拟效果不明显。建议切换三种类型对比查看。
问模拟出来的图能保存或者下载吗？＋
答
可以。模拟完成后，结果图片下方有下载按钮，点击即可将当前显示的模拟图保存为 PNG 格式。保存时图片文件名会自动标注所用色盲类型（如「原图名_deuteranopia.png」），方便后续整理对比。如果需要多类型对比，建议分别下载后放在一起查看。
问手机浏览器上能用这个工具吗？＋
答
可以。本工具采用响应式设计，手机、平板、电脑浏览器均可正常使用。注意手机上传图片时，部分浏览器可能限制同时选择多张图片，建议一次只上传一张高分辨率照片。处理大图（超过 4000 像素）时，手机端可能稍慢，属正常现象。
问这个模拟和医院里色盲检查用的色卡是一回事吗？＋
答
不是一回事。医院色盲检查（如石原氏色盲测试卡）是用特定色点组成的数字或图案，测试视觉系统对特定色差的辨别能力。本工具是将普通照片的颜色映射到色盲用户可见的色域，模拟他们看到的日常场景。两者目的不同——一个用于诊断，一个用于设计或科普。
问我上传了 PNG 透明背景图，模拟后透明区域变成黑色了怎么办？＋
答
本工具在处理时会将透明背景转换为白色或黑色填充，这是 Canvas 渲染的默认行为。建议在上传前将图片背景填充为白色（或浅色），这样模拟后不会出现意外色块。如果必须保留透明，可以先用其他工具将透明区域填充为纯色后再上传。
问为什么同一张图用红绿色盲和蓝黄色盲模拟出来的结果几乎一样？＋
答
可能性一是原图本身颜色饱和度极低（接近灰度图），两种色盲模拟的色域映射都退化为灰度，结果自然相似。可能性二是原图只包含蓝色和黄色，红绿色盲对蓝黄敏感，模拟后变化不大；而蓝黄色盲对蓝黄不敏感，模拟后也变化不大。建议找一张红绿蓝三色都明显的照片重新测试。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。