现代浏览器通过 prefers-contrast 媒体查询检测系统高对比度模式，仅当用户主动启用高对比度辅助设置（如 Windows 高对比主题、macOS“增加对比度”开关）时生效，需配合 outline/border 等硬边界样式确保可访问性。
如何检测用户是否启用了系统高对比度模式
现代浏览器通过 prefers-contrast 媒体查询暴露系统文字对比度偏好，但要注意：它只在用户**主动开启高对比度辅助设置**（如 Windows 高对比度主题、macOS “增加对比度”开关）时才生效，不是简单调大字号或改深色模式就能触发。
-
prefers-contrast: high表示用户明确启用了高对比度模式；prefers-contrast: low极少见，通常可忽略 - 不要和
prefers-color-scheme混用——深色模式 ≠ 高对比度，两者独立，可能同时为dark+high - 部分旧版 Safari（≤16.4）不支持该查询，需降级处理：默认样式保持可用性，再用
@supports (prefers-contrast: high)包裹增强逻辑
CSS 中怎么写高对比度专用规则
直接在媒体查询里重置关键视觉属性，重点不是“加粗边框”，而是确保文字与背景的绝对区分度 —— 浏览器在高对比模式下会强制覆盖部分颜色，但 border、outline、text-shadow 等仍可控。
- 避免仅靠 color / background-color 区分状态，改用
border+outline组合（例如按钮焦点态加双层 outline） - 慎用半透明色（
rgba(0,0,0,0.5)）、渐变、box-shadow：这些在高对比模式下常被忽略或失效 - 示例：
@media (prefers-contrast: high) { button:focus { outline: 3px solid Highlight; outline-offset: 2px; border: 2px solid Highlight; } a:not(:focus) { text-decoration: underline; } }
JavaScript 怎么动态响应对比度变化
用 window.matchMedia 监听变化比轮询更轻量，且能捕获系统设置实时切换（比如用户中途打开高对比主题）。
- 监听代码必须在页面加载后立即执行，不能等到 DOMContentLoaded 后才注册，否则可能错过初始状态
- 匹配对象的
matches属性返回布尔值，直接用于 class 切换或内联样式更新 - 示例：
const contrastQuery = window.matchMedia('(prefers-contrast: high)'); function handleContrastChange(e) { document.documentElement.classList.toggle('high-contrast', e.matches); } contrastQuery.addEventListener('change', handleContrastChange); handleContrastChange(contrastQuery); // 初始化
容易被忽略的兼容性细节
高对比度适配不是“加个媒体查询就完事”，真正难的是边缘场景的鲁棒性。
- Windows 高对比主题下，
background-image几乎总被禁用，但background-color可能被系统色覆盖（如设为CanvasText会随主题变黑/白） - 某些屏幕阅读器（如 NVDA）配合高对比模式时，会进一步忽略自定义 focus 样式，此时
outline是唯一可靠选择 - 不要假设
prefers-contrast只有 high/low —— 浏览器可能返回no-preference，应视同未启用，避免误判
系统对比度偏好是真实存在的可访问性信号，但它不自动修复设计缺陷；真正起作用的，是你在 border、outline、underline 这些“硬边界”上做的取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
