CSS变量不能自动适配高对比度模式，是因为其值（如#333或rgba(0,0,0,0.8)）为静态颜色，不响应系统级prefers-contrast: high或forced-colors: active开关；系统仅识别语义关键词（如CanvasText、ButtonText），且禁用alpha通道与自定义变量赋值，必须在媒体查询中直接使用关键词声明样式，而非依赖变量。
为什么直接用CSS变量不能自动适配高对比度模式
CSS变量（--color-text、--bg-primary）本身是静态值容器，不会响应系统级高对比度开关；@media (prefers-contrast: high) 触发时，浏览器会强制重绘颜色，但若你写的变量值是 rgba(0, 0, 0, 0.8) 或 #333333，这些值会被忽略——系统只认语义关键词（如 CanvasText、ButtonText）或可被接管的原生色。所以不是变量“没生效”，而是你给它的值根本不在系统接管范围内。
必须用语义关键词替换所有硬编码颜色值
在 @media (prefers-contrast: high) 和 @media (forced-colors: active) 中，所有颜色声明必须改用系统语义关键词，且禁用 alpha 通道：
-
color: var(--text-primary, #333);→ 改为color: CanvasText; -
border-color: #666;→ 改为border-color: ButtonText; -
background-color: #f8f9fa;→ 删除或注释掉（系统已设纯白/纯黑，强行覆盖反而降低可读性） -
fill: #007bff;（SVG图标）→ 改为fill: LinkText;
注意：CanvasText 不是变量，是 CSS 关键字，不能写成 var(--text-high-contrast) —— 后者在 forced-colors 模式下可能被清空或失效。
如何让CSS变量“配合”高对比度媒体查询而不冲突
变量仍可用来组织常规主题（如深色/浅色），但高对比度分支必须独立、显式、无依赖：
立即学习“前端免费学习笔记（深入）”；
- 把高对比度规则放在
:root之后、所有组件样式之前，避免被 specificity 更高的规则覆盖 - 不要在
@media (prefers-contrast: high)里重新定义变量（如--text-primary: CanvasText），因为变量一旦被设为非语义值，后续color: var(--text-primary)就无法被系统接管 - 正确写法是：在媒体查询内直接写属性 + 语义关键词，例如：
@media (prefers-contrast: high) { .card { border: 2px solid CanvasText; } button:focus-visible { outline: 2px solid HighlightText; } } - 如果需要 JS 动态控制（比如用户手动开启高对比度开关），应监听
matchMedia('(forced-colors: active)')，而非读取变量值
容易被忽略的强制颜色兜底细节
@media (forced-colors: active) 比 prefers-contrast 更底层、更确定——Windows 高对比主题实际触发的是它，不是前者。漏掉这个媒体查询，等于没真正支持高对比度：
- 必须同时写两个媒体查询，且
forced-colors要放在后面（覆盖优先级更高） -
forced-colors下，box-shadow、filter、background-image基本失效，别试图“补阴影”或“加渐变” - 焦点框（
outline）极易消失，务必显式设置：outline: 2px solid CanvasText;，不能靠变量 fallback - 表单控件（
select、input[type=range]）在 Edge/Firefox 中 appearance 被重置后常变透明，需强制加border和color
真正难的不是写对媒体查询，而是接受：高对比度模式下，你的设计稿、品牌色、微妙的灰阶过渡全部作废——能做的只是守住文字可读、焦点可见、交互可辨这三条底线。
