应使用@media (prefers-contrast: high)检测系统高对比度模式，它在Chrome 101+、Firefox 95+、Safari 16.4+中稳定支持，但Safari早期仅支持reduce；需配合forced-colors: active增强兼容性，并为交互元素显式设置边框、禁用背景图、使用系统语义色。
如何用 @media (prefers-contrast: high) 检测系统高对比度模式
Windows 和 macOS 系统级高对比度开关（如 Windows 的“高对比度主题”或 macOS 的“增加对比度”）会触发 prefers-contrast 媒体查询，但注意：它不等同于色盲模式，也不代表用户一定有视觉障碍——只是表明用户主动启用了系统级高对比设置。浏览器支持目前较稳定（Chrome 101+、Firefox 95+、Safari 16.4+），但 Safari 早期版本仅支持 reduce 值，不识别 high。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用
@media (prefers-contrast: high)，不能写成(prefers-contrast: high)缺少括号或@media prefers-contrast: high缺少括号和值引号 - 不要依赖它判断色觉类型（如红绿色盲），
prefers-contrast不提供色觉缺陷信息，那是prefers-color-scheme或第三方 JS 库的范畴 - 在 CSS 中叠加使用时，优先级与普通媒体查询一致，可与其他条件组合，例如：
@media (prefers-contrast: high) and (prefers-color-scheme: dark)
按钮边框和图标为什么必须显式重置，而非只改颜色
启用系统高对比模式后，Windows 会强制覆盖页面所有元素的背景色、文字色和边框色（通常设为纯黑/纯白+粗边框），但某些 CSS 属性会被忽略或重置失效——比如 background-image、box-shadow、甚至部分 border 样式。如果只靠改 color 或 background-color，按钮可能变成一片纯色无轮廓，失去可点击感知。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对所有交互控件（
button、a、input[type="submit"]）在@media (prefers-contrast: high)内强制声明border: 3px solid currentColor或明确色值（如#000） - 禁用
background-image和渐变，改用纯色 + 边框 + 文字描边（text-shadow: 1px 1px #000）增强文字可读性 - 图标类元素（如伪元素
::before插入的 SVG）需替换为系统兼容方案：改用border构建箭头，或使用content: "→"配合高对比字体
forced-colors: active 比 prefers-contrast 更底层，但支持更差
forced-colors 是更激进的系统干预机制（Windows 高对比主题下实际触发的是它），它会强制重绘所有元素为有限调色板（通常只有 4–6 种系统定义色），并剥离大部分 CSS 样式。它的检测粒度比 prefers-contrast 更细，但浏览器支持滞后：Chrome 106+ 支持，Firefox 尚未实现，Safari 完全不支持。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若需兼容 Windows 最严苛场景，应同时写两层媒体查询：
@media (prefers-contrast: high), (forced-colors: active) - 在
(forced-colors: active)块中，避免使用rgb()、hsl()或任何自定义色值；只用CanvasText、ButtonFace等系统语义色关键词 - 慎用
forced-colors单独适配——因兼容性断层大，容易导致 Safari/旧版 Firefox 用户看到未样式化内容
测试时别只靠浏览器 DevTools 模拟
Chrome DevTools 的 Rendering 面板可模拟 prefers-contrast: high，但它无法触发真实的系统级强制重绘逻辑（比如 Windows 强制加粗边框、移除阴影、重映射色值）。这意味着你在模拟器里看到的“高对比效果”，很可能比真实用户环境温和得多。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必测真机：在 Windows 10/11 开启“高对比主题（黑色）”或 macOS 开启“增加对比度 + 粗体文本”，用 Chrome/Firefox/Safari 实际访问
- 重点关注焦点状态：系统高对比下，
:focus的默认虚线框常被覆盖，需手动加outline: 3px solid Highlight（Highlight 是系统语义色） - 禁用所有 CSS 预处理器的 color variable 抽象——它们在
forced-colors下会直接失效，必须写死语义色关键词或 fallback
真正难的不是写出媒体查询，而是意识到：高对比模式下，CSS 的“视觉表达权”已被操作系统临时接管。你写的每一条样式，都得经得起被覆盖、被重映射、被简化为黑白块的考验。
