色盲友好CSS颜色选择指南

本文深入解析了如何通过科学的CSS实践保障色盲用户的可访问性，指出红绿色盲和蓝黄色盲人群对常见颜色组合（如红/绿、蓝/黄）存在严重识别障碍，强调不能仅依赖颜色传递关键信息；必须以对比度比值（正文≥4.5:1）为硬性标准，借助DevTools或在线工具实时验证，同时强制叠加图标、文字说明、边框、纹理等非颜色线索，并利用`@media (prefers-contrast)`进行高对比模式适配——但真正关键的是，所有交互状态（hover/focus）都需提供颜色之外的可见反馈，确保每位用户都能平等、可靠地理解界面语义与操作结果。

色盲用户看不到哪些颜色组合

红绿色盲（最常见类型）无法区分 #FF0000 和 #008000 这类高饱和度的红绿对比，尤其在低亮度或小字号下几乎完全混淆。蓝黄色盲虽较少见，但对 #0000FF 与 #FFFF00 的区分同样困难。单纯依赖颜色传递关键信息（比如“红色表示错误”“绿色表示成功”）会让这部分用户失去语义。

用 contrast ratio 而不只是 color 名称判断可访问性

CSS 中写 color: red 或 background-color: #ff6b6b 完全不保证可读性。真正起作用的是前景色与背景色之间的对比度比值（contrast ratio），W3C WCAG 2.1 要求：正文文本至少 4.5:1，大号文本（≥18pt 或 ≥14pt 加粗）至少 3:1。

• 别手动心算——用浏览器 DevTools 的无障碍面板实时查看当前元素的 contrast ratio
• 在线工具如 WebAIM Contrast Checker 可输入任意 #rrggbb 值快速验证
• 深灰（#333333）配白底是 12.3:1，安全；但浅灰（#999999）配白底只有 3.7:1，正文不可用

替代视觉线索：icon、text、border、pattern 缺一不可

当用颜色标识状态时，必须叠加至少一种非颜色线索：

• 错误提示加 ❌ icon + “错误：邮箱格式不正确”文字 + 红色 border-bottom: 2px solid #d32f2f
• 成功状态用 ✅ + “已保存” + 绿色 box-shadow，而非仅改文字颜色
• 表单必填字段旁加 * 并用 aria-required="true"，不只靠红色星号
• 图表中避免纯红/绿柱状图；改用不同纹理（斜线/点阵）+ 标签 + 颜色

用 CSS 自定义属性 + @media (prefers-contrast) 做基础适配

现代浏览器支持 @media (prefers-contrast)，可在高对比度模式下覆盖默认色值：

:root {
  --status-error: #d32f2f;
  --status-success: #2e7d32;
}
@media (prefers-contrast: high) {
  :root {
    --status-error: #000000;
    --status-success: #000000;
  }
  .status-error { border-left: 4px solid #000000; }
  .status-success { border-left: 4px solid #000000; }
}

注意：该媒体查询目前仅在 Windows 高对比主题 + Edge/Chrome 生效，不能替代前述语义增强手段，但作为补充很实用。

最容易被忽略的是：即使对比度达标、也加了图标，如果交互反馈（如 hover/focus 状态）仍只靠颜色变化，色觉障碍用户依然会卡住——focus outline 必须可见，hover 效果最好带位移或阴影变化，而不仅是变个色。

今天关于《色盲友好CSS颜色选择指南》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！