@media (forced-colors: active) 是唯一可靠检测高对比度状态的方式，因其反映浏览器真实接管渲染；而 prefers-contrast: high 仅表用户偏好且不改变颜色值。
必须用 @media (forced-colors: active) 检测真实生效的高对比度状态，@media (prefers-contrast: high) 只是用户偏好信号，不能替代它。
为什么 @media (forced-colors: active) 是唯一可靠入口
Windows 高对比主题、macOS 增加对比度开关触发的，是浏览器强制接管渲染流程，此时 forced-colors 才会真正变为 active。而 prefers-contrast: high 在 Safari ≤16.4 完全不支持，且它不改变任何颜色值——只是告诉你可以“考虑”加强对比，系统并未动手重绘。
-
@media forced-colors: active（缺括号）或@media (forced-colors: true)会直接报 “Invalid CSS media query”，整块样式失效 - 该查询不能放进
@supports里检测，@supports (forced-colors: active)永远返回 false - 必须放在 CSS 文件末尾，或包裹在
@layer base内，否则容易被更早的通用规则覆盖
color 和 background-color 写死值完全无效
一旦进入 forced-colors: active 状态，所有硬编码颜色（如 #000、rgb(0,0,0)、hsl(0 0% 0%)）都会被浏览器忽略。这不是 bug，是规范行为。
- 必须改用语义色关键词：
CanvasText（正文）、ButtonText（按钮文字）、ButtonFace（按钮背景）、Highlight（警示区背景） -
transparent在该模式下可能映射为不可见色，应显式替换为Canvas或ButtonFace -
!important无效——系统级颜色优先级高于作者样式表
伪类（:hover、:focus、:active）在高对比下怎么写才不翻车
这些伪类依然能触发，但它们的样式若不匹配语义色，就会被浏览器静默重置，视觉反馈消失。
立即学习“前端免费学习笔记（深入）”；
-
:focus别只靠outline：系统可能重映射outline-color，建议双保险——outline: 2px solid Highlight+border: 1px solid ButtonText -
:active慎用transform或opacity：这两者常被降级或禁用，按下无反馈 - SVG 图标在
:hover或:focus中切换fill？必须对 SVG 元素显式加forced-color-adjust: none，否则fill会被强制转为CanvasText，图标变灰不可读 - 选择器权重必须更高：比如全局写了
.btn:focus { outline: 2px solid #007bff; }，那在媒体查询里就得用.btn:focus { outline-color: Highlight !important; }或更具体选择器，否则被覆盖
哪些属性在 forced-colors: active 下会彻底失效
不是所有样式都能“抢救回来”。有些属性一旦触发该模式，就会被浏览器直接清空或退化。
-
background-image、linear-gradient()、box-shadow、text-shadow、filter、opacity：全部退化或消失 -
border-color和outline-color失效，但border-width、border-style、outline-offset仍有效 - SVG 的
fill和stroke会被重映射，除非加forced-color-adjust: none（仅对 SVG 元素生效） - 按钮、链接、表单控件别只靠颜色区分：必须重建视觉锚点，比如加边框、调整 padding、用
border: 2px solid ButtonText
最容易被忽略的是：系统接管后，你写的颜色值不是“没生效”，而是被刻意绕过——这意味着所有依赖颜色对比的交互反馈（比如悬停变色、焦点高亮）都得用语义色+结构变化双重保障，不能只改一个 color 值就以为完事了。
