色觉障碍模拟器
模拟不同类型的色觉障碍,检查您的设计对色觉障碍用户的可见性。
前景颜色
背景颜色
选择类型
绿色盲
受影响人口 ~1%tools.colorBlindnessSimulator.affectedDeuteranopia
文本预览
大字体示例文本
小字体示例文本
对比度
模拟结果
#3b82f6#418efa~1% of population
#007df4~1% of population
#009eb0<0.1% of population
#3f8af9~1% of population
#227ff5~5% of population
#0093d0<0.1% of population
#858585<0.01% of population
#6f84bd~0.1% of population
对比度比较
| 色觉缺陷类型 | 比例 | 正常字体 | 大字体 |
|---|---|---|---|
| 原始 | 3.98:1 | Fail | AA |
| 🔴红色盲 | 4.42:1 | Fail | AA |
| 🟢绿色盲 | 3.71:1 | Fail | AA |
| 🔵蓝色盲 | 4.51:1 | AA | AAA |
| 🔶红色弱 | 4.26:1 | Fail | AA |
| 🟡绿色弱 | 3.81:1 | Fail | AA |
| 🔷蓝色弱 | 4.24:1 | Fail | AA |
| ⬛全色盲 | 3.94:1 | Fail | AA |
| ◻️部分色觉缺失 | 3.97:1 | Fail | AA |
关于色觉障碍模拟器
色觉障碍模拟器可以模拟各种类型的色觉障碍(色盲),帮助设计师了解他们的设计在不同色觉条件下的效果。
如何使用
上传图像或输入颜色,选择要模拟的色觉障碍类型,即可查看模拟效果。支持红色盲、绿色盲、蓝色盲等多种类型。
使用场景
- 无障碍颜色选择
- 为色盲用户测试 UI
- WCAG 合规性检查
- 包容性 UI 设计
- 品牌颜色无障碍性