必须用@media (forced-colors: active)，因它表示系统已强制接管颜色重绘，而prefers-contrast: high仅是用户偏好信号；失效主因是漏括号、值非active或规则被覆盖，且须用CanvasText等语义色关键词。
必须用 @media (forced-colors: active)，而不是 @media (prefers-contrast: high) —— 后者只是用户偏好信号，不触发系统级颜色接管，写了也白写。
为什么 @media (forced-colors: active) 总是不生效
DevTools 显示 “Invalid CSS media query” 是最常见症状，根源就三个：
-
@media forced-colors: active缺外层括号 → 必须写成@media (forced-colors: active) - 值写成
true、on或high→ 只有active是合法值 - 规则被更早的通用样式覆盖 → 它必须放在
src/styles.css文件末尾，或包裹在@layer base里（Tailwind 用户尤其要注意，@layer utilities里写会被 JIT 跳过）
@media (forced-colors: active) 下能用什么颜色值
所有硬编码色全部失效：#000、rgb(0,0,0)、hsl(0 0% 0%)、rgba(0,0,0,0.8) 都会被浏览器无视。你只能用操作系统定义的语义关键词：
-
CanvasText（主文本色，Windows 黑底高对比下是纯白） -
ButtonText（按钮文字） -
ButtonFace（按钮背景） -
Highlight（聚焦/选中项背景） -
HighlightText（聚焦项内文字） -
GrayText（禁用态文字）
注意：transparent 在该模式下可能映射为不可见色，应显式替换成 Canvas 或 ButtonFace；!important 无效，系统级颜色优先级高于作者样式表。
按钮、链接、SVG 这些关键元素怎么写才不糊成一片
高对比度模式下，background-color 和 box-shadow 会被强制剥离，只靠颜色区分的 UI 会彻底失去结构。重建视觉锚点的关键是：别只依赖背景，要加边框、轮廓或语义化状态标记。
- 按钮必须同时声明
background-color: ButtonFace和border: 2px solid ButtonText（不能只靠 background） - 链接除了
color: LinkText，建议加text-decoration: underline或outline: 2px solid Highlight - SVG 图标默认会被重映射，如需保留设计意图，得加
forced-color-adjust: none，但必须同步显式设置fill和stroke，比如fill: Highlight；Safari 17.4+ 还需额外加color-scheme: light dark
移动端真机验证为什么总失败
iOS Safari 直到 17.4+ 才支持 forced-colors: active，且必须**同时开启三项系统设置**：增加对比度 + 降低透明度 + 使用灰度。只开“增加对比度”只会触发 @media (prefers-contrast: high)，不会清空 background-image 或降级 box-shadow。Android Chrome 120+ 支持，但厂商定制系统里开关路径各异——DevTools 的 “Emulate forced colors” 功能只模拟偏好，不模拟真实接管行为，真机验证是唯一可靠方式。
最容易被忽略的是：系统级强制颜色接管不是“换一套配色”，而是直接重绘整个渲染管线。一旦 @media (forced-colors: active) 匹配，linear-gradient()、filter、opacity 全部退化，background-image 消失，outline-offset 却仍有效——这些细节不实测根本想不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
