色盲模拟器

模拟不同色觉障碍人群看到的颜色效果,帮助设计无障碍配色方案

模拟不同色觉障碍人群看到的颜色效果,帮助设计无障碍友好的配色方案。

自定义颜色

#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

红色盲

绿色盲

蓝色盲

全色盲

正常视觉

无障碍设计建议

  • 不要仅依赖颜色传达信息,同时使用图标或文字
  • 红绿搭配对色盲用户不友好,考虑使用蓝橙替代
  • 确保文字和背景的对比度足够(使用对比度检查器)
  • 测试配色在不同色觉模拟下的表现

常见问题

相关工具