高对比度模式与暗黑模式必须独立处理，因系统级高对比会强制重置颜色样式，需用@media (prefers-contrast: high)和@media (forced-colors: active)分别定义、置于css末尾、直接作用于html/body，并确保语义化html结构。
高对比度模式和暗黑模式不是同一回事，不能靠一个 dark class 同时解决。系统级高对比度会强制重置几乎所有颜色和背景，你写的暗黑样式大概率被清空，还可能因依赖主题 class 而彻底失效。
为什么@media (prefers-contrast: high)必须独立于data-theme
Windows 高对比主题开启后，浏览器会抹掉所有 background-color、border-color 和大部分 color 值，只保留 outline、text-decoration 和部分 font-weight。如果你把高对比规则写在 [data-theme="dark"] 里，那用户开着浅色系统主题 + 高对比开关时，这条规则根本不会匹配——因为 data-theme 还是 "light"，而媒体查询又没挂到根元素上。
- 高对比 CSS 必须直接作用于
html或body，不嵌套任何属性选择器 - 不能写成
[data-theme="dark"] @media (prefers-contrast: high) { ... }—— CSS 语法不支持这种嵌套 - 确保高对比样式表在所有主题 CSS 的最末尾加载，否则前面的
background-color会覆盖掉 outline 等关键属性
表单控件在高对比下必须用原生语义标签
高对比模式极度依赖 DOM 语义结构做焦点导航和屏幕阅读器解析。用 div[role="button"] 或 span[tabindex="0"] 模拟按钮，会导致键盘 Tab 顺序错乱、:focus 不触发 outline、VoiceOver 完全跳过该控件。
- 所有交互元素必须用原生标签：
button、input、select、label -
label必须用for属性正确关联input，不能仅靠视觉包裹 - 避免用 JS 动态替换
nav、main等语义容器为div—— 高对比下这些标签是焦点流基线
@media (prefers-contrast: high) 和 @media (forced-colors: active) 要共存
Chrome 101+ 支持 prefers-contrast，但旧版 Edge Legacy 和部分企业定制 Chromium 只认 forced-colors。后者更激进：连 SVG fill、box-shadow 都会被强制重绘，且不保证保留原有 contrast ratio。
- 两个媒体查询都要写，不能只选其一
-
forced-colors下尽量避免依赖 background-image、filter 或自定义 focus ring，它会接管渲染 - 测试时需在 Windows 设置 → 辅助功能 → 高对比度 中切换不同预设方案（如“高对比 #1”、“高对比白”），它们对 color 和 outline 的处理略有差异
最容易被忽略的是：高对比模式下，用户可能完全关闭了暗黑模式，但依然需要可操作的界面。这时候你的 dark class 不起作用，真正起效的只有那几行挂在 html 上的 @media (prefers-contrast: high) 规则——而且得确保它们没被其他样式意外覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
