必须用@media (forced-colors: active)检测系统级高对比度模式，因它表示Windows或macOS已强制接管渲染；漏括号、值写true或混用prefers-contrast均报错；Chrome109+等支持，旧Safari不识别；color/background-color被无视，须改用ButtonFace等系统色。
必须用 @media (forced-colors: active)，其他写法全无效。 它不是“偏好”，是系统已接管渲染的明确信号——Windows 高对比主题或 macOS “增加对比度+灰度”开启后，浏览器才会注入这个环境。漏括号、值写错、混用 prefers-contrast，CSS 规则直接不生效。
为什么 @media forced-colors: active 会报错？
常见错误写法在 DevTools 里显示 Invalid CSS media query：
-
@media forced-colors: active—— 漏掉外层括号，语法非法 -
@media (forced-colors: true)—— 值必须是active，不是布尔值 -
@media (prefers-contrast: high)—— 这是用户偏好，不触发强制重绘，color和background-color仍可用，但高对比用户实际看到的页面可能完全不同
怎么写才真正生效？
规则必须满足三个硬条件：
- 放在
src/styles.css文件末尾，或包裹在@layer base之后，否则容易被前面的通用规则覆盖 - 目标浏览器需为 Chrome 109+、Edge 109+、Firefox 126+、Safari 17.4+；旧版 Safari 不识别该媒体查询
- 本地模拟不可靠：Chrome DevTools 的 “Emulate forced colors” 只模拟
prefers-contrast，不会清空background-image或降级box-shadow，真机验证才是唯一标准
color 和 background-color 在里面还能用吗？
不能。只要 @media (forced-colors: active) 生效，你写的 color: #333 或 background-color: #f0f0f0 就会被浏览器无视——它会强制替换成 CanvasText、ButtonFace 等系统语义色。!important 无效，linear-gradient() 和 box-shadow 同样退化或消失。
立即学习“前端免费学习笔记（深入）”；
正确做法是主动适配：
- 按钮文字用
color: ButtonText，背景用background-color: ButtonFace - 警告区域设
color: HighlightText+background-color: Highlight - 表单控件必须显式加边框：
input, select { border: 2px solid ButtonText; } - SVG 图标要保留原意，得加
forced-color-adjust: none（Safari 下还需配合color-scheme: light dark声明）
最容易被忽略的是：这个媒体查询不是“锦上添花”，而是 Windows 强制色彩主题（如“高对比度黑色”）下保障可读性的底线。不写它，只靠 prefers-contrast，等于默认用户永远不会开系统级高对比——而现实中，这是辅助功能用户的刚需入口。
