色弱用户无法可靠区分某些颜色组合，需绕过视觉优先惯性，从语义、结构和行为层重建信息通道：用aria-invalid等属性显式声明状态，避免单靠颜色传递信息，确保焦点轮廓可见，适配高对比模式，并剥离颜色的语义依赖。
色弱用户无法可靠区分某些颜色组合，仅靠颜色传递状态、错误或操作反馈会直接导致信息丢失。优化必须绕过“视觉优先”惯性，从语义、结构和行为层重建信息通道。
用aria-invalid替代红色边框标错
很多表单验证只改input的border-color为红色，但红绿色弱用户根本看不到变化。屏幕阅读器也读不出“这个框变红了”。
- 必须配合
aria-invalid="true"显式声明状态，让辅助技术知道字段出错 - 同时用
aria-describedby指向一段文字说明，比如<div id="email-error">邮箱格式不正确</div> - 视觉上别只依赖颜色：加图标（⚠️）、加粗文字、或改变边框样式（如虚线+实线组合）
避免用color属性单独表达含义
把“必填项”文字设成红色、把“成功提示”设成绿色，对色弱用户等于没写。CSS的color不是语义，只是装饰。
- 必填字段用
aria-required="true"，并搭配视觉标记如*（需包裹在span里且不被隐藏） - 状态提示改用明确文字：“已保存”“发送失败”“正在加载”，而非仅靠绿/红/灰文字
- 如果必须用色块（如仪表盘指标），一定叠加纹理（斜线、点阵）或文字标签（“高风险”“低活跃”）
确保focus轮廓不被outline: none抹掉
键盘用户（包括部分色弱者因精细操作困难而倾向键盘导航）严重依赖焦点轮廓识别当前操作位置。用outline: none再自己画个“更美观”的焦点环，常常导致对比度不足或形状模糊。
- 不要全局禁用
outline；如真要自定义，必须满足WCAG 4.5:1对比度，且宽度≥2px - 测试方式：按Tab键遍历页面，确认每个可聚焦元素都有清晰、持续、高对比的视觉指示
- 特别注意自定义组件（如
role="tab"、role="slider"）——它们没有原生焦点样式，必须手动补全
用prefers-contrast媒体查询适配高对比模式
Windows/macOS系统级高对比主题会强制重绘界面，但很多网页会因硬编码颜色或透明度而崩坏（文字消失、按钮不可见）。这不是“美化问题”，是功能失效。
- 检测系统偏好：
@media (prefers-contrast: high) { ... }，重置关键颜色为黑白或高饱和纯色 - 禁用
opacity、rgba()做禁用态；改用pointer-events: none+ 文字灰度（filter: grayscale(1)） - 避免背景图覆盖文字；高对比模式下图片常被关闭，文字必须自身可读
最易被忽略的一点：色弱优化不是“加几个属性就完事”，而是要主动剥离对颜色的语义依赖。每次你打算用颜色表达一个意思，先问自己——如果这颜色全变成灰色，用户还能理解吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
