色盲模拟器 — 体验色觉障碍者眼中的世界
使用颜色选择器或输入十六进制色码,并排比较四种色觉障碍类型下的颜色外观。每个色块显示模拟后的十六进制和 RGB 值,适合无障碍测试与包容性设计。
工作原理
色盲的统计数据与类型
色觉障碍影响全球约 3 亿人,约占北欧裔男性的 8%、女性的 0.5%。红绿色盲是最常见的类型:绿色盲(二色视)及绿色弱合计约影响 5% 的男性,红色盲及红色弱约影响 2.5%。蓝黄色盲(三色视)极为罕见,发病率低于万分之一。全色盲(杆体单色视)发病率约为三万分之一,患者的色彩感知完全依赖杆体细胞。
这意味着每 12 名男性用户中,约有 1 人存在某种程度的色觉障碍。若网站或应用仅依靠颜色传递信息,这部分用户可能无法正确理解内容或完成操作。使用本模拟器提前发现问题,是实现包容性设计的第一步。
模拟原理
人眼有三种锥细胞,分别对长波长(红)、中波长(绿)、短波长(蓝)光敏感。色盲发生于一种或多种锥细胞缺失或光谱敏感性偏移时。研究人员在 LMS 色彩空间(与锥细胞响应直接对应)中推导变换矩阵,预测色觉障碍者对特定 RGB 值的感知结果。
本工具采用 Machado 2009 简化矩阵直接在 sRGB 空间进行变换。这种方法以少量生理精确性换取速度与简便性,对设计用途而言误差可忽略不计。矩阵系数对高饱和输入色可能产生超出色域的结果,所有输出值均限制在 0–255 范围内。全色盲模拟使用标准亮度公式(0.299R + 0.587G + 0.114B)将颜色折叠为灰度值。
面向色盲用户的设计建议
最有效的方法是永远不要单独依靠颜色传递信息。将颜色与形状、图案或文字标签结合使用。饼图的各扇区应直接标注数据,而非仅靠颜色区分;表单验证错误应同时显示图标和错误提示文字,而非只将边框变为红色。这些原则对应 WCAG 2.1 成功标准 1.4.1(颜色的使用),是 AA 合规的必要条件。
选择调色板时,使用对比度检查器验证前景色与背景色的对比度(WCAG 要求普通文本最低 4.5:1,大文本最低 3:1)。在色相选择上,蓝橙组合在绿色盲和红色盲模拟下仍能保持区分度,而红绿组合应避免用作唯一区分方式。数据可视化可参考 ColorBrewer 的「色盲安全」子集。修改设计后,使用本模拟器验证四种色觉类型下的效果,确保信息对所有用户清晰传达。
常见问题
›什么是绿色盲(二色视)?
绿色盲是由中波长(绿色敏感)锥细胞缺失导致的红绿色觉障碍。患者难以区分红色和绿色,这些颜色呈现为黄褐色或灰色。这是最常见的色觉障碍类型,约影响 1% 的男性。
›红色盲和绿色盲有什么区别?
两者都属于红绿色觉障碍,但涉及不同的锥细胞。红色盲(原色盲)缺少长波长(红色敏感)锥细胞,绿色盲缺少中波长(绿色敏感)锥细胞。红色盲患者眼中的红色会显得更暗,因为 L 锥细胞负责传递大量亮度信息。
›全球有多少人是色盲?
全球约 3 亿人存在某种形式的色觉障碍。北欧裔男性约 8%、女性约 0.5% 受影响。红绿色盲(包括红色盲、绿色盲及对应色弱)占绝大多数病例。
›为什么色盲在男性中更常见?
编码长波长和中波长锥细胞视色素的基因(OPN1LW 和 OPN1MW)位于 X 染色体上。男性只有一条 X 染色体,一个缺陷等位基因即可导致色盲。女性有两条 X 染色体,须两条均携带缺陷才会发病,因此女性色盲概率远低于男性。
›什么是全色盲(杆体单色视)?
全色盲是三种锥细胞均无法正常工作的状态,视觉完全依赖杆体细胞。患者将世界视为灰度,在强光下视力极差且对光线极度敏感。发病率极低,约为三万分之一。
›模拟的准确性如何?
本工具使用 Machado 2009 线性变换矩阵,与二色视者的实验感知数据高度吻合。对于设计和无障碍测试而言,精度完全足够。由于存在个体差异(如程度不同的异常三色视),请将模拟结果视为保守的最坏情况参考。
›如何在不大改设计的情况下实现色盲友好?
首先使用本模拟器审查现有调色板。找出在绿色盲或红色盲视图下看起来相同的两种颜色,评估用户是否仍能理解内容。在必要之处添加图标、标签或图案,并将问题色对替换为区分度更高的组合(如蓝色与橙色)。最后用对比度检查器验证所有文本/背景对是否符合 WCAG 标准。
›本工具支持 CSS 颜色名称或 HSL 值吗?
本工具仅支持十六进制色码(#RRGGBB 或 #RGB)。如需使用 CSS 颜色名称或 HSL 值,请先使用本站的颜色转换器将其转换为十六进制,再粘贴到本工具中。
相关工具
最后更新: