@media (prefers-contrast: high) 仅在系统级高对比度模式开启时触发，需正确书写、兼容旧 safari，并配合显式边框、禁用背景图及成对调整 css 变量以确保可访问性。
为什么 @media (prefers-contrast: high) 有时不生效
它只在用户**主动开启系统级高对比度模式**时触发，浏览器不会模拟，也不响应色盲检测或手动开关。Windows 是「设置 > 辅助功能 > 对比度主题」，macOS 是「系统设置 > 辅助功能 > 显示 > 增加对比度」，iOS/iPadOS 在「辅助功能 > 显示与文字大小 > 高对比度」。Safari 16.4 之前完全忽略该写法，只认 @media (prefers-contrast)（布尔型），所以若需兼容旧 Safari，得补一层兜底。
@media (prefers-contrast: high) 的正确写法和常见错误
必须带完整括号和引号包裹的值，不能漏掉任何符号：
- ✅ 正确：
@media (prefers-contrast: high) - ❌ 错误：
@media prefers-contrast: high（缺括号） - ❌ 错误：
@media (prefers-contrast: "high")（值不该加引号） - ❌ 错误：
@media (prefers-contrast: high) and (prefers-color-scheme)（后者缺值，应为dark或light）
组合使用时用 and 显式连接，例如：@media (prefers-contrast: high) and (prefers-color-scheme: dark)，但注意两者独立触发，不保证同时满足。
按钮、输入框等交互元素为什么必须重设 border 和禁用 background-image
系统高对比模式（尤其 Windows）会强制覆盖 CSS 中的 background-color、color，但常忽略 background-image、box-shadow，甚至部分 border 样式，导致按钮变成“无轮廓色块”，失去可点击感知。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有
button、a、input[type="submit"]必须在媒体查询内显式声明border: 2px solid currentColor或固定色值（如#000） - 禁用
background-image和渐变，改用纯色 + 边框 +text-shadow: 1px 1px #000提升文字可读性 - 避免用
!important覆盖系统样式，优先用语义化颜色关键词（如CanvasText、ButtonFace），它们在高对比下更稳定
颜色定义和变量管理的关键细节
只改文字色不改背景色，可能让对比度变得更差——比如深灰字配深蓝背景，在高对比下反而糊成一片。要用 CSS 变量统一控制，并确保成对调整：
@media (prefers-contrast: high) {
:root {
--text-primary: black;
--bg-primary: white;
--border-active: #000;
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
}
button {
border: 2px solid var(--border-active);
background-color: var(--bg-primary);
}
}
别依赖 rgba() 或 hsla()，高对比模式下透明通道常被忽略；也别假设 prefers-contrast: high 就是黑底白字——它可能是黄底黑字、蓝底白字，取决于系统设置。
最易被忽略的是：它和 prefers-color-scheme 没有因果关系，也不能推断用户色觉类型；要适配红绿色盲，得另用 prefers-color-scheme + 图标/文字双重标识，或引入 JS 库做色觉模拟测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
