prefers-contrast: high 仅响应系统高对比开关（如Windows主题、macOS设置），不识别屏幕类型或环境光；它仅提示用户偏好，CSS仍生效，需显式用系统色关键字（如CanvasText）覆盖样式，且须置于CSS末尾或@layer base后以防覆盖。
prefers-contrast 媒体查询不能“根据屏幕类型”调整调色板，它只响应系统级高对比度开关（如 Windows 高对比主题、macOS “增加对比度”），且不会自动改写你的颜色——必须显式用 CSS 规则覆盖。
为什么 prefers-contrast 不是屏幕识别器
它不区分 OLED、LCD 或分辨率，也不感知环境光或亮度传感器。浏览器只在系统明确启用高对比模式时才触发 (prefers-contrast: high)，此时会强制重绘页面：禁用背景图、降级渐变、覆盖硬编码的 color/background-color 值为语义化系统色（如 CanvasText）。你写的 #333 或 rgb(51, 51, 51) 全部失效，!important 和 JS 设置也无效。
怎么用 @media (prefers-contrast: high) 安全接管调色板
- 必须把规则放在 CSS 文件末尾或
@layer base之后，否则可能被前面的通用规则覆盖 - 只用系统颜色关键字：
CanvasText替代正文色，ButtonFace替代卡片背景，Highlight替代选中态——别混搭，比如color: GrayText配background-color: ButtonFace可能导致文字不可见 - 禁用所有依赖视觉层次的样式：删掉
box-shadow、opacity、linear-gradient()，它们在高对比下会被清空或降级为单色 - 确保文字有硬性对比：用
outline: 2px solid ButtonText给可聚焦元素加轮廓，比依赖border更可靠
和 forced-colors: active 的关键区别
@media (prefers-contrast: high) 表示“用户偏好高对比”，但浏览器尚未接管渲染；而 @media (forced-colors: active) 才是真正进入系统强制重绘阶段。两者常共存，但行为不同：
-
prefers-contrast: high下，你的 CSS 仍生效，只是建议你主动适配 -
forced-colors: active下，硬编码颜色值被无条件替换，唯一可控方式是显式声明color-scheme: light dark并用系统关键字 - Safari 17.4+ 才支持
forced-colors: active，旧版 Safari 完全忽略，得靠prefers-contrast降级兜底
最易被忽略的一点：高对比模式下，font-weight 必须用数字（如 700），不能用 bold；字号建议 ≥16px，小字号加粗后边缘锯齿更明显，反而降低可读性。
立即学习“前端免费学习笔记（深入）”；
