prefers-contrast 是 css 媒体查询，可真实检测系统级高对比度设置（如 windows 高对比主题、macos 增加对比度），非 js 模拟；仅当用户明确开启时触发，需用 @media (prefers-contrast: high) 或兼容写法 @media (prefers-contrast)。
prefers-contrast 是什么，它真能检测系统对比度设置？
prefers-contrast 是 CSS 媒体查询功能，用于响应用户在操作系统中开启的“高对比度模式”（如 Windows 的“高对比度主题”，macOS 的“增加对比度”，或 iOS 的“智能反转”+“增强对比度”组合）。它不是测屏幕亮度或颜色差值，而是读取系统级辅助功能开关——只有当用户明确启用高对比度主题时，(prefers-contrast: high) 才会匹配。
常见误判点：
– 浏览器缩放、字体放大、深色模式（prefers-color-scheme）不会触发它；
– 纯 CSS 手动加粗边框或改色，不等于满足该媒体查询的语义意图；
– Chrome 和 Safari 支持较稳，Firefox 目前仅部分支持（v120+ 有限支持 high，不支持 reduced）。
怎么用 @media (prefers-contrast) 写有效降噪样式？
核心原则：优先强化信息层级与可辨识性，而非单纯“加粗所有东西”。系统已启用高对比度时，浏览器通常会覆盖部分颜色和背景，但你的 CSS 仍可补足关键缺口。
- 用
border替代依赖背景色的分隔（比如卡片分割线、按钮底边） - 对图标类元素添加
stroke或outline，避免纯 fill 图标在高对比下消失 - 慎用
box-shadow：多数高对比模式会强制重置阴影，建议改用border或text-shadow（后者在部分场景仍生效） - 文字链接必须有
text-decoration（如下划线），不能只靠颜色区分
示例：
@media (prefers-contrast: high) {
.card {
border: 2px solid #000;
background: transparent; /* 避免被系统强制覆盖成纯白/纯黑 */
}
a {
text-decoration: underline;
}
.icon {
outline: 2px solid currentColor;
outline-offset: 2px;
}
}
JavaScript 怎么监听 prefers-contrast 变化？
CSS 媒体查询无法直接触发 JS 逻辑，但可用 window.matchMedia() 订阅状态变更。注意：它返回的是 MediaQueryList 对象，不是布尔值。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 判断当前是否匹配：
window.matchMedia('(prefers-contrast: high)').matches - 监听变化需调用
.addEventListener('change', handler)（旧版用.addListener，已废弃） - 不要在初始化时只查一次——用户可能中途切换系统设置，必须监听
- 服务端无法获取该值，所有适配必须在客户端完成
简短实操片段：
const contrastQuery = window.matchMedia('(prefers-contrast: high)');
function handleContrastChange(e) {
if (e.matches) {
document.body.classList.add('high-contrast');
} else {
document.body.classList.remove('high-contrast');
}
}
contrastQuery.addEventListener('change', handleContrastChange);
handleContrastChange(contrastQuery); // 初始化执行一次
为什么加了 prefers-contrast 样式，测试时却没反应？
最常卡在环境配置上。真实触发需要操作系统级设置，不是浏览器开发者工具模拟就能完全复现。
- Windows：设置 → 辅助功能 → 高对比度 → 开启任一主题（如“高对比度 #1”）
- macOS：系统设置 → 辅助功能 → 显示 → 勾选“增加对比度”（注意：仅勾“深色模式”无效）
- iOS/iPadOS：设置 → 辅助功能 → 显示与文字大小 → 勾选“增强对比度”，再配合“智能反转”或“经典反转”才可能激活
- Chrome DevTools 的 Rendering 面板里“Emulate CSS media feature”选项，仅模拟
prefers-color-scheme，不支持prefers-contrast模拟 —— 这是最大坑点
真正验证必须切到真实系统设置，且重启浏览器（部分系统需重启页面才能读取新状态）。
复杂点在于：不同系统对“高对比度”的定义不一致，有的重置背景为纯黑、文字为纯白，有的只加粗边框并移除渐变。没有银弹样式，只能按最小公约数加固关键交互元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
