色盲模拟器 - 红绿色盲视角预览与无障碍配色检查

546 字
3 分钟
色盲模拟器 - 红绿色盲视角预览与无障碍配色检查

🌟 你看到的颜色,别人可能看不到#

约每 12 名男性中就有 1 人有某种程度的色觉异常(红绿色盲最常见)。如果界面”只靠颜色区分”,这部分用户就会困惑。星点色觉模拟可以预览不同色觉下的效果。

声明:本工具用于设计检查,不用于医学诊断。


👁 常见色觉类型#

类型特征
红色盲(Protanopia)红色感知缺失,红绿难分
绿色盲(Deuteranopia)绿色感知缺失,最常见
蓝黄色盲(Tritanopia)蓝黄难分,较少见
全色盲(Achromatopsia)只能看到明暗

(还有对应的”色弱”版本,程度较轻。)


🚀 怎么用#

  1. 打开色觉模拟;
  2. 输入颜色块或上传图片;
  3. 选择要模拟的类型;
  4. 对比原始与模拟效果;
  5. 检查配色是否仍能区分。

💡 无障碍配色建议#

  • 不要只靠颜色传递信息:错误状态除了红色,再加图标或文字;
  • 保证明度差:色盲仍能感知明暗,靠明度区分更可靠;
  • 检查对比度:文字与背景 ≥ 4.5:1(对比度检测);
  • 图表用图案/标签:折线图用不同线型,饼图直接标数值。

🔒 图片本地处理#

图片色觉模拟在浏览器本地完成,图片不上传,可用于含隐私的截图与设计稿。


🔧 常见问题#

模拟结果准确吗? 采用标准色觉模拟模型,用于设计参考。真实感受因人而异,不作为医学判断。
能模拟色弱吗? 支持不同严重程度的模拟。
哪些场景最需要检查? 图表、状态提示、红绿按钮、地图、以及任何"用颜色区分"的设计。

💬 总结#

色盲模拟帮你在设计阶段发现”只靠颜色”的隐患。核心原则:用明度差 + 图标/文字,别只用色相。配合对比度检测一起用。

立即体验:访问 色觉模拟

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

最后更新于 2026-09-13,距今已过 32 天

部分内容可能已过时

相关文章 智能推荐
1
颜色对比度检测 - WCAG 无障碍对比度怎么算(AA/AAA)
颜色工具 颜色对比度怎么算?本文解释 WCAG 对比度公式与 AA/AAA 标准(普通文本 4.5:1、大字号 3:1),给出正误示例、达标实践、批量检测与最佳文字色建议,并附在线对比度检测工具。
2
UI 配色方案怎么定 - 生成界面配色与 Design Token
颜色工具 UI 配色怎么做?本文讲清主色/辅助色/背景/文字/边框/状态色的搭配方法,并介绍在线设计辅助工具:输入主色即可预览真实 UI 结构、导出 CSS 变量与 Design Token。
3
配色方案生成器 - 互补色/类似色/三角色在线生成
颜色工具 配色方案怎么定?本文解释互补色、类似色、三角色、分裂互补、单色等色彩关系,并介绍在线配色方案生成器:选一个基色即可生成整套和谐配色,支持锁定与导出。
4
色温是什么 - 冷暖色与色温(K)对照
颜色工具 色温是什么?本文解释色温(开尔文 K)的含义、冷暖色与色温的对照(2700K 暖光~6500K 日光)、白平衡的作用,以及色温在摄影、屏幕、设计中的应用。附在线专业色彩工具。
5
HEX 转 HSL 怎么转 - 颜色换算方法与示例
颜色工具 HEX 转 HSL 怎么算?本文解释 HSL(色相/饱和度/亮度)的含义、HEX 转 HSL 的步骤与示例,并说明 HSL 为什么适合调色。附在线颜色格式转换工具,一键互转。
随机文章 随机推荐
公告
🎉 已升级 2.0 版本,欢迎使用。
分类
标签
站点统计
文章
197
分类
24
标签
747
总字数
334,099
运行时长
0 天
最后活动
0 天前

目录