应使用@media (prefers-contrast: high)检测用户高对比偏好，仅当系统明确报告启用高对比主题（如Windows高对比、macOS增加对比度）时生效；同时必须补充@media (forced-colors: active)应对Windows强制色彩等激进模式，二者缺一不可。
直接用 @media (prefers-contrast: high) 和 @media (forced-colors: active) 双重覆盖，别猜系统状态，也别靠 JS 检测颜色值——那既不准又绕过语义。
prefers-contrast: high 是什么，什么时候生效
它不是“用户开了高对比开关就触发”，而是操作系统明确报告“用户启用了高对比主题”时才匹配。Windows 高对比#1/#2、macOS “增加对比度”、iOS “智能反转”都会触发；但仅调高屏幕亮度或放大文字不会。
-
prefers-contrast: high匹配时，CSS 规则才会应用；不匹配则完全不生效，和prefers-color-scheme行为一致 - 不要写成
@media (prefers-contrast)（漏掉值），这在 Chrome 101+ / Safari 13.1+ / Firefox 95+ 中无效 -
prefers-contrast: low极少被系统启用，生产环境可忽略
forced-colors: active 必须补上，尤其对 Windows 用户
forced-colors: active 是更激进的模式，常见于 Windows 强制色彩主题（如“高对比度黑色”）。它会暴力重置几乎所有 CSS 属性：自定义背景、渐变、阴影全被清空，连 color 都可能被系统强制覆盖。
- Chrome 旧版本（
- 必须和
prefers-contrast: high并存，不能只写一个 - 在这个媒体查询里，优先用
border、outline、color这类“抗覆盖”属性，避免依赖background-image或 CSS 变量
按钮、表单、链接这些控件怎么写才不翻车
高对比模式下，系统会剥离你写的 background-color，但保留 border 和 outline。光改文字颜色没用，用户根本找不到焦点在哪。
立即学习“前端免费学习笔记（深入）”；
- 按钮别只靠
background-color: #007bff+color: white，得加border: 2px solid black或outline: 2px solid yellow -
input、select在高对比下常变透明，必须显式加border，比如border: 2px solid #fff - 链接必须有非颜色类焦点指示：
outline: 2px solid #000+outline-offset: 2px比单纯加粗更可靠 - SpinKit 类加载动画要靠 CSS 变量切换颜色，例如
--sk-color: #ffffff，并在两个媒体查询里分别设值
为什么本地测试经常失效
浏览器开发者工具里的“模拟高对比度”开关（如 Chrome 的 Rendering 面板）只模拟 prefers-contrast，不触发 forced-colors；而且它不会真正剥离 background，导致你误以为样式 OK。
- 真机验证最准：Windows 开启“高对比度#1”，macOS 开启“增加对比度”，iOS 开启“智能反转”
- Chrome 101+ 支持
forced-colors，但需在chrome://flags启用#enable-forced-colors才能手动触发测试 - 别信肉眼判断——深灰字
#333在浅灰背景#eee上对比度仅 ~2.1，远低于 WCAG 要求的 4.5:1
