必须用@media (forced-colors: active)才能生效，漏括号、写成forced-colors: true或prefers-contrast: high均无效；windows高对比度模式或macos增加对比度开启后，chrome 100+等现代浏览器才注入该环境。
forced-colors媒体查询怎么写才生效
必须用@media (forced-colors: active)，不能漏括号、不能写成forced-colors: true或prefers-contrast: high——后者是另一个媒体特性，不触发系统级高对比度强制渲染。Windows“高对比度模式”和macOS“增加对比度”开关开启后，浏览器（Chrome 100+、Edge 100+、Firefox 106+、Safari 17.4+）才会注入forced-colors: active环境。
常见错误现象：
— 页面没变色，但系统确实开了高对比度
— 控制台报Invalid CSS media query
— 样式被覆盖，但检查发现规则根本没匹配
实操建议：
• 把@media (forced-colors: active)放在CSS末尾，避免被更早的通用规则覆盖
• 不要嵌套在@supports里——forced-colors不是CSS特性，不支持@supports检测
• 开发时用Chrome DevTools → Rendering面板勾选Emulate forced colors快速验证
哪些CSS属性在forced-colors下会被忽略
系统强制接管颜色后，color、background-color、border-color、outline-color这些直接设颜色的属性基本失效；但background-image、filter、box-shadow也会被清空或降级——不是bug，是规范行为。
使用场景：你想保留一个图标语义，但又不想让它在高对比度下消失
实操建议：
• 用svg内联定义fill，并加forced-color-adjust: none（仅对SVG元素有效）
• 对关键文字，改用color: CanvasText或color: ButtonText这类系统语义色关键词，而非#000
• 避免依赖background: linear-gradient()做视觉区分，它在forced-colors: active下会退化为单色
如何安全地覆盖默认强制颜色
不能靠!important硬顶——系统级强制颜色优先级高于作者样式表。唯一可控出口是forced-color-adjust: none，但它只对部分元素生效，且有兼容性风险。
常见错误现象：
— 加了!important还是被覆盖
— forced-color-adjust: none在Firefox里不生效
— 某些按钮文字突然看不见（因为CanvasText在深色主题下是白色，背景也是白色）
实操建议：
• 仅对明确需要自定义颜色的UI组件（如品牌logo SVG、状态指示icon）启用forced-color-adjust: none
• 必须配合color-scheme: light dark声明，否则Safari可能拒绝应用forced-color-adjust
• 在@media (forced-colors: active)块内，用color: Link、background-color: Field等语义色关键词替代手写HEX值
• 测试时切换不同系统配色方案（比如Windows高对比度#1 vs #2），ButtonFace在不同方案下实际RGB不同
JavaScript怎么检测forced-colors状态
用window.matchMedia('(forced-colors: active)').matches，别用CSS.supports('forced-colors', 'active')——这个永远返回false。
性能影响：该媒体查询响应实时，系统切换高对比度时会触发change事件，但无重排重绘开销。
实操建议：
• 监听matchMedia的addEventListener('change', ...)，而不是轮询
• 不要在DOMContentLoaded里一次性读取，需考虑用户中途开启/关闭
• 若需动态加class（如html.forced-colors），注意避免FOUC：初始HTML就带class="forced-colors"，再用JS移除/添加更稳妥
• Safari 17.4+才支持该API，旧版需回退到prefers-contrast粗略判断
Canvas不是总等于背景白，它随系统主题变；Field也不一定适合输入框，得看当前高对比度方案定义。这点没法自动化，只能手动对照系统设置预览。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
