prefers-contrast 媒体查询可直接检测系统高对比度设置，支持 Windows、macOS、iOS 等系统级开关；应优先使用 border 和 outline 构建视觉结构，避免依赖 background-color 或阴影，因高对比模式下这些会被系统清除。
怎么用 prefers-contrast 检测系统高对比度设置
浏览器能直接读取系统级的高对比度开关，不是靠 JS 猜或用户点按钮——关键就靠 @media (prefers-contrast) 这个媒体查询。Windows 高对比主题、macOS 的“增加对比度”、iOS 的“智能反转”等都会触发它。
常见错误是只监听 prefers-color-scheme，漏掉色弱用户真正依赖的 prefers-contrast；更糟的是用 JS 模拟检测（比如测颜色值），既不准又慢，还绕过系统语义。
-
prefers-contrast: high表示用户明确启用了高对比模式（如 Windows 高对比主题） -
prefers-contrast: low很少用，通常可忽略 - 不匹配时（即没启用），该媒体查询不生效，CSS 不会应用——这点和
prefers-color-scheme一致
@media (prefers-contrast: high) {
body {
border: 3px solid black;
text-shadow: none;
}
a {
outline: 2px solid black;
}
}
为什么不能只改文字颜色？必须强化边界和焦点样式
高对比度模式下，系统会强制重绘页面（尤其在 IE/Edge Legacy 和部分 Chromium 版本），把背景、文字、边框全替换成高对比配色。但这个过程会剥离你写的 background-color 和 box-shadow，只保留 border、outline、color 等少数属性。光调深文字色没用，用户根本看不到按钮在哪、表单有没有聚焦。
典型翻车场景：用 background: #007bff + color: white 做按钮，开启高对比后，背景被清空，只剩白字浮在白底上——完全不可见。
立即学习“前端免费学习笔记（深入）”；
- 优先用
border和outline构建视觉结构，它们在高对比下稳定保留 - 避免依赖
background-image或渐变，会被系统丢弃 - 链接和按钮必须有非颜色类焦点指示，比如
outline-offset: 2px+ 加粗边框 - 表单控件（
input、select）要额外加border，因为原生控件在高对比下常变透明
Chrome/Firefox/Safari 对 prefers-contrast 的支持差异
别默认“写了就能用”。Safari 13.1+、Firefox 95+、Chrome 101+ 才完整支持 prefers-contrast: high；旧版 Chrome（forced-colors: active ——这是另一个更激进的模式（Windows 强制色彩主题），行为更暴力，连 CSS 变量都可能被覆盖。
所以真实项目里得双保险：
- 先写
@media (prefers-contrast: high)覆盖主流现代浏览器 - 再补一层
@media (forced-colors: active)应对旧 Chromium 和 Windows 强制色彩场景 - 两个媒体查询可以嵌套或并列，但不要混用参数（比如
(prefers-contrast: high) and (forced-colors: active)没意义，二者互斥）
@media (forced-colors: active) {
button {
border: 2px solid ButtonText;
}
}
ButtonText 是系统关键词，会在强制色彩下自动映射到当前主题的文字色，比写死 #000 更可靠。
怎么测试？别只靠浏览器 DevTools 模拟
DevTools 的渲染偏好模拟（Rendering → Emulate CSS media features）只能验证语法是否生效，但无法还原系统级重绘行为——比如 Windows 高对比主题下，浏览器实际会禁用 background-image、重置 SVG fill、甚至改变表单控件尺寸。真测得开系统设置。
- Windows：设置 → 辅助功能 → 高对比度 → 开启任意一个主题（如“高对比 #1”）
- macOS：系统设置 → 辅助功能 → 显示 → 勾选“增加对比度”
- 测试重点不是“看起来亮不亮”，而是“能不能看清边界”“焦点是否明显”“表单是否可操作”
- 特别注意 iframe 内容、Web Components 的 Shadow DOM——它们默认继承宿主的媒体查询，但若设了
style="display: contents"可能破坏继承链
最易被忽略的一点：高对比不是“字体加大”或“深色模式”，它是独立的、以可辨识性为唯一目标的渲染通道。很多团队加了 prefers-color-scheme 就以为完了，结果色弱用户打开系统高对比，整个页面变成一片模糊的灰白块——因为没人给边框留活路。
