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