@media (prefers-contrast: high) 仅在系统开启高对比度时触发，Chrome 101+、Firefox 95+、Safari 13.1+ 支持，旧版 Chrome 不支持。
直接用 @media (prefers-contrast: high) 媒体查询接管样式，而不是靠 JS 检测或手动加 class —— 浏览器能真实读取系统开关，这是唯一可靠路径。
怎么写 @media (prefers-contrast: high) 才真正生效
这个媒体查询只在用户开启系统级高对比度时触发（如 Windows 高对比主题、macOS “增加对比度”、iOS “智能反转”），不是所有浏览器都支持，且行为有差异：
- Chrome 101+、Firefox 95+、Safari 13.1+ 支持
prefers-contrast: high，但旧版 Chrome（ - 旧版 Chromium（尤其 Windows 上）可能只响应
@media (forced-colors: active)，它更激进：连 CSS 变量、background-image都会被系统覆盖 - 不匹配时该规则块完全不执行，不会 fallback 到默认样式 —— 所以必须写两层保险
推荐写法：
/* 主力支持 */
@media (prefers-contrast: high) {
body { border: 2px solid black; }
a, button { outline: 2px solid black; }
}
<p>/<em> 兜底旧 Chromium </em>/
@media (forced-colors: active) {
body { forced-color-adjust: none; } /<em> 允许部分自定义 </em>/
input, select, textarea { border: 2px solid ButtonText; }
}为什么不能只改 color 和 background-color
高对比度模式下，系统会强制重绘页面，把大部分背景、阴影、渐变、background-image 全部剥离，只保留少数稳定属性：
立即学习“前端免费学习笔记（深入）”；
- ✅ 稳定保留：
color、border、outline、text-decoration - ❌ 几乎必丢：
background-color、box-shadow、background-image、filter
典型翻车：按钮用 background-color: #007acc; color: white;，开启高对比后背景被清空，只剩白字浮在白底上 —— 完全不可见。必须用 border 或 outline 构建边界结构。
表单控件和链接的高对比关键处理点
原生表单元素（input、select、textarea）在高对比下常变透明或丢失边框，链接则容易失去焦点指示：
-
input必须显式加border: 2px solid black;，不能依赖浏览器默认 -
button和a的:focus态必须用outline（非box-shadow），并设outline-offset: 2px避免贴边 - 禁用态（
:disabled）文字不能只靠opacity: 0.5，它会让对比度跌破 3:1；应改用深灰文字 + 明确边框，例如color: GrayText; border: 2px solid GrayText; - 所有伪元素（
::before、::after）若含文本（如必填星号content: "*"），也需单独检查对比度
实际验证时最容易漏掉的三个地方
工具检测和肉眼观察都容易跳过这些：
- SVG 图标如果没加
aria-hidden="true"，且 fill 颜色与背景对比不足，会被 WCAG 当作可读文本检测 -
label关联的for属性缺失时，屏幕阅读器无法读出表单含义，高对比只是“看得见”，但“不可操作” - 动态主题切换（如暗黑模式）若没同步适配
prefers-contrast规则，会导致高对比 + 暗色主题叠加失效
最终效果是否达标，得在真实系统设置下开高对比主题测试，而不是仅靠 DevTools 模拟 —— 因为模拟器不还原系统级重绘逻辑。
