色盲模拟器
模拟不同色觉障碍人群看到的颜色效果,帮助设计无障碍配色方案
模拟不同色觉障碍人群看到的颜色效果,帮助设计无障碍友好的配色方案。
自定义颜色
#ef4444
#22c55e
#3b82f6
#eab308
正常视觉
正常色觉 · -
#ef4444
#22c55e
#3b82f6
#eab308
红色盲
无法感知红光 · 男性 ~1%
#a5a344
#696a77
#5a5ada
#d2d231
绿色盲
无法感知绿光 · 男性 ~1%
#afbc44
#5f537d
#5650d3
#d5d93b
蓝色盲
无法感知蓝光 · ~0.003%
#e64444
#2a8b8f
#3fc4bf
#e75259
全色盲
只能看到灰度 · ~0.003%
#777777
#898989
#7a7a7a
#b0b0b0
红色盲
绿色盲
蓝色盲
全色盲
正常视觉
无障碍设计建议
- • 不要仅依赖颜色传达信息,同时使用图标或文字
- • 红绿搭配对色盲用户不友好,考虑使用蓝橙替代
- • 确保文字和背景的对比度足够(使用对比度检查器)
- • 测试配色在不同色觉模拟下的表现