forced-colors: active 会强制覆盖 color 和 background-color，使其失效；必须使用 canvastext 等语义色关键词，并严格按 @media (forced-colors: active) 书写媒体查询，避免用 rgba/hsl 或 shadow/filter 等退化属性。
forced-colors: active 会让 color 和 background-color 完全失效
只要系统启用高对比度模式（如 Windows 高对比主题），浏览器就会强制接管颜色渲染，你写的 color: #333、background-color: #fff 全部被忽略——这不是 bug，是规范行为。即使加了 !important 也没用，系统级语义色优先级高于作者样式表。
常见错误现象：
- 按钮文字在高对比模式下“消失”，因为
color: CanvasText被映射到白色，而背景也被设为白色 - 开发者工具里看到样式被划掉，但 computed 栏显示的是
CanvasText或ButtonFace，不是你的 HEX 值 - 用
transparent作背景色，结果变成纯黑或纯白，导致文字不可读
@media (forced-colors: active) 的写法必须严格正确
写错一个括号或值，整块样式就失效，DevTools 会报 “Invalid CSS media query”。唯一合法写法是：@media (forced-colors: active)。
容易踩的坑：
-
@media forced-colors: active（漏括号）→ 不匹配 -
@media (forced-colors: true)（值错误）→ 不匹配 -
@media (prefers-contrast: high)（语义不同）→ 无法响应真实强制重绘 - 把规则写在
@supports (forced-colors: active)里 → 永远不生效，因为forced-colors不是 CSS 特性，不支持@supports检测
该用什么颜色关键词替代 #000 或 rgba()
必须改用系统定义的语义色关键词，它们在高对比模式下才真正可控：
-
CanvasText：正文文字的标准色（不是固定黑/白，而是系统当前主题下的可读文本色） -
ButtonText和ButtonFace：按钮文字与背景的配对组合 -
Highlight和HighlightText：用于警示、选中等强调区域 -
InfoBackground、Mark等：按语义用途选用，而非视觉喜好
避免用 rgba(0,0,0,0.5) 或 hsl() —— 这些值会被直接丢弃，且透明度可能映射为不可见色。
forced-color-adjust: none 不是万能开关，反而容易破坏可访问性
它只对特定元素局部禁用强制配色，但需满足三个硬性条件才生效：
- 必须显式声明
color和background-color（不能是inherit或未设） - 不能用于内联样式，仅支持 CSS 规则块
- SVG 元素还需额外加
color-scheme: light dark，否则 Safari 17.4+ 会忽略它
真正适合用它的场景极少：品牌 logo SVG、带明确语义的状态 icon（如 ✅ 用 fill: HighlightText + background-color: Highlight）。主按钮、输入框、导航栏不该用——这不是“优化”，而是绕过无障碍底线。
box-shadow、text-shadow、filter、background-image 全部退化或清空，不是颜色问题，是渲染机制切换。想靠这些做视觉区分，在高对比模式下根本不存在。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
