必须用@media (prefers-contrast)才兼容旧版浏览器，且需系统开启高对比度模式；颜色应使用CanvasText等语义化关键词，避免rgba/HSLA及!important。
prefers-contrast媒体查询怎么写才生效
必须用 @media (prefers-contrast)，不能漏括号，也不能写成 @media prefers-contrast 或 @media (prefers-contrast: high) —— 后者在 Safari 16.4+ 才支持，旧版只认布尔值。
实际生效需要用户开启系统级高对比度模式：Windows 是「设置 > 辅助功能 > 对比度主题」，macOS 是「系统设置 > 辅助功能 > 显示 > 增加对比度」，iOS/iPadOS 在「辅助功能 > 显示与文字大小 > 高对比度」。浏览器本身不模拟该特性。
-
@media (prefers-contrast: high)：较新写法，部分浏览器（如 Chrome 120+）已支持，但 Safari 16.4 之前会完全忽略 -
@media (prefers-contrast)：兼容性更好，只要系统启用了高对比度，就会匹配（等价于high） - 不要混用
prefers-color-scheme和prefers-contrast的嵌套逻辑——它们是独立触发的，叠加判断需用and显式连接
高对比度下CSS颜色该重置哪些属性
不是所有颜色都需要改。系统高对比度模式会强制覆盖页面中许多颜色（尤其是文本、边框、背景），但仅限于使用语义化颜色关键词（如 black、blue、transparent）或未指定 alpha 的十六进制值（如 #000）。而带 alpha 的 rgba(0,0,0,0.8) 或 HSLA 值常被忽略，导致对比度不足。
- 必须重置：
color、background-color、border-color、outline-color - 建议重置：
fill（SVG 图标）、stroke（SVG 轮廓）、box-shadow（阴影可能消失或变弱） - 避免用
!important强行覆盖——它在高对比度模式下可能被系统策略无视，优先靠 specificity 和媒体查询层级控制
为什么写了prefers-contrast却没效果
最常见原因是开发环境没开系统高对比度，或用了不被识别的颜色写法。Chrome DevTools 的 Rendering 面板里有「Emulate CSS media features」选项，但它的 prefers-contrast 模拟仅在部分版本稳定（Chrome 119+ 推荐），且不会触发系统级颜色替换逻辑，所以真机测试不可替代。
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了
hsl(0 0% 0%)这类函数式颜色——它们不会被高对比度模式接管，必须显式改成black或CanvasText - 确认元素没有被
forced-colors: active干扰（这是另一个更激进的媒体查询，优先级更高） - 某些 CSS-in-JS 库（如 styled-components）若未启用 SSR 或未正确透传媒体查询，会导致服务端渲染时丢失该块样式
对比度不足时用什么颜色更稳妥
别硬凑 WCAG AA/AAA 数值。高对比度模式下，系统会把页面映射到一组受限调色板（如 Windows 的 High Contrast Black/White/Default），直接用系统语义色最可靠：比如 CanvasText（前景文字）、ButtonFace（按钮背景）、Highlight（选中状态）——这些是真实操作系统定义的关键词，会被原生适配。
- 文本色优先用
CanvasText，而非black或#000 - 禁用态文字可用
GrayText（Windows）或disabled（macOS 等效语义） - 避免自定义深灰（如
#333）——它在高对比度白底模式下几乎看不见
复杂点在于：不同系统提供的语义色名不一致，CanvasText 在所有主流平台都可用，但 ButtonFace 在 Firefox 中支持度略低，上线前务必在 Win/macOS/iOS 真机上交叉验证。
