Color Blindness Simulator
Colors
Protanopia (Red-blind)
#FF0000 → #918e00
#00FF00 → #6e713e
#0000FF → #0000c1
#FFFF00 → #ffff3e
#FF00FF → #918ec1
Deuteranopia (Green-blind)
#FF0000 → #9fb300
#00FF00 → #604d4d
#0000FF → #0000b3
#FFFF00 → #ffff4d
#FF00FF → #9fb3b3
Tritanopia (Blue-blind)
#FF0000 → #f20000
#00FF00 → #0d6e79
#0000FF → #009186
#FFFF00 → #ff6e79
#FF00FF → #f29186
Achromatopsia (Total)
#FF0000 → #4c4c4c
#00FF00 → #969696
#0000FF → #1d1d1d
#FFFF00 → #e2e2e2
#FF00FF → #696969
技术详情
色盲模拟器的工作原理
工具功能
色盲模拟器可根据色觉障碍类型(如红色盲、绿色盲、蓝色盲、全色盲等)模拟用户界面或图片在色盲用户眼中的视觉效果。该工具帮助设计师和开发者评估色彩方案的可访问性,确保产品对所有用户(包括色觉障碍人群)都能提供清晰的视觉区分。
常见开发者使用场景
技术原理/相关概念
色盲模拟通过 LMS 色彩空间(长波 L、中波 M、短波 S 锥细胞响应)的矩阵变换实现。正常三色视觉通过 L、M、S 三种锥细胞的组合感知颜色,而色盲通常缺少或功能障碍其中一种。红色盲(Protanopia)缺少 L 锥细胞,绿色盲(Deuteranopia)缺少 M 锥细胞,蓝色盲(Tritanopia)缺少 S 锥细胞。模拟算法通过将 RGB 转换到 LMS 空间再重新映射来近似色盲视觉。
常见陷阱与注意事项
- 模拟的局限性:色盲模拟是近似值,不同个体的严重程度和类型存在差异,不能完全替代真实用户的测试。
- 不要仅依赖颜色:关键信息应同时使用图标、文字、形状或纹理来传达,而不仅仅依赖颜色差异。
- 红绿组合:红绿色盲是最常见的类型(约占男性 8%),应避免仅使用红绿对比来区分状态。
- 色彩盲安全色板:使用蓝-橙或蓝-黄等替代红-绿组合是更安全的选择。
何时使用此工具而非代码
在设计评审、UI 原型验证和可访问性快速审计时使用此工具。非常适合设计师在创建组件库时验证色彩选择,以及开发者在编写 CSS 时检查交互状态的可区分性。对于需要集成到 CI/CD 管道的自动化可访问性检查,推荐使用 axe-core、Lighthouse 或 Pa11y 等工具,它们能自动检测颜色对比度问题和可访问性违规。