forced-color-adjust: none 仅局部退出系统强制重绘，必须配合显式颜色声明才生效；单独使用无效，因系统仍覆盖未声明的颜色值。
forced-color-adjust: none 不能“适配”高对比度模式，它只能局部退出系统强制重绘——但必须配合显式颜色声明才有效，否则等于没写。
为什么 forced-color-adjust: none 单独加没用
浏览器在 Windows 高对比度或 macOS 强制配色下，会直接覆盖 color、background-color 等值。此时 forced-color-adjust: none 只是“开闸”，不提供“水”（颜色值）就毫无意义：
-
color未声明 → 浏览器仍用ButtonText或CanvasText，不是你写的值 -
background-color: transparent→ 系统填Canvas，常与文字色撞车导致不可读 -
border: 1px solid #000简写 →border-color被接管，边框可能消失
哪些元素适合加 forced-color-adjust: none
这不是通用开关，而是有明确语义且可访问性不受损的特例场景：
- 品牌 SVG 图标：
fill和stroke改用ButtonFace、HighlightText等系统色关键词 - 状态徽章（如 success ✅）：
.status-success { color: HighlightText; background-color: Highlight; } - 带明确语义的 icon 容器，且父级已设
color-scheme: light dark - 不推荐用于按钮、输入框、导航栏——它们应优先遵循系统配色逻辑
@media (forced-colors: active) 才是真正检测高对比度的唯一方式
@media (prefers-contrast: high) 只表示用户偏好，@media (forced-colors: active) 才代表系统已强制接管渲染。常见错误写法会导致整块 CSS 失效：
- 错：
@media forced-colors: active（缺括号）、@media (forced-colors: true)（值非法） - 对：
@media (forced-colors: active)（唯一合法语法） - 该媒体查询不能放进
@supports，因为forced-colors不是 CSS 特性，@supports (forced-colors: active)永远返回 false - 必须放在 CSS 文件末尾或
@layer base之后，否则易被更早规则覆盖
容易被忽略的兼容性硬约束
这个能力在 Safari 中尤其脆弱：
- Safari 直到 17.4+ 才支持
forced-colors: active，且要求根元素有color-scheme: light dark，否则forced-color-adjust会被忽略 - Chrome/Edge/Firefox 支持较好（Chrome 109+、Firefox 126+），但旧版仍需降级处理
- 移动端真机验证必须开启 iOS 三开关组合（增加对比度 + 降低透明度 + 使用灰度），仅开一项无效
- 所有
box-shadow、background-image、opacity在forced-colors: active下直接清空，别试图保留
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
