css颜色的可访问性_如何确保对色盲用户友好

色盲用户无法区分红绿色盲的#FF0000与#008000、蓝黄色盲的#0000FF与#FFFF00；需用对比度比值（正文≥4.5:1）、非颜色线索（图标/文字/边框）、高对比模式适配及可见交互反馈保障可访问性。

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

红绿色盲（最常见类型）无法区分 #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 效果最好带位移或阴影变化，而不仅是变个色。