现代浏览器原生支持@media (prefers-contrast: high)检测系统高对比度模式，优先级高于JS，仅在用户启用系统高对比度功能（如Windows高对比主题、macOS增加对比度）时触发，不依赖视觉预判。
如何用 CSS media query 检测系统高对比度模式
现代浏览器（Chrome 85+、Edge 101+、Firefox 96+、Safari 15.4+）原生支持 @media (prefers-contrast: high)，无需 JavaScript 就能响应系统级高对比度设置。这是最轻量、最可靠的方式，优先级高于 JS 检测。
注意：该媒体查询检测的是操作系统或浏览器的「高对比度模式」开启状态（如 Windows 的“高对比度主题”、macOS 的“增加对比度”、iOS 的“智能反转”等），不是单纯的颜色方案切换。
- 只在用户主动启用系统高对比度功能时触发，
prefers-contrast: low极少被使用，通常忽略 - 不兼容 IE 和旧版 Safari（
- 样式会随系统设置实时响应，无需监听或重载
@media (prefers-contrast: high) {
body {
background-color: black !important;
color: white !important;
}
a { text-decoration: underline; }
}
JavaScript 怎么读取 prefers-contrast 媒体查询状态
用 window.matchMedia() 可以主动获取当前状态，并监听变化。适合需要动态调整逻辑（如埋点、组件初始化、禁用动画）的场景。
-
matchMedia('(prefers-contrast: high)').matches返回布尔值，页面加载时即可读取 - 必须用
.addEventListener('change', handler)监听，onchange属性已被废弃 - 不要在 SSR 环境（如 Next.js getStaticProps）中直接调用，
window未定义会导致报错
if (typeof window !== 'undefined') {
const contrastQuery = window.matchMedia('(prefers-contrast: high)');
function handleContrastChange(e) {
console.log('High contrast mode:', e.matches);
if (e.matches) {
document.body.classList.add('high-contrast');
} else {
document.body.classList.remove('high-contrast');
}
}
handleContrastChange(contrastQuery); // 初始化
contrastQuery.addEventListener('change', handleContrastChange);
}
为什么不能用 color-scheme 或 prefers-color-scheme 替代
prefers-color-scheme 检测的是深色/浅色模式（dark/light），和对比度无关。两者独立存在：用户可能开着深色模式但没开高对比度，也可能开着高对比度但用的是默认浅色主题。
立即学习“前端免费学习笔记（深入）”；
- Windows 高对比度模式下，
prefers-color-scheme仍可能返回light，因为系统未改变明暗语义，只强化了色阶 -
color-scheme: dark是 CSS 声明，用于告知浏览器你的页面适配哪种配色，不用于检测 - 混淆二者会导致样式覆盖错误，比如误以为开了深色模式就加粗文字，实际用户需要的是高对比文本可读性
真实项目里容易漏掉的关键点
高对比度模式下，浏览器会强制覆盖部分 CSS 属性（如 background-color、border、box-shadow），仅靠媒体查询还不够。
- 必须用
!important覆盖浏览器强制样式，否则自定义背景/边框可能失效 - 避免依赖颜色差值做可访问性判断（如 “#333 on #fff” 对比度够 → 在高对比模式下会被重绘为纯黑/白，原有计算失效）
- 图标、装饰性元素需提供文字替代（
aria-label或alt），因为高对比模式常关闭图片/渐变/阴影 - 测试不能只靠模拟器：Windows 开启“高对比模式”（设置 > 辅助功能 > 高对比度）、macOS 开启“增加对比度”（系统设置 > 辅助功能 > 显示）才能真实复现
真正起作用的永远是系统信号本身，而不是你猜它是不是“看起来对比强”。信 (prefers-contrast: high)，别信视觉预判。
