用@media (forced-colors: active)检测最可靠，它响应系统高对比主题而非用户偏好；背景色等会被强制覆盖，应改用ButtonFace等系统关键词适配，而非!important或forced-color-adjust:none。
如何检测系统是否启用了高对比度模式
用 forced-colors 媒体查询是最直接、标准的方式。它不是靠 JS 读取系统设置，而是由浏览器根据操作系统实际启用状态实时响应，兼容性也足够（Chrome 109+、Edge 109+、Firefox 126+ 支持，Safari 尚未支持）。
常见错误是误用 prefers-contrast —— 它只反映“用户偏好对比度高低”，不等于当前界面真处于高对比度模式；而 forced-colors 才是真正触发 Windows 高对比主题、macOS “增加对比度” + “降低透明度” 组合后的渲染状态。
-
@media (forced-colors: active)是唯一可靠的检测条件 - 不要混用
(prefers-contrast: high)替代，两者语义和触发场景不同 - 测试时务必在系统级开启高对比主题（如 Windows 设置 → 辅助功能 → 高对比度），而非仅调高浏览器缩放或改字体
background-color 在 forced-colors 模式下会被强制覆盖
这是最常被忽略的坑：只要启用了高对比度模式，浏览器会无视你写的 background-color，统一替换成系统定义的 Canvas、ButtonFace 等语义色。哪怕你写 !important 也没用。
所以别试图“保留原背景色”，得接受系统接管，并主动适配：
- 用
forced-color-adjust: none可以禁用强制重绘，但仅限极少数必要场景（如图表中的关键色块），且会破坏可访问性合规 - 更稳妥的做法是，在
@media (forced-colors: active)中显式重设background-color为系统色关键词，比如background-color: ButtonFace - 避免用十六进制或 RGB 值写死背景，它们在高对比模式下必然失效
哪些 CSS 属性在 forced-colors 下仍可控
不是所有样式都会被覆盖。系统只强制重绘部分语义化属性，其余仍可自定义，这对保持基本可用性很关键。
- 文字颜色：
color默认被强制为ButtonText，但你可以手动设为LinkText、HighlightText等系统关键词 - 边框：
border-color会被重置，但border-style和border-width仍生效 - 阴影、渐变、
background-image全部被清空 —— 别指望它们在高对比模式下可见 -
outline和box-shadow在聚焦态中尤其重要，建议在forced-colors: active下用outline: 2px solid Highlight显式强化焦点
实际适配示例：一个按钮的双模式写法
下面是一个兼顾默认样式和高对比模式的按钮写法，重点在“用系统色关键词替代具体值”和“保留可识别的视觉结构”：
button {
background-color: #007bff;
color: white;
border: 1px solid #007bff;
}
@media (forced-colors: active) {
button {
background-color: ButtonFace;
color: ButtonText;
border-color: ButtonText;
outline: 2px solid Highlight;
}
}
注意：这里没用 forced-color-adjust: none，也没试图保留蓝色背景 —— 而是让按钮回归系统语义，同时用 outline 强化交互反馈。高对比模式下用户依赖轮廓线和文字对比，而不是色块本身。
真正难的不是写对媒体查询，而是放弃对视觉一致性的执念，转而信任系统色关键词的语义表达力。一旦开始用 Canvas、Field、Mark 这类词代替 #f8f9fa，适配就自然了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
