必须使用@media (forced-colors: active)检测系统强制渲染，它在Win高对比主题或macOS增加对比度+灰度开启时由浏览器注入；Chrome109+、Edge109+、Firefox126+、Safari17.4+支持，旧版Safari不识别；漏括号、值错误或误用prefers-contrast均导致失效；该环境下color/background-color等必然被系统语义色（如ButtonFace）覆盖，!important无效；应主动适配语义色、显式设边框、对SVG加forced-color-adjust: none（需配合color-scheme且仅限特定元素）；DevTools模拟不可靠，须真机验证；规则需置于CSS末尾或@layer base后以防被覆盖。
必须用 @media (forced-colors: active)，不是 @media (prefers-contrast: high)
前者才是检测系统**已强制接管渲染**的唯一可靠方式；后者只是用户偏好信号，不保证样式被重绘。Windows 高对比主题（如“高对比度#1”）、macOS “增加对比度”+“使用灰度”组合开启后，浏览器才会注入 forced-colors: active 环境。Chrome 109+、Edge 109+、Firefox 126+、Safari 17.4+ 支持，旧版 Safari 不识别。
常见错误写法直接导致规则不生效：
-
@media forced-colors: active（漏括号）→ Invalid CSS media query -
@media (forced-colors: true)（值错误）→ 不匹配 -
@media (prefers-contrast: high)（语义错位）→ 即使开了 Windows 高对比，也可能不触发
color 和 background-color 在 @media (forced-colors: active) 下必然失效
这不是 bug，是规范行为：系统会用 CanvasText、ButtonFace、Highlight 等语义化系统色强制替换你写的颜色值。加 !important 没用，background: linear-gradient() 和 box-shadow 同样会被清空或降级。
正确做法是主动适配系统语义：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 按钮背景改用
background-color: ButtonFace，文字用color: ButtonText - 警告文本设为
color: HighlightText，配合background-color: Highlight - 表单控件必须显式加边框：
input, select { border: 2px solid ButtonText; } - 避免依赖
background-image或自定义渐变做视觉区分
SVG 图标和自定义边框需要显式控制 forced-color-adjust
默认情况下，SVG 的 fill 和 stroke 也会被系统重映射，图标可能变灰或不可见。要保留原意，需对 SVG 元素加 forced-color-adjust: none：
svg {
forced-color-adjust: none;
}
但注意两点：
- Safari 要求父容器同时声明
color-scheme: light dark，否则forced-color-adjust: none无效 -
forced-color-adjust: none只对<svg>、<button>、<textarea>等少数元素生效，不能滥用在普通<div>上 - 内联 SVG 更稳妥，比如
<svg style="forced-color-adjust: none">...</svg>
开发时别信 DevTools 模拟，真机验证才准
Chrome DevTools → Rendering 面板里的 “Emulate forced colors” 只模拟 forced-colors: active，但不会真正剥离 background-color 或重映射 color，容易误判样式 OK。
必须在真实系统中测试：
- Windows：设置 → 辅助功能 → 高对比度 → 开启任意主题（快捷键
Left Alt + Left Shift + Print Screen） - macOS：系统设置 → 辅助功能 → 显示 → 勾选“增加对比度”+“降低透明度”
- 验证时重点看：按钮有没有边界、输入框焦点是否可见、SVG 图标是否还在、文字有没有和背景同色（比如
CanvasText落在白色背景上）
最容易被忽略的是：forced-colors: active 规则必须放在 CSS 文件末尾（或 @layer base 之后），否则会被更早的通用规则覆盖——哪怕它匹配了，也压不住前面的 background-color: #fff。
