@media (prefers-contrast: high) 是唯一可靠入口，因它是 w3c 标准且被现代浏览器一致支持，而 -ms-high-contrast 已废弃，forced-colors 属于系统强制着色路径，语义不同不可替代。
为什么 @media (prefers-contrast: high) 是唯一可靠入口
浏览器对高对比度模式的支持差异极大：Windows 高对比主题、macOS 的“增加对比度”、Edge/Chrome 的强制颜色覆盖，它们触发的机制完全不同。只有 @media (prefers-contrast: high) 是 W3C 标准且被现代浏览器一致支持的检测方式——其他如 @media (-ms-high-contrast: active) 已废弃，forced-colors 则是另一条并行路径（用于系统级强制着色），不能替代对比度偏好判断。
Less 中必须用此媒体查询包裹所有高对比样式，否则无法响应用户系统设置：
.button {
background: #007bff;
color: #fff;
@media (prefers-contrast: high) {
background: #000;
color: #fff;
border: 2px solid #fff;
}
}
如何用 Less 变量统一管理高对比色值而非硬编码
硬写 #000 / #fff 看似简单，但会破坏设计系统一致性：按钮、链接、边框、阴影等在高对比下需统一语义（如“强调色”“背景色”），而非各自选色。Less 变量能确保一处修改全局生效，也便于后续接入 WCAG 自动校验工具。
推荐结构：
- 定义基础变量：
@high-contrast-bg: #000;、@high-contrast-fg: #fff;、@high-contrast-border: #fff; - 在组件中复用，而非重复声明颜色：
border: 1px solid @high-contrast-border; - 避免使用
lighten()/darken()等函数生成高对比色——这些函数在低对比原色上计算出的结果往往不满足 WCAG AAA 级（≥7:1）对比度要求
哪些 CSS 属性在 @media (prefers-contrast: high) 下必须重置
高对比模式下，用户依赖明确的形状、边界和文字可读性，以下属性若不显式重置，极易失效：
-
background-image：必须设为none，渐变或纹理图在高对比下常被忽略或干扰识别 -
box-shadow：全部置为none，阴影无语义且降低文字与背景分离度 -
opacity：禁止使用，半透明在高对比下直接导致内容不可见 -
color和background-color：必须成对设置，不能只改其一；否则可能继承默认前景/背景色，造成不可读（如白底白字）
如何测试 Less 编译后的高对比样式是否真被应用
光看 Less 文件结构没用，关键要验证最终 CSS 是否被浏览器识别并生效。最直接的方式是手动触发系统高对比设置后检查元素：
- macOS：系统设置 → 辅助功能 → 显示 → 勾选“增加对比度”
- Windows：设置 → 辅助功能 → 高对比度 → 开启（注意选择主题后需重启浏览器）
- Chrome/Edge：地址栏输入
chrome://accessibility→ 打开“强制颜色”开关（仅用于快速验证，非标准路径）
打开开发者工具，选中元素，在 Styles 面板中确认 @media (prefers-contrast: high) 规则是否出现在匹配规则列表里，且对应属性未被 strike-through。如果没出现，大概率是 Less 编译时该媒体查询被压缩工具误删，需检查构建配置中是否禁用了 clean-css 对媒体查询的保留选项。
真正难的是边缘场景：比如 SVG 图标填充色是否随文本色同步变化、伪元素生成的内容是否设置了 color、第三方组件库的 class 是否被你的高对比规则覆盖。这些没法靠变量或媒体查询自动解决，得逐个 inspect。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
