实用工具2026-10-26Begin5 分钟阅读

色盲怎么看你的配色：六种色觉类型的自检方法与安全色板

男性中约 8%、女性中约 0.5% 有某种色觉障碍——对开发者这意味着每 12 个男性访客里就有 1 个看到的配色和你不一样。最常见的事故形态：红色报错和绿色成功只用了颜色区分、红绿双线图表、深红按钮配暗绿背景。本文给出一套自检方法；最直接的验证是把关键色丢进色盲模拟工具过一遍六种类型。

六种色觉类型速览

类型	患病率(男性)	感知特征	高频事故场景
红色盲 Protanopia	~1%	红色趋于暗灰/褐,红绿难辨	红色警示「消失」
绿色盲 Deuteranopia	~1%	绿色趋于土黄,红绿难辨	绿色成功态与灰色混淆
蓝色盲 Tritanopia	~0.01%	蓝黄难辨	蓝色链接与紫色visited态混淆
红色弱 Protanomaly	~1%	红色感知变弱(程度轻)	暗红文字对比不足
绿色弱 Deuteranomaly	~5%(最常见)	绿色调辨析力下降	绿/棕/黄系图表混淆
全色盲 Achromatopsia	~0.003%	仅明暗,无彩色	任何仅靠颜色的区分全部失效

红色弱和绿色弱合计约 6%,是最需要照顾的群体——他们不是看不见颜色,而是你精心挑的两个「明显不同」的颜色在他们眼里趋同。

自检方法：三个必测色对

不用读完色彩科学,记住三组高危色对,设计定稿后逐组测试:

语义色对:成功绿 vs 错误红——最经典的翻车点。模拟下若两者趋同,改用「颜色 + 图标/文字」双通道传达(✓/✗ 前缀);
状态色对:主色按钮 vs 禁用态、链接色 vs 正文色——禁用态只降饱和度的话,多种色觉下会与正常态混淆,叠加降低透明度或灰化;
图表色板:折线图前 3-4 条线的颜色在六种模拟里两两可分。红绿蓝三原色板必挂,改用明度阶梯 + 色相差异大的板(如蓝/橙/黄/灰)。

把候选色逐一粘进色盲模拟器,六种类型的模拟结果并排对照——两列模拟结果接近同色,这组搭配就有问题。对比度本身是否达标是另一条独立红线(4.5:1 文字对比),配合WCAG 对比度指南一起过,两条腿走路。

模拟的原理(以及它的边界)

色盲模拟不是「把红色变绿」的随意映射,而是基于锥细胞缺失模型的线性颜色变换:每种色觉类型对应一个 3×3 矩阵,把正常色觉的 RGB 投影到该类型可感知的颜色空间里。红色盲矩阵移除了长波锥体的独立通道贡献,红绿信息被压缩到同一维度——所以模拟结果里红色和绿色会落到相近的输出。

它的边界也要知道:模拟回答「这两个颜色在该色觉下是否可分」,不等于呈现了色盲者的真实主观体验(个体差异、大脑代偿都存在)。工程上用它做「可分性测试」足够,做「体验还原」则超出能力范围——这也是主流模拟工具共同的诚实边界。

安全色板的三条原则

明度阶梯优先:即使完全灰化仍可区分的配色,对全部六种类型都安全。先用灰度模式检查层级,再上色;
信息多通道:颜色永远不是唯一载体——图标、文字标签、下划线、形状,至少二选一兜底;
避开纯红绿对:需要红绿语义时,错开明度(浅绿 vs 深红)并叠加图标,模拟验证通过再定稿。

选色工具链:候选色板先过色盲模拟,再查对比度,需要现成参考时 Tailwind 色板查询里的中性色阶梯是灰度检查的好起点。

实现注记 / Implementer's note

站内模拟器的实现是教科书式的矩阵变换:六种类型各一个 3×3 变换矩阵,输入色解析为 RGB 后做矩阵乘法,结果夹取到 [0,255] 再回 Hex——纯函数、无状态、毫秒级出六个结果。交互上选择了「单色输入 + 六型并排网格」而不是上传整图模拟,是有意为之:整图模拟(滤镜)对 CSS 改色无能为力,而设计师真正需要的是「这个具体色值在六型下变成什么」,点击任一结果直接复制变换后的 Hex,拿到设计工具里替换验证。六型的矩阵取自公开的色觉模拟研究参数,红/绿色弱(protanomaly/deuteranomaly)与红/绿色盲(protanopia/deuteranopia)是四个独立矩阵——弱与盲不是强度差异而是不同的锥细胞状态,混用会让弱型用户的设计验证失真。

FAQ

色盲模拟工具的结果能代表所有色盲用户吗?

不能,它做的是「可分性近似」:回答某两个颜色在某类型下是否趋同。个体差异(程度、代偿)意味着真实体验有偏差,工程自检用它,用户研究别用它替代。

为什么红色盲和红色弱是两个矩阵?

色盲(dichromacy,某类锥细胞缺失)与色弱(anomalous trichromacy,锥细胞光谱偏移)是不同的生理状态,颜色空间的投影方式不同——强度上「弱」轻于「盲」,但不是同一矩阵的缩放。

WCAG 对色觉有硬性要求吗?

WCAG 1.4.1(Use of Color)要求颜色不作为唯一传达手段——这正是本文「多通道」原则的出处;对比度要求(1.4.3)是另一条,两条都要过。

除了红绿还有什么容易忽略的?

蓝色盲(蓝黄混淆)虽罕见,但蓝色链接 vs 紫色已访问态、蓝底黄字的组合会在模拟里暴露问题;全色盲则提醒你:任何设计在完全灰度下都应保持可用。

这篇自检笔记来自 ToolVault 工具匣色盲模拟工具的实现过程,六型矩阵与「弱盲分立」的取舍都写进了工具注释。

补充注记

最初版本只想做三型(红绿蓝色盲),补色弱两型是查患病率数据后的决定——色弱人群(约 6%)比色盲(约 2%)大一个数量级,只测全盲型会漏掉最需要照顾的多数。「单色网格 vs 整图滤镜」的选择则来自自己的设计流程:改按钮色时反复整图渲染太慢,单色即时出结果才留在了日常工作流里。

#色盲模拟 #无障碍 #配色 #WCAG