必须用@media (forced-colors: active)，它是唯一能准确检测系统强制接管颜色渲染的媒体查询；其他写法如漏括号、值错误或混用prefers-contrast均失效，且必须置于CSS末尾、使用无引号系统语义色、为每个var()提供可访问回退值。
必须用 @media (forced-colors: active)，其他写法基本都不可靠。 它是目前唯一能准确反映“系统已强制接管颜色渲染”的信号，@media (prefers-contrast: high) 只表示用户偏好，不等于界面真被重绘。
为什么 @media (forced-colors: active) 是唯一可靠判断依据
Windows 高对比主题、macOS “增加对比度 + 降低透明度 + 使用灰度”三者同时开启时，浏览器才会真正剥离你的 color 和 background-color，并代之以 CanvasText、ButtonFace 等系统语义色。这个过程只有 forced-colors: active 能捕获——prefers-contrast 在这些场景下可能为 no-preference 或 high，但无法保证样式已被接管。
常见误判来源：
-
@media (prefers-contrast: high)在仅开启“增加对比度”（未配其他开关）的 macOS 上会触发，但此时forced-colors不生效，你的background-color: #fff仍起作用，UI 实际没变 -
@media forced-colors: active（漏括号）或@media (forced-colors: true)（值错误）直接导致 DevTools 报 “Invalid CSS media query”，整块规则静默失效 - 在 Chrome DevTools Rendering 面板里勾选 “Emulate forced colors”，只模拟
prefers-contrast行为，不会清空box-shadow或替换background-image，不能替代真机验证
@media (forced-colors: active) 的硬性写法与位置要求
它不是可选特性，而是有严格语法和加载顺序约束的媒体查询：
- 唯一合法写法：
@media (forced-colors: active)，括号、冒号、值active缺一不可 - 不能嵌套在
@supports里：@supports (forced-colors: active)永远返回false - 必须放在 CSS 文件末尾，或包裹在
@layer base内；若写在通用:root定义之后、又在暗色模式查询之前，极易被覆盖 - Tailwind 用户注意：不要在
@layer utilities或@layer components里写这条规则，JIT 编译器会跳过它
怎么验证它真在起作用
光看 DevTools 是否报错不够，得确认样式是否被系统接管：
- 打开真实系统设置：Windows → 辅助功能 → 高对比度；macOS → 辅助功能 → 显示 → 同时开启“增加对比度”“降低透明度”“使用灰度”
- 检查元素 computed 样式：原本写的
color: #333应该完全消失，取而代之的是color: CanvasText（无引号）这类关键词 - 手动测试语义色是否生效：
color: CanvasText必须不加引号，写成"CanvasText"或Canvastext（大小写错）都会让变量无效 - 如果用了 CSS 变量，每个
var(--text-primary)都要带回退值：color: var(--text-primary, #333)，否则变量未重定义时会退到transparent或不可读色
最容易被忽略的一点：Grid 或 Flex 布局本身没问题，但如果你在多个具体选择器（比如 .card-header、button[disabled]）里直接写了 color 或 background-color，就必须在 @media (forced-colors: active) 块里也给它们单独加兜底声明——仅重定义 :root 里的变量是不够的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
