forced-colors

Baseline 已广泛支持

此功能已成熟，并可在多种设备和浏览器版本上运行。自 2022 年 9 月起，所有浏览器都已支持此功能。

forced-colors CSS 媒体特性用于检测用户代理是否启用了强制颜色模式，在该模式下，用户代理会强制页面使用用户选择的有限调色板。Windows 高对比度模式就是强制颜色模式的一个示例。

语法

forced-colors 媒体特性指示浏览器当前是否处于强制颜色模式。

值

none: 强制颜色模式未激活；页面的颜色没有被强制使用有限的调色板。
激活: 指示强制颜色模式已激活。浏览器通过 CSS 系统颜色关键字向作者提供调色板，如果合适，还会触发 prefers-color-scheme 的相应值，以便作者可以调整页面。浏览器根据 Canvas 系统颜色的亮度选择 prefers-color-scheme 的值（有关更多详细信息，请参阅颜色调整规范）。

用法说明

受强制颜色模式影响的属性

在强制颜色模式下，以下属性的值将被视为未指定作者级别的任何值。也就是说，将使用浏览器指定的值。浏览器指定的值不会影响样式层叠；这些值是在渲染时由浏览器强制执行的。

这些浏览器指定的值是从系统颜色集中选择的——这确保了为启用强制颜色的用户提供常见 UI 元素的一致对比度。

此外，以下属性在强制颜色模式下具有特殊行为

box-shadow 被强制设置为 'none'
text-shadow 被强制设置为 'none'
对于非 URL 值的 background-image 被强制设置为 'none'
color-scheme 被强制设置为 'light dark'
scrollbar-color 被强制设置为 'auto'

为上述属性强制使用的系统颜色取决于元素的上下文。例如，按钮元素上的 color 属性将被强制设置为 ButtonText。在普通文本上，它将被强制设置为 CanvasText。有关每个系统颜色何时可能适用于各种 UI 上下文的更多详细信息，请参阅系统颜色列表。

注意：用户代理根据原生元素语义选择系统颜色，而不是根据添加的 ARIA 角色。例如，将 role="button" 添加到 div 不会使元素的颜色被强制设置为 ButtonText。

除了这些调整之外，浏览器还会通过在文本后面绘制“背板”来帮助确保文本可读性。这对于在图像上放置文本时保持对比度尤为重要。

在某些情况下，用户代理不会强制执行上述属性的值

当元素上的 forced-color-adjust 设置为 none 时，所有强制颜色值都不会应用，作者样式将正常应用。此外，文本的背板也将被禁用。

当元素上的 forced-color-adjust 设置为 preserve-parent-color，并且元素上的 color 值未从其父元素继承时，该元素将与将 preserve-parent-color 设置为 none 时表现相同。

当指定系统颜色时，将使用它而不是原本会被强制使用的值。

你还可以将系统颜色与上述列表中以外的任何属性一起使用，以确保页面的其余部分与强制颜色模式下可用的受限调色板集成。

<button class="button">Press me!</button>

CSS

css

.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
    border: 2px ButtonText solid;
  }
}