必须使用@media (forced-colors: active)检测真实高对比度状态，因它表示系统已强制接管渲染，而prefers-contrast: high仅表用户偏好；Chrome 109+、Edge 109+、Firefox 126+、Safari 17.4+支持，旧版Safari不识别；常见错误写法会导致“Invalid CSS media query”；background-color和color在该模式下被无视，应改用ButtonFace、ButtonText等系统色；SVG需forced-color-adjust: none（Safari需配合color-scheme声明）；须与prefers-contrast分层配合，实现健壮适配。
必须用 @media (forced-colors: active) 才能检测到真实高对比度状态
prefers-contrast: high 只是用户“偏好”，而 forced-colors: active 才代表系统**已强制接管渲染**——比如 Windows 高对比主题开启后，浏览器真的把你的 color 和 background-color 全部替换成 CanvasText、ButtonFace 这类系统色。Chrome 109+、Edge 109+、Firefox 126+ 已稳定支持，Safari 17.4+ 开始支持，但旧版 Safari 仍不识别。
常见错误写法：@media forced-colors: active（漏括号）、@media (forced-colors: true)（值错误）、@media (prefers-contrast: high)（语义错位）。这些都不会匹配成功，DevTools 里会显示 “Invalid CSS media query”。
实操建议：
- 在
src/styles.css最末尾或@layer base之后单独写一块原生 CSS，避免被其他规则覆盖 - 开发时用 Chrome DevTools → Rendering 面板勾选 Emulate forced colors 快速验证
- 上线前务必在真实系统中测试：Windows 设置 → 辅助功能 → 高对比度；macOS 系统设置 → 辅助功能 → 显示 → 增加对比度 + 降低透明度
background-color 和 color 在 forced-colors 下直接失效，别硬顶
只要 @media (forced-colors: active) 生效，你写的 background-color: #f0f0f0 或 color: #333 就会被浏览器无视——它会强制换成 Canvas、ButtonFace、CanvasText 等系统定义的关键字色。加 !important 没用，这是规范行为，不是 bug。
立即学习“前端免费学习笔记（深入）”；
正确做法是主动适配系统语义，而不是对抗它：
- 按钮背景改用
background-color: ButtonFace，文字用color:ButtonText - 警告文本可设为
color: HighlightText，配合background-color: Highlight - 禁用
background: linear-gradient()和box-shadow，它们在 forced-colors 下退化为单色或完全消失
SVG 图标和自定义边框需要显式控制 forced-color-adjust
默认情况下，SVG 的 fill 和 stroke 也会被系统重映射，导致图标变灰或不可见。只有加 forced-color-adjust: none 才能保留原样式，但它只对 SVG、button、textarea 等少数元素生效，且有兼容性限制。
关键前提：forced-color-adjust: none 在 Safari 中必须配合 color-scheme: light dark 声明在根元素上，否则直接忽略。Firefox 对该属性支持仍不稳定，慎用于核心交互控件。
实操建议：
- 品牌 logo 类 SVG 可加内联样式：
<svg style="forced-color-adjust: none"> - 按钮边框别依赖
border-color，改用border: 2px solid currentColor，再配合color: ButtonText - 纯装饰性图标才考虑
forced-color-adjust: none；功能性图标（如关闭按钮 ×）应改用 Unicode 字符或 border 构建的形状
不要只靠 forced-colors，要和 prefers-contrast 分层配合
@media (forced-colors: active) 是兜底，响应“已经强制”的事实；@media (prefers-contrast: high) 是渐进增强，响应“用户倾向高对比”的信号。两者触发条件不同、浏览器支持时间不同、适用场景也不同。
比如 Safari 16.4+ 支持 prefers-contrast: high，但直到 17.4+ 才支持 forced-colors: active；而某些 Android WebView 根本不触发 prefers-contrast，却能识别 forced-colors。
真正健壮的写法是分层覆盖：
- 基础样式：正常颜色 + 足够对比度
- 加一层
@media (prefers-contrast: high)：强化边框、禁用背景图、加文字描边 - 再加一层
@media (forced-colors: active)：切换为系统语义色、重置所有颜色声明、显式控制 SVG 和 outline
最容易被忽略的是：系统级高对比度下，用户可能用的是“黑底黄字”或“白底蓝字”，你的样式必须放弃预设色值，完全交由 CanvasText、Highlight 这类关键字动态决定——这才是适配的核心，不是加个媒体查询就完事了。
