CSS 强制颜色模式：Windows High Contrast Mode 下的系统颜色映射与 `forced-colors`

大家好！今天我们来深入探讨一个重要的可访问性主题：CSS 强制颜色模式，以及它在 Windows High Contrast Mode (HCM) 下的行为，以及 CSS forced-colors 媒体查询和相关属性的应用。理解并正确处理强制颜色模式对于创建真正具有包容性的 Web 体验至关重要，尤其是对于视力障碍用户来说。

什么是强制颜色模式？

强制颜色模式是一种辅助技术，它允许用户覆盖网页的颜色，使用他们选择的系统颜色方案。这通常是为了提高对比度，使文本更容易阅读，或者减轻眼睛疲劳。Windows High Contrast Mode 是最常见的强制颜色模式之一，但其他操作系统和浏览器也可能提供类似的功能。

当用户启用强制颜色模式时，浏览器会忽略网页中定义的大部分颜色样式，并使用系统定义的颜色来渲染页面。这意味着我们精心设计的颜色主题可能会被完全覆盖，如果我们的网站没有考虑到这一点，可能会导致内容难以阅读，甚至无法使用。

Windows High Contrast Mode 的工作原理

在 Windows HCM 中，用户可以自定义以下系统颜色：

文本 (Text): 用于文本的前景色。
背景 (Background): 用于文本的背景色。
链接文本 (Hyperlink): 用于链接的前景色。
激活文本 (Active Text): 用于当前选中的项目的前景色。
停用文本 (Inactive Text): 用于非活动窗口中的文本的前景色。
按钮面 (Button Face): 用于按钮的背景色。
按钮文本 (Button Text): 用于按钮上的文本的前景色。
选择文本 (Selected Text): 用于选中的文本的前景色。
选择背景 (Selected Background): 用于选中的文本的背景色。

当用户启用 HCM 时，Windows 会将这些颜色传递给浏览器。浏览器随后使用这些系统颜色来渲染网页。重要的是要理解，并非所有的 CSS 颜色属性都会被忽略。一些属性，如 border-color 和 box-shadow，可能会受到影响，也可能不会，具体取决于浏览器和操作系统版本。

`forced-colors` 媒体查询

CSS forced-colors 媒体查询允许我们检测用户是否启用了强制颜色模式。我们可以使用它来应用特定的样式，以确保我们的网站在 HCM 下仍然可用。

@media (forced-colors: active) {
  /* 在强制颜色模式下应用的样式 */
}

forced-colors 媒体查询接受以下值：

none: 用户未启用强制颜色模式。
active: 用户已启用强制颜色模式。

系统颜色关键字

CSS 提供了一组特殊的关键字，允许我们使用系统颜色。这些关键字可以在任何接受颜色值的 CSS 属性中使用。以下是一些最常用的系统颜色关键字：

系统颜色关键字	描述
`CanvasText`	文本的前景色，通常与 `Window` 背景色形成对比。
`Canvas`	应用程序或文档的背景色。
`LinkText`	未访问链接的前景色。
`VisitedText`	已访问链接的前景色。
`ActiveText`	激活状态下项目的前景色。
`ButtonFace`	按钮的背景色。
`ButtonText`	按钮上的文本的前景色。
`SelectedText`	选中文本的前景色。
`Highlight`	选中文本的背景色。
`HighlightText`	选中文本的前景色。
`Window`	窗口的背景色。
`WindowText`	窗口中的文本的前景色。

注意: 这些系统颜色关键字的具体值取决于用户的操作系统和颜色主题。

使用 `forced-colors` 和系统颜色关键字的示例

假设我们有一个简单的按钮：

<button>Click Me</button>

button {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

在 HCM 下，这个按钮的颜色可能会被覆盖，导致文本难以阅读。为了解决这个问题，我们可以使用 forced-colors 媒体查询和系统颜色关键字：

button {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

@media (forced-colors: active) {
  button {
    background-color: ButtonFace;
    color: ButtonText;
    border-color: ButtonText; /* 确保边框可见 */
  }
}

在这个例子中，我们使用了 ButtonFace 和 ButtonText 系统颜色关键字来设置按钮的背景色和文本颜色。这确保了按钮在 HCM 下使用用户选择的系统颜色，从而提高了可读性。我们还使用了 ButtonText 作为边框颜色，以确保边框在HCM下仍然可见，因为默认的边框颜色可能与背景色相同。

`forced-colors` 属性

除了 forced-colors 媒体查询之外，CSS 还提供了一个 forced-colors 属性。这个属性允许我们指定在强制颜色模式下应该使用哪些颜色。

/* 强制颜色模式下使用指定的颜色 */
forced-colors: active; /* 或者 none */

注意: forced-colors 属性本身并不能启用或禁用强制颜色模式。它只是告诉浏览器如何处理颜色。通常情况下，这个属性并不需要手动设置，浏览器的默认行为已经足够。它的主要作用是与其他CSS属性结合使用，例如 color-scheme。

`color-scheme` 属性与强制颜色模式

color-scheme 属性用于指示元素支持的颜色方案。它可以帮助浏览器选择合适的默认样式，并改善在不同颜色模式下的渲染效果。

/* 表明元素支持浅色和深色颜色方案 */
color-scheme: light dark;

/* 表明元素只支持浅色颜色方案 */
color-scheme: light;

color-scheme 属性与强制颜色模式之间的关系在于，它可以帮助浏览器更好地处理系统颜色。例如，如果我们指定 color-scheme: light dark;，浏览器可能会选择更适合浅色或深色背景的系统颜色。

在强制颜色模式下，color-scheme 的作用会被放大。 浏览器会更加依赖 color-scheme 来确定如何使用系统颜色。因此，正确设置 color-scheme 可以显著提高网站在 HCM 下的可访问性。

最佳实践

以下是一些在处理强制颜色模式时的最佳实践：

使用 forced-colors 媒体查询进行检测： 这是确定用户是否启用了强制颜色模式的最可靠方法。
使用系统颜色关键字： 使用 CanvasText、Canvas、ButtonFace、ButtonText 等系统颜色关键字来确保您的网站使用用户选择的系统颜色。
提供足够的对比度： 确保文本和背景之间有足够的对比度，即使在强制颜色模式下也是如此。可以使用在线对比度检查工具来验证。
避免使用颜色作为唯一的信息传递方式： 不要依赖颜色来区分不同的元素或传递重要的信息。例如，如果使用颜色来表示错误状态，请同时使用文本或图标。
彻底测试： 在不同的操作系统和浏览器中测试您的网站，以确保它在强制颜色模式下正常工作。
关注焦点指示器： 确保焦点指示器在强制颜色模式下清晰可见，以便键盘用户可以轻松地导航您的网站。
避免过度自定义： 尽量减少对系统颜色的覆盖。用户启用强制颜色模式通常是为了解决特定的视觉需求，过度自定义可能会破坏他们的意图。
为图像提供替代文本： 确保所有图像都有描述性的替代文本，以便屏幕阅读器用户可以理解图像的内容，即使图像的颜色被覆盖。
使用语义化的 HTML： 使用语义化的 HTML 元素可以帮助浏览器更好地理解您的网站结构，并在强制颜色模式下提供更佳的体验。例如，使用 <article>、<nav>、<aside> 等元素来标记内容区域。

高级技巧

使用 CSS 自定义属性 (变量)： 可以使用 CSS 自定义属性来管理颜色，并在 forced-colors 媒体查询中轻松地更新它们。

:root {
  --primary-color: #007bff;
  --text-color: white;
}

button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

@media (forced-colors: active) {
  :root {
    --primary-color: ButtonFace;
    --text-color: ButtonText;
  }
}

利用 prefers-contrast 媒体查询： prefers-contrast 媒体查询允许我们检测用户是否要求更高的对比度。虽然它与 forced-colors 不同，但可以一起使用，以提供更佳的可访问性体验。
```
@media (prefers-contrast: more) {
  /* 应用于需要更高对比度的用户的样式 */
}
```
可以结合 forced-colors 和 prefers-contrast 来提供更精细的控制：
```
@media (forced-colors: active), (prefers-contrast: more) {
  /* 应用于启用强制颜色模式或请求更高对比度的用户的样式 */
}
```
处理图像和图标: 在强制颜色模式下，背景透明的图像（例如 PNG 或 SVG）可能显示不正确。可以考虑使用 currentcolor 关键字来设置图像的填充颜色，使其与文本颜色一致。或者，提供替代图像或使用 CSS 遮罩来确保图像在 HCM 下可见。
```
img.icon {
  fill: currentcolor; /* SVG 图标 */
}

@media (forced-colors: active) {
  img.icon {
    fill: CanvasText;
  }
}
```
考虑使用 currentColor 关键字: currentColor 关键字表示元素 color 属性的计算值。这在处理边框、阴影和 SVG 图标时非常有用，可以确保它们与文本颜色保持一致。
```
.box {
    border: 2px solid currentColor;
    color: blue; /* 边框颜色将是蓝色 */
}
```
谨慎使用透明度: 在强制颜色模式下，透明度可能会导致问题，因为系统颜色可能会覆盖背景颜色，导致文本难以阅读。尽量避免在文本或重要元素上使用透明度。如果必须使用，请确保提供足够的对比度。

总结关键点

强制颜色模式是可访问性设计的重要组成部分。通过使用 forced-colors 媒体查询和系统颜色关键字，我们可以确保我们的网站在 HCM 下仍然可用，并为所有用户提供良好的体验。关键在于理解系统颜色的工作原理，并采取适当的措施来适应它们。

希望今天的讲座对大家有所帮助。记住，可访问性不仅仅是一种责任，更是一种机会，可以让我们构建更具包容性和用户友好的 Web 体验。谢谢大家！

确保网站可访问性的重要性

理解并正确处理强制颜色模式，可以显著改善网站的可访问性，特别是对于视力障碍用户。合理利用 forced-colors 媒体查询和系统颜色关键字，能够确保在各种情况下都能提供清晰可读的界面。

可访问性设计的持续改进

可访问性设计是一个持续改进的过程，需要不断学习和实践。通过关注用户需求，并采用最佳实践，我们可以创建更具包容性和用户友好的 Web 体验。

更多IT精英技术系列讲座，到智猿学院