必须叠加@media (prefers-contrast: high)和@media (forced-colors: active)才能真正适配高对比度模式；前者仅表用户偏好，后者才代表系统已强制接管渲染，此时硬编码颜色值全部失效，须改用CanvasText、ButtonFace等系统语义色。
直接结论：用 @media (prefers-contrast: high) 微调关键视觉属性，但必须叠加 @media (forced-colors: active) 才算真正生效；硬编码颜色值（如 #000、rgb(0,0,0)）在高对比度下全部失效，只能用 CanvasText、Highlight 等系统语义色。
为什么写了 @media (prefers-contrast: high) 却没反应
最常见原因不是语法错，而是环境或写法不匹配：
- 开发时没在系统级开启高对比度（Windows：按
Left Alt + Left Shift + Print Screen；macOS：系统设置 → 辅助功能 → 显示 → 增加对比度） - 用了
rgba()、hsla()或带 alpha 的十六进制色（如#00000080），这些值不会被系统接管 - 漏了括号，写成
@media prefers-contrast: high，或浏览器太旧（Safari 16.4 之前只认@media (prefers-contrast)） - 规则被更高 specificity 的样式覆盖，或被
!important干扰——高对比度模式下它可能失效
@media (forced-colors: active) 必须和 prefers-contrast 配合用
prefers-contrast: high 是用户“开了开关”，forced-colors: active 是系统“已经动手重绘”。后者才是 Windows 高对比主题实际触发的机制：
- Windows 高对比主题下，浏览器根本不会执行
prefers-contrast: high的 CSS，而是直接启用forced-colors: active规则 -
forced-colors: active会强制替换你的color、background-color、border-color，但前提是你的规则能真正匹配并应用上 - 常见失效：规则写在通用样式前面，被后续无条件的
color: #333覆盖；或语法错误导致 DevTools 报 “Invalid CSS media query”
高对比度下该改哪些属性，哪些绝对不能碰
这不是换主题，是补足系统接管后丢失的辨识度。重点加固这几类：
立即学习“前端免费学习笔记（深入）”；
-
border-width和border-color：自定义appearance: none的<select>在 Edge 高对比下会消失，必须显式设border: 2px solid currentColor -
outline和outline-offset：焦点框常被清空，补outline: 2px solid CanvasText才能看见 -
fill和stroke：SVG 图标颜色会被忽略，改用fill: CanvasText或stroke: ButtonText -
text-shadow：系统可能禁用阴影，统一设text-shadow: none避免意外渲染 -
绝对避免改
background-color：系统已强制设为纯色，强行覆盖反而让文字不可读
颜色值必须用语义关键词，且顺序和声明方式有硬要求
所有硬编码颜色在 forced-colors: active 下都会被忽略：
- 可用值只有：
CanvasText、Canvas、ButtonFace、Highlight、ButtonText等——它们随系统主题自动映射 - 不能用
var(--text-primary)，除非这个变量本身定义为CanvasText；也不能在媒体查询里定义新变量名（如--text-high-contrast），浅色环境读不到就 fallback 成灰 -
:root里每个变量都得有浅色默认值，漏一个（比如没定义--text-secondary），深色+高对比下var(--text-secondary)就 fallback 到浏览器默认灰，撞上黑背景直接低对比 -
@media (forced-colors: active)块必须放在 CSS 文件末尾，或置于@layer base之后，否则容易被覆盖
真正难的不是写对媒体查询，而是确保每种系统接管路径（prefers-color-scheme、prefers-contrast、forced-colors）下的语义色都连通，且没有一处漏掉 fallback。稍有断链，键盘用户或视力障碍者就卡在不可见的边框、看不见的焦点、或糊成一片的文字里。
