forced-colors

The forced-colors CSS media feature 用于检测 user agent 是否启用了强制颜色模式，在该模式下，它会对页面强制使用用户选择的有限颜色调色板。强制颜色模式的一个例子是 Windows 高对比度模式。

语法

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

值

none

强制颜色模式未激活；页面的颜色不会被强制到有限的调色板中。

active

表示强制颜色模式处于活动状态。浏览器通过 CSS 系统颜色 关键字向作者提供颜色调色板，并在适当情况下触发 prefers-color-scheme 的相应值，以便作者可以调整页面。浏览器根据 Canvas 系统颜色的亮度选择 prefers-color-scheme 的值（有关更多详细信息，请参阅 颜色调整规范）。

使用说明

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

在强制颜色模式下，以下属性的值将被视为没有指定作者级值。也就是说，浏览器指定的将被使用。浏览器指定的不会影响样式级联；相反，这些值会在绘制时由浏览器强制执行。

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

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

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

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

除了这些调整之外，浏览器还将通过在文本后面绘制“背板”来帮助确保文本的可读性。这对于在文本放置在图像顶部的场景中保留对比度尤其重要。

在两种情况下，用户代理不会强制执行上述属性的值——当 forced-color-adjust 值为 none 应用于元素时，或者当作者指定系统颜色时。

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

当指定系统颜色时，它将被使用，而不是其他情况下会强制执行的值。

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

可访问性问题

总的来说，网页作者不应使用 forced-colors 媒体特征为启用了此功能的用户创建单独的设计。相反，其预期用途是在强制颜色的默认应用对页面特定部分不起作用时，进行一些微调以改善可用性或可读性。

强制颜色模式提供的低对比度调色板和文本背板通常对于某些用户能够阅读或使用特定网站至关重要，因此影响内容的调整应谨慎选择，并针对其他情况下不可读的内容。

用户偏好

此媒体功能仅在用户在其操作系统中启用了颜色方案首选项的情况下才处于活动状态。此类功能的一个示例是 Windows 上的高对比度模式。

示例

注意：以下示例仅在使用支持此媒体功能的浏览器且在您的操作系统中启用了诸如高对比度模式之类的首选项时才有效。

此示例是一个按钮，通常通过 box-shadow 获取其对比度。在强制颜色模式下，box-shadow 强制为 none，因此此示例使用 forced-colors 媒体功能来确保存在适当颜色的边框（在本例中为 ButtonText）

HTML

html
<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;
  }
}

结果

规范

规范
媒体查询级别 5
# forced-colors

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅