应使用@media (prefers-contrast: high)配合@media (forced-colors: active)，因前者仅表偏好，后者才真实检测系统高对比主题启用状态，且需兼顾浏览器兼容性。
直接用 @media (prefers-contrast: high) 就能响应系统级高对比度开关，但只写这一条大概率失效——它依赖浏览器支持、系统真实开启状态，且不能替代 @media (forced-colors: active)。
怎么写 @media (prefers-contrast) 才真正匹配
这个媒体查询不是“检测用户偏好”，而是响应操作系统是否启用了高对比主题（如 Windows 高对比模式、macOS “增加对比度”+“降低透明度”）。写法必须严格：
-
@media (prefers-contrast)是兼容性最广的写法，Safari 13.1+、Firefox 95+、Chrome 101+ 都认；旧版 Safari（@media (prefers-contrast: high)，会直接忽略整块规则 - 漏括号（
@media prefers-contrast）或值写错（@media (prefers-contrast: true)）会导致 DevTools 显示 “Invalid CSS media query”，样式完全不加载 - 它不会在浏览器缩放、字体放大、暗色模式下触发——只在系统真正启用高对比主题时生效
- 开发时别靠肉眼判断，用 Chrome DevTools → Rendering → Emulate CSS media features →
prefers-contrast: high模拟（仅 Chrome 119+ 稳定），但最终必须在真实系统中验证（Windows 设置 → 辅助功能 → 高对比度）
@media (prefers-contrast: high) 和 @media (forced-colors: active) 该用哪个
两者语义不同，不能互换，也不能只选其一：
-
@media (prefers-contrast: high)表示用户“偏好高对比”，但系统未必强制接管渲染；适合做轻量适配，比如加粗边框、移除阴影、提升文字粗细 -
@media (forced-colors: active)表示系统**已强制重绘界面**（Windows 高对比主题、macOS 组合开关），此时background-color、color等几乎全被覆盖，必须用CanvasText、ButtonFace这类系统色关键词 - 常见错误是只监听
prefers-contrast，结果在真实高对比主题下文字发灰、按钮不可见——因为forced-colors优先级更高，且会无视你写的 rgba/HSLA 值 - 推荐分层写：
@media (prefers-contrast)做基础增强，@media (forced-colors: active)做兜底接管（Chrome 109+、Edge 109+、Firefox 126+、Safari 17.4+ 支持）
高对比模式下哪些 CSS 属性会被系统覆盖
不是所有样式都能靠媒体查询“改回来”，有些属性在 forced-colors: active 下直接失效：
立即学习“前端免费学习笔记（深入）”；
-
background-color、color、border-color、outline-color：会被替换成系统语义色（如CanvasText、ButtonFace），写!important也没用 -
box-shadow、text-shadow、background-image：通常被清空或降级，不要依赖它们构建视觉结构 -
fill和stroke（SVG）：需显式加forced-color-adjust: none才保留原色，但 Safari 要配合color-scheme: light dark声明才生效 - 避免用
hsl(0 0% 0%)或rgba(0,0,0,0.8)——系统只接管无 alpha 的关键字色（black）和十六进制（#000），其余可能被忽略导致对比度不足
JS 里怎么读取和监听 prefers-contrast 状态
用 window.matchMedia() 可以主动获取并监听变化，但要注意运行环境和生命周期：
-
window.matchMedia('(prefers-contrast: high)').matches返回布尔值，页面加载时即可读取，适合初始化组件或埋点 - 监听必须用
.addEventListener('change', handler)，onchange属性已被废弃，不触发 - SSR 环境（如 Next.js
getStaticProps）里直接调用会报ReferenceError: window is not defined，必须包裹在if (typeof window !== 'undefined')判断内 - 注意：CSS 媒体查询本身不触发 JS 逻辑，
matchMedia是唯一可靠方式；别用 JS 去测颜色值或 DOM 样式——既不准，又绕过系统语义
最易被忽略的点是：写了 @media (prefers-contrast: high) 却没效果，往往不是代码问题，而是开发机没开系统高对比主题，或者误以为 prefers-color-scheme 能代替它。真实适配必须在 Windows/macOS/iOS 系统设置里手动开启对应开关，并分层叠加 forced-colors 处理。
