Windows 高对比度模式（在 CSS 中称为 强制颜色模式 / Forced Colors Mode）是 Windows 操作系统的辅助功能。当启用时，系统会强制替换网页和应用程序中的颜色，使用有限的系统调色板来渲染内容。这大大提高了低视力用户和色觉障碍用户的可读性。

在该模式下，浏览器会自动：

• 将背景色替换为系统背景色（Canvas）
• 将文字颜色替换为系统文字色（CanvasText）
• 为链接使用专用颜色（LinkText）
• 移除大部分阴影和渐变效果
• 为按钮和输入框使用系统定义的颜色

CSS 通过 @media (forced-colors: active) 媒体查询来检测该模式。

方法一（快捷方式）： 按 左Alt + 左Shift + Print Screen 快速开关。

方法二（设置）：

1. 打开 Windows 设置 → 辅助功能 → 对比度主题（Windows 11）或 高对比度（Windows 10）
2. 从下拉菜单中选择一个主题（如"高对比度黑色"、"高对比度白色"等）
3. 点击"应用"即可

方法三（浏览器 DevTools）：

1. 打开 Chrome/Edge DevTools（F12）
2. 打开 Rendering 面板（在 More tools 中）
3. 找到 Emulate CSS media feature forced-colors 并选择 forced-colors: active

forced-colors 媒体查询有两个可能的值：

• none — 未启用强制颜色模式（正常模式）
• active — 已启用强制颜色模式（高对比度模式）

/* 检测强制颜色模式 */
@media (forced-colors: active) {
  /* 在此添加高对比度适配样式 */
  .button {
    border: 2px solid ButtonText;
  }
}

/* 结合 prefers-color-scheme */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  /* 深色高对比度模式下的特定样式 */
}

CSS 定义了以下系统颜色关键字，它们在强制颜色模式下会被映射到实际系统颜色：

使用这些关键字而非硬编码颜色，可以让网站在高对比度模式下自动获得正确的颜色映射。

forced-colors-adjust 属性控制元素在强制颜色模式下是否被浏览器自动调整颜色：

• auto（默认）— 浏览器自动调整颜色以适配高对比度模式
• none — 浏览器不调整该元素的颜色，保持原始样式

/* 保护品牌Logo在高对比度模式下不变色 */
.brand-logo {
  forced-colors-adjust: none;
}

/* 对于纯装饰性元素 */
.decorative-icon {
  forced-colors-adjust: none;
}

注意： 请谨慎使用 forced-colors-adjust: none，因为它可能导致元素在高对比度模式下难以辨认。通常仅用于品牌标识、数据可视化图表等必须保持原始颜色的场景。在预览面板中，我们展示了带有此属性的元素效果。

最佳实践清单：

1. 使用系统颜色关键字 — 对于边框、轮廓等关键视觉元素，使用 ButtonText、CanvasText 等系统颜色
2. 避免仅依赖颜色传达信息 — 使用图标、文字标签、边框等辅助手段
3. 确保足够的对比度 — 在正常模式下也要满足 WCAG AA 标准（4.5:1）
4. 为焦点状态提供可见轮廓 — 使用 outline 而非仅 box-shadow，因为阴影在高对比度模式下会被移除
5. 使用 SVG 图标并配合 currentColor — SVG 图标会在高对比度模式下自动适配文字颜色
6. 测试！ — 使用本工具或浏览器 DevTools 模拟 forced-colors 模式进行测试
7. 为图片提供替代文本 — 确保所有信息性图片都有 alt 属性
8. 谨慎使用 forced-colors-adjust: none — 仅在必要时使用（如品牌Logo）

内联 SVG： 使用 fill="currentColor" 或 stroke="currentColor" 的 SVG 元素会在高对比度模式下自动适配系统文字颜色。这是推荐的做法。

Font Awesome 等图标字体： 图标字体使用 CSS color 属性，在高对比度模式下颜色会被替换为系统文字色，通常表现良好。

SVG 作为 img 标签： <img src="icon.svg"> 通常保持原始颜色（浏览器不会替换 img 中的颜色）。如果需要适配，考虑使用内联 SVG。

背景图片中的图标： 背景图片在高对比度模式下可能被移除（取决于浏览器实现）。不要将关键信息放在背景图片中。

在 Chrome/Edge 中模拟强制颜色模式：

1. 打开 DevTools（F12）
2. 点击右上角的 ⋮ → More tools → Rendering
3. 在 Rendering 面板中，找到 Emulate CSS media feature forced-colors
4. 从下拉菜单中选择 forced-colors: active

也可以使用命令面板（Ctrl+Shift+P），搜索 "forced-colors" 快速定位。

在 Firefox 中，该功能位于 DevTools 的 Accessibility 面板中。