高对比度模式需用 forced-colors: active 配合系统颜色关键字适配，而非仅依赖 prefers-contrast: high；必须重置 border、background-color、color、outline 等样式为系统色，并确保语义化标签与焦点管理。
高对比度模式不是“换套深色皮肤”，而是操作系统接管渲染的强制策略；只靠 prefers-contrast: high 或 color-scheme: dark 无法真正适配，必须配合 forced-colors: active 和系统颜色关键字才有效。
为什么 prefers-contrast: high 单独用会失效
系统开启高对比度后，浏览器确实会匹配 @media (prefers-contrast: high)，但它只是“感知信号”，不改变底层渲染规则。真正的样式覆盖由操作系统发起，且会无视你写的 #333、rgba(0,0,0,0.5)、linear-gradient 等非系统色值——它们会被强制替换成当前主题的 CanvasText、ButtonFace 等系统色。
常见错误现象：
- 写了
@media (prefers-contrast: high) { color: #fff; }，结果文字变成灰白不可读 - 按钮用了
background: transparent，高对比下直接“消失” - 焦点轮廓设为
outline: 1px dashed #999，但系统把它压成细线甚至抹掉
正确做法是：把 prefers-contrast 当作辅助提示（比如提前禁用动画），核心适配必须落在 forced-colors: active 媒体查询里。
forced-colors: active 下必须重置的关键样式
该媒体查询生效时，所有 CSS 颜色、背景、边框、阴影都可能被系统重绘。你的任务不是“对抗覆盖”，而是“主动对齐系统语义”。重点重置以下几类：
-
border：改用系统色，如border: 2px solid ButtonText或border: 1px solid currentColor（后者更安全，自动继承文本色） -
background-color：禁用transparent、渐变、半透明；强制设为Canvas、ButtonFace、Highlight等系统关键字 -
color：避免硬编码，优先用CanvasText、ButtonText、LinkText -
outline：聚焦状态必须显眼，建议outline: 3px solid Highlight或outline: 2px solid currentColor -
box-shadow、border-radius、filter：全部移除，系统不支持，且会干扰高对比渲染
表单控件在高对比下失效的典型修复点
复选框、单选按钮、下拉框、密码输入框是高对比模式下最常“失联”的元素，原因不是代码错，而是原生控件被系统隐藏后，你没提供替代视觉锚点。
-
input[type="checkbox"]和input[type="radio"]：必须加appearance: none，再用background-color: currentColor+border手动画勾/点 -
select：默认箭头在高对比下常消失，需用background-image替换为 SVG 或 Unicode 符号（如▼），并确保其颜色来自currentColor -
input[type="password"]：光标不可见？加caret-color: currentColor -
placeholder：伪元素::placeholder必须单独设color: GrayText，系统不会继承父级 color -
label与input关联：必须用for/id显式绑定，不能靠包裹；否则高对比下 label 文字可能被压暗，而 input 仍无反馈
容易被忽略的细节：语义结构与焦点管理
高对比模式本身不破坏 HTML 结构，但会放大语义缺失的问题。比如一个用 div 模拟的按钮，在高对比下既没有系统赋予的 ButtonFace 背景，也没有键盘焦点逻辑，屏幕阅读器完全无法识别。
- 所有交互元素必须是语义化标签：
button、a[href]、input[type="button"]，而非div+onclick - 自定义组件要补
role和tabindex，如role="button" tabindex="0"，并监听Enter和Space -
:focus-visible样式必须保留且足够粗（至少 2px），禁用outline: none—— 这是高对比用户唯一能依赖的导航线索 - 动态内容更新（如加载中、提交成功）要用
aria-live="polite"区域通知，不能只靠视觉变化
真正难的不是写多少 CSS，而是理解高对比模式下“谁在控制颜色”：不是你，不是浏览器，是操作系统。你的工作是放弃控制欲，用系统色关键字和语义结构去协作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
