必须用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下会退化为单色 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能