必须用@media (forced-colors: active)检测系统级高对比度强制渲染，因它表示系统已真实接管颜色重绘，而prefers-contrast: high仅表用户偏好，不触发强制替换；漏括号、值错误或未在系统开启高对比度均导致失效。
直接用 @media (forced-colors: active) 覆盖变量值，而不是靠 @media (prefers-contrast: high) 微调——后者常无效，前者才是系统真正接管渲染的信号。
为什么 @media (prefers-contrast: high) 基本没用
它只是“用户开了高对比开关”，但浏览器未必执行，更不保证颜色被系统重绘。实测中，90% 的失效案例都卡在这几个点：
- 开发时没在系统级开启高对比度（Windows：
Left Alt + Left Shift + Print Screen；macOS：系统设置 → 辅助功能 → 显示 → 增加对比度） - 写了
@media prefers-contrast: high（漏括号）或旧版 Safari（@media (prefers-contrast) - 用了
rgba()、hsla()或带 alpha 的十六进制色（如#00000080），这些值不会被系统接管，对比度实际仍不足 - 样式被更高 specificity 规则覆盖，或被
!important干扰——高对比模式下它可能失效
@media (forced-colors: active) 必须这么写
这是 Windows 高对比主题、macOS 强制对比等场景下真正生效的媒体查询。关键不是“换颜色”，而是用系统语义关键词兜底：
- 颜色必须写
CanvasText、ButtonText、HighlightText等，不能是#000或hsl(0,0%,20%) -
Canvas和CanvasText是关键字，不是字符串，**不能加引号** - 必须和
@media (prefers-color-scheme: dark)分开写，不能合并成一个块 - 兜底规则要放在所有主题定义之后，确保它能覆盖前面的
:root变量
正确示例：
:root {
--color-bg: hsl(0, 0%, 100%);
--color-text: hsl(0, 0%, 20%);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: hsl(0, 0%, 10%);
--color-text: hsl(0, 0%, 90%);
}
}
@media (forced-colors: active) {
:root {
--color-bg: Canvas;
--color-text: CanvasText;
}
}
变量声明必须带回退值，且不能嵌套引用
var(--color-text) 在 forced-colors 模式下如果未定义，会退成透明或黑色，UI 直接崩。所以：
- 每个
var()必须带合法回退值：color: var(--color-text, #333); - 回退值不能是
unset或initial——它们不是颜色，无法渲染 - 禁止在
:root中写--color-text: var(--color-primary);，部分旧版 Safari 解析失败 - 伪元素（
::before）、input::placeholder、SVG 的fill属性都得显式加var()，漏一处，高对比下那块就卡死
按钮、表单、焦点框这些地方最容易翻车
系统强制重绘后，很多默认样式会被清空，必须手动补全：
- 自定义
appearance: none的<select></select>在 Edge 高对比下会消失，必须显式设border: 2px solid currentColor - 焦点框常被系统清空，补
outline: 2px solid CanvasText才能看见 - SVG 图标颜色会被忽略，改用
fill: CanvasText或stroke: ButtonText -
text-shadow统一设为none，避免意外渲染 - 绝对不要改
background-color—— 系统已强制设为纯色，强行覆盖反而让文字不可读
最常被忽略的是：禁用态（:disabled）和悬停态（:hover）也得用变量，否则高对比下按钮颜色永远不变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
