色盲模拟器实战:8 种色觉对照,看懂为什么设计不能只靠颜色

我做前端这几年,最容易被忽略的一类问题,就是配色对色觉异常用户不友好。原因很简单:做设计和写代码的人,绝大多数色觉正常,自己永远看不到问题在哪。一个红绿配色在你眼里清清楚楚,在红绿色盲用户眼里可能就是糊成一团的暗黄。这篇就把色盲的几种类型、为什么设计要考虑它、以及怎么用工具验证,讲清楚。

色盲到底有几种

色觉靠视网膜上三类视锥细胞工作:L 视锥对红敏感、M 视锥对绿敏感、S 视锥对蓝敏感。哪一类出问题,就对应一种色觉异常。

按缺失程度分两档。一档叫二色觉,某一类视锥整个缺失:L 视锥没了是红色盲 (protanopia),M 视锥没了是绿色盲 (deuteranopia),S 视锥没了是蓝色盲 (tritanopia)。另一档叫异常三色觉,也就是色弱,视锥还在但敏感峰偏了位,对应红弱、绿弱、蓝弱,区分能力被削弱但没彻底消失。再加上全色盲 (achromatopsia) 和部分全色盲,一共 8 种情况。

红绿型 (红色盲 + 绿色盲 + 红弱 + 绿弱) 是最常见的一类,蓝色盲非常罕见。

约 8% 的男性看到的世界和你不一样

数字值得记住:红绿色觉缺陷在男性中的发生率约 8%,女性约 0.5%。换算下来,每 12 个男性就有 1 个有某种红绿色觉异常。这不是边缘群体,是一个庞大的真实用户基数。

为什么男女差这么多?红绿色觉相关基因在 X 染色体上,男性只有一条 X,出问题就直接显现;女性有两条 X,另一条往往能补上,所以发生率低一个数量级。

进一步细分:在有红绿缺陷的男性里,约 75% 是较轻的色弱,25% 是较重的色盲。这意味着你的配色既要扛得住较轻的红弱绿弱,也要扛得住彻底的红色盲绿色盲。

红绿配色在色盲眼里的真实问题

举个我反复遇到的例子。数据看板上 6 条折线,配色是红、橙、绿、青、蓝、紫,在我眼里六条线泾渭分明。把这 6 个 hex 粘进色盲模拟器的多色模式,切到绿色盲面板,红线和绿线直接塌成同一坨暗黄,完全分不开。

后果很具体:一个绿色盲的产品经理打开这个看板,他分不出哪条是收入、哪条是流失。图表对他失效了。修法是把绿换成更深的青,拉开明度差,再把 8 块面板挨个核一遍,确认每种异常下六条线都还能区分,这才算配色过关。

还有个更隐蔽的坑。品牌红在绿色盲面板里看着跟绿还能分开,可绿色盲用户实测说"分不开"。原因是模拟面板显示的是颜色表象,不是混淆线,两个颜色看着不一样,在视锥空间里可能仍在同一条混淆线上,小尺寸场景下就难分了。12px 的图例,比 200px 的大色块难辨认得多。

设计为什么必须考虑色觉

无障碍不是道德加分项,是产品能不能被用的问题。WCAG 1.4.1 (颜色的使用,A 级) 写得很明确:信息不能只靠颜色传达。这是 A 级,最低门槛,不是可选项。

只靠颜色传达信息的典型场景到处都是:红色表示错误绿色表示成功、红绿小圆点标在线离线状态、纯靠颜色区分的图例和图表。这些在色觉正常用户那里没问题,对那 8% 的男性用户就是信息丢失。一个只靠绿色描边的"推荐"标记,在每 12 个男性就有 1 个的眼里会直接糊进背景。

别只靠颜色:三条能落地的规则

这三条是做无障碍审计这些年攒下来的:

第一,不要只靠色相传达信息。颜色一定要配上别的冗余信号:图标、文字标签、纹理、位置。状态用红绿,就再加上对勾和叉的图标;折线图除了颜色,再配上实线虚线点线。这样连全色盲用户都能看懂。

第二,拉开明度差,不只拉色相差。色相对比 (红 vs 绿) 在全色盲面板里可能塌成同一个灰,而明度有差异的颜色,八种异常都扛得住。挑配色时优先保证相邻类别的明暗有明显落差。

第三,避开三对经典混淆色:红配绿 (红绿型最致命)、蓝配黄 (坑蓝色盲)、紫配蓝 (也坑蓝色盲)。拿不准就把整套配色粘进模拟器,8 块面板一字摆开,哪两块糊在一起就改哪两块。

至于前景背景的对比度够不够 (WCAG 1.4.3 / 1.4.11),那是另一码事,用颜色对比度检测对每对前景背景挨个量一遍。两件事配合,才覆盖了 WCAG 里跟颜色相关的大多数要求。

小结

色觉异常不是小众边缘问题,约 8% 的男性、约 0.5% 的女性受红绿色盲影响。设计和写代码的人自己色觉正常,看不到问题,所以更要靠工具去验证。核心就一句话:别只靠颜色传达信息,颜色配上图标文字明度差,再用色盲模拟器把 8 种情况挨个过一遍。配色这件事,与其上线后挨投诉,不如发之前花十分钟看清楚。

Made by Toolora · Updated 2026-06-13