forced-colors

forced-colors 是一种 CSS 媒体查询，用于检测用户是否启用了强制颜色模式——通常是 Windows 高对比度模式（HCM）。该模式会以用户选择的小型系统调色板（黑底白字、白底黑字、黑底黄字或自定义调色板）覆盖网站的颜色设置。

强制颜色模式被低视力用户广泛使用，尤其是对光线敏感或有极端对比度需求的人群。此外，没有明确残疾诊断但偏好高对比度显示的用户也会使用该模式。

HCM 的实际效果

启用 Windows 高对比度模式后，操作系统会将网站颜色替换为一组系统颜色：

• Canvas——页面背景色。
• CanvasText——默认文本颜色。
• LinkText——链接颜色。
• VisitedText——已访问链接颜色。
• ButtonText——按钮文本颜色。
• ButtonFace——按钮背景色。
• HighlightText / Highlight——选中文本颜色。
• GrayText——禁用文本颜色。
• Mark / MarkText——高亮文本颜色。

处于强制颜色模式时，浏览器会将大多数开发者定义的颜色替换为这些系统颜色，同时移除背景图片并将多项视觉属性重置为系统默认值。

这一行为是设计使然：用户已选择适合自己的对比度调色板，不希望网站覆盖该选择。网站的职责是配合用户，而非与之对抗。

CSS 媒体查询用法

开发者可通过以下方式检测强制颜色模式：

@media (forced-colors: active) {
  /* 用户处于 HCM 或等效模式；在此调整 CSS */
}

prefers-color-scheme 与 forced-colors 相互独立——用户可能处于深色强制颜色模式（黑底白字系统调色板），但 prefers-color-scheme 查询结果仍为 light，因为用户并未明确选择”深色模式”。

生产环境中的常见问题

• 背景图片变得不可见。 强制颜色模式会移除背景图片。若”点击展开”的插入符是不带文本回退的背景图片 SVG，用户将什么也看不到。解决方法：使用 <svg> 或带 currentColor 的内联图标，使其继承 CanvasText 颜色；或提供文本回退。
• 边框消失。 部分边框会被去除或替换为 CanvasText 颜色的边框，依赖细微边框颜色的视觉层次感随之消失。需在 HCM 下审计组件边框。
• 焦点指示器失效。 用 box-shadow 绘制的自定义焦点环会失去颜色。应改用 outline（在强制颜色模式下得以保留），或检测 forced-colors 后提供使用系统颜色的回退方案。
• 仅在悬停时可见的元素永久消失。 依赖背景图片悬停状态的工具提示式组件将失效。
• forced-color-adjust: none。 部分设计师使用此 CSS 属性让特定元素退出强制颜色处理。这几乎总是错误的选择——这意味着用户将失去他们明确要求的颜色。应谨慎使用，仅限于真正纯装饰性且设计识别度不可或缺的元素（徽标、品牌专属图标），绝不用于文本或可交互控件。

测试方法

Windows 系统：依次进入”设置 → 辅助功能 → 对比度主题”，选择内置调色板之一（水色、沙漠、黄昏、夜空），重新加载页面。Chrome 和 Edge 会自动读取系统设置；Firefox 在浏览器设置中提供独立的强制颜色开关。

大多数问题在初次检查时即可发现：图标缺失、边框不可见、焦点环失效。应在 forced-colors: active 媒体查询内使用系统颜色感知型 CSS 进行修复。