高对比度模式必须响应系统级信号而非仅加class，核心是同时适配@media (forced-colors: active)和(prefers-contrast: high)，显式重置border、outline、svg颜色等关键属性，并优先尊重系统强制色，辅以localstorage持久化用户选择。
高对比度模式不是加个 class 就完事
直接在 body 上加 class="high-contrast" 再配点 CSS，看起来简单，但实际会漏掉大量隐性对比问题。系统级高对比模式（如 Windows 的“高对比度主题”或 macOS 的“增加对比度”）会强制覆盖页面颜色，而纯 CSS 模拟的“高对比度按钮”往往只改文字和背景色，忽略 SVG 图标、表单控件、伪元素、阴影、border-color 等——这些在真实高对比环境下可能完全不可见或误读。
真正可用的方案必须同时响应两种信号：用户主动点击按钮 和 操作系统级高对比度启用状态。后者通过 @media (forced-colors: active) 检测，不能省略。
- 务必用
prefers-contrast: high媒体查询作为兜底，它比prefers-color-scheme更专一，且已被 Chrome/Firefox/Safari 支持 - 避免用
!important覆盖系统强制色，否则会破坏系统级高对比体验；应使用forced-color-adjust: none显式声明哪些元素允许被系统接管 - 按钮本身必须有足够对比（至少 4.5:1），且焦点状态清晰——用
:focus-visible而非:focus，避免鼠标点击时出现多余轮廓
按钮状态要同步 localStorage + 系统偏好
用户点了“开启高对比”，下次打开页面却失效，这是最伤信任的设计。状态必须持久化，但不能只存 localStorage —— 如果用户在系统设置里开了高对比，网页却还显示默认样式，那等于没做适配。
正确做法是：先读取系统偏好，再叠加用户手动选择。优先级为：系统强制色 > 用户手动开启 > 默认。
- 监听
window.matchMedia("(forced-colors: active)").matches，变化时自动更新界面，无需用户操作 - 用户点击按钮时，把选择存进
localStorage.setItem("hc-mode", "on")，同时调用document.documentElement.setAttribute("data-hc", "on") - 初始化时按顺序判断：
matchMedia("(forced-colors: active)").matches→localStorage.getItem("hc-mode") === "on"→ 否则默认关闭 - 不要用
sessionStorage，它关掉标签页就丢，对视障用户不友好
CSS 里哪些地方最容易翻车
高对比模式下，color 和 background-color 只是冰山一角。很多开发者忘了 border、outline、SVG fill/stroke、box-shadow、甚至 ::placeholder 都需要重置。
-
input和button默认边框在高对比下可能消失，必须显式写border: 2px solid CanvasText（CanvasText 是系统强制色关键词，不是变量） - SVG 图标别用内联
fill="#333"，改用fill="currentColor"，让它随文本色自动适应 - 禁用
box-shadow，高对比模式下它会被忽略或渲染异常；改用outline或加粗border -
::before/::after伪元素如果用了颜色，必须同样用currentColor或系统色关键词（如ButtonFace、ButtonText）
测试不能只靠眼睛看
用浏览器 DevTools 切换“模拟高对比度”只是第一步，它无法还原真实系统行为。Windows 高对比主题会把所有非文本元素强制设为系统色，Safari 的 forced-colors 还会禁用 background-image。
- 真机测试必须做：Win10/11 开启“高对比主题”，macOS 开启“增加对比度”，iOS 开启“智能反转”+“增加对比度”组合
- 用 VoiceOver/NVDA 测试按钮是否被正确识别为
role="switch"，且aria-checked属性随状态实时更新 - 检查所有交互元素是否有明确的视觉焦点指示——高对比模式下，浅灰虚线焦点框根本看不见，必须换成 2px 实线或双层 outline
- 特别注意表单错误提示：红色文字在高对比下可能变成深紫或黑，需搭配图标和 ARIA
aria-live提示
最常被忽略的是 disabled 状态：系统高对比下，disabled 的 button 文字可能和背景色一样，得额外加 opacity: 0.7 或 filter: grayscale(50%) 来维持可分辨性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
