@media (forced-colors: active) 是唯一能触发系统真实接管颜色渲染的媒体查询，必须用 canvastext、buttontext 等语义关键词赋值，不可加引号或混用十六进制色值，且需单独书写、置于样式末尾。
必须用 @media (forced-colors: active) 覆盖颜色，@media (prefers-contrast: high) 基本无效——它不触发系统级颜色接管，90% 的高对比失效都卡在这儿。
为什么 @media (prefers-contrast: high) 不能用来实现高对比模式
这个媒体查询只表示“用户在系统设置里勾选了高对比偏好”，但浏览器不会强制重绘颜色，更不会把你的 #333 替换成系统语义色。实测中，即使写了它，Windows 高对比主题或 macOS 强制色彩下，页面依然显示原始色值。
常见失效原因包括：
- 开发时没真正在系统开启高对比（Windows：按
Left Alt + Left Shift + Print Screen；macOS：系统设置 → 辅助功能 → 显示 → 开启“增加对比度”） - 写了
@media prefers-contrast: high（漏括号）或旧版 Safari 不支持该语法 - 用了带 alpha 的颜色（如
#00000080、rgba(0,0,0,0.8)），这些值会被系统忽略，导致文字实际不可读 - 规则被更高 specificity 或
!important干扰——高对比模式下!important可能被绕过
@media (forced-colors: active) 必须怎么写才生效
这是唯一能触发系统真实接管颜色渲染的媒体查询。关键不是“换颜色”，而是用系统定义的语义关键词兜底，且写法极其严格：
- 颜色值必须是
CanvasText、ButtonText、HighlightText等关键字，不能加引号，也不能是#000或hsl() -
Canvas和CanvasText是保留字，不是自定义变量名，写成"CanvasText"就直接失效 - 必须和
@media (prefers-color-scheme: dark)分开写，不能合并成一个块，否则可能被解析跳过 - 兜底规则要放在所有主题定义之后（比如放在 :root 变量重定义的末尾），确保能覆盖前面的声明
正确示例：
:root {
--text-primary: #333;
--bg-surface: #fff;
}
@media (forced-colors: active) {
:root {
--text-primary: CanvasText;
--bg-surface: Canvas;
}
a {
color: LinkText;
}
button {
background-color: ButtonFace;
color: ButtonText;
}
}
Grid 布局本身不影响高对比适配，但会影响你如何组织变量
Grid 只负责排列，不参与颜色逻辑。但正因为你在 Grid 容器里大量使用 grid-area 或命名线，容易把颜色控制分散到多个选择器中，导致 @media (forced-colors: active) 覆盖不全。
推荐做法是：
- 所有颜色统一通过 CSS 自定义属性（
--color-xxx）管理，避免在.header、.sidebar等类里硬写color: #222 - 把高对比兜底集中写在
:root下，而不是每个 Grid 区域单独写媒体查询 - 避免在 Grid Item 上用
background: linear-gradient(...)或图片背景——系统不会接管它们，应改用纯色 +Canvas等关键词 - 测试时关掉 CSS，只看 HTML 结构是否仍语义清晰：如果视觉靠 Grid 拉到了顶部的
<nav></nav>其实写在 HTML 底部，那高对比下用户听到的顺序仍是错的
最容易被忽略的一点：高对比模式下，border、outline、box-shadow 这些装饰性样式几乎全部失效或被系统重置，别指望它们还能起作用。真正可靠的，只有明确声明的语义色关键词和原生语义 HTML 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
