好的，我们开始今天的讲座，主题是 CSS 的 forced-color-adjust 属性在系统高对比度模式下的行为。这是一个相对冷门但非常重要的属性，尤其是在可访问性领域。理解它对于创建对所有用户都友好的网页至关重要。
什么是 forced-color-adjust？
forced-color-adjust 是一个 CSS 属性，用于控制浏览器是否可以强制应用用户代理样式（user-agent stylesheet）来更改元素的颜色。它的主要目的是改善在高对比度模式下的可访问性。在高对比度模式下，操作系统或用户代理会强制更改页面元素的颜色，以提高文本和背景之间的对比度，从而使视力障碍人士更容易阅读和使用网页。
这个属性接受以下几个值：
auto(默认值): 允许用户代理根据需要调整颜色。none: 阻止用户代理调整颜色。preserve-parent-color: 指示用户代理应该尝试保留父元素的颜色。这是一个实验性的值，支持程度有限。
高对比度模式 (High Contrast Mode)
高对比度模式是一种辅助功能设置，允许用户自定义屏幕上文本、背景和其他元素的颜色。这对于视力障碍或对某些颜色敏感的人来说至关重要。操作系统提供了启用高对比度模式的选项，例如 Windows 的高对比度主题或 macOS 的反转颜色功能。当用户启用高对比度模式时，浏览器会检测到此设置，并尝试调整页面颜色以符合用户的偏好。
forced-color-adjust 的作用
forced-color-adjust 允许开发者控制浏览器在高对比度模式下的行为。默认情况下，forced-color-adjust: auto，这意味着浏览器可以自由地调整颜色。但是，在某些情况下，开发者可能希望阻止浏览器更改某些元素的颜色，例如品牌颜色或特定图像。这时，就可以使用 forced-color-adjust: none。
forced-color-adjust 的具体行为
当 forced-color-adjust 设置为 none 时，浏览器将不会在高对比度模式下更改该元素的颜色。这可能导致可访问性问题，因为文本可能与背景颜色对比度不足。因此，在使用 forced-color-adjust: none 时，开发者必须确保元素在所有情况下都具有足够的对比度。
代码示例
让我们看一些代码示例来说明 forced-color-adjust 的行为。
示例 1: 默认行为 (auto)
<!DOCTYPE html>
<html>
<head>
<title>forced-color-adjust: auto</title>
<style>
body {
background-color: white;
color: black;
}
.important-text {
background-color: lightblue;
color: darkblue;
}
</style>
</head>
<body>
<p>普通文本。</p>
<p class="important-text">重要文本。</p>
</body>
</html>在这个例子中，forced-color-adjust 默认为 auto。当用户启用高对比度模式时，浏览器可能会将 body 和 .important-text 的颜色更改为用户定义的高对比度颜色。例如，如果用户选择黑色背景和白色文本，浏览器可能会将 body 的背景颜色更改为黑色，文本颜色更改为白色，并将 .important-text 的背景颜色更改为黑色，文本颜色更改为白色。
示例 2: 阻止颜色调整 (none)
<!DOCTYPE html>
<html>
<head>
<title>forced-color-adjust: none</title>
<style>
body {
background-color: white;
color: black;
}
.brand-logo {
background-color: #e0e0e0;
color: #333333;
forced-color-adjust: none;
}
</style>
</head>
<body>
<div class="brand-logo">
Brand Logo
</div>
<p>普通文本。</p>
</body>
</html>在这个例子中，.brand-logo 的 forced-color-adjust 设置为 none。这意味着即使在高对比度模式下，浏览器也不会更改 .brand-logo 的颜色。这可能导致可访问性问题，因为 .brand-logo 的文本颜色可能与背景颜色对比度不足。开发者需要确保 .brand-logo 在所有情况下都具有足够的对比度，例如，使用 aria-label 提供替代文本，或手动调整颜色以确保在高对比度模式下也能清晰可见。
示例 3: 使用 CSS 自定义高对比度模式样式
可以使用 CSS 媒体查询来检测高对比度模式，并提供自定义样式：
<!DOCTYPE html>
<html>
<head>
<title>Custom High Contrast Styles</title>
<style>
body {
background-color: white;
color: black;
}
.important-text {
background-color: lightblue;
color: darkblue;
}
@media (forced-colors: active) {
body {
background-color: Canvas;
color: CanvasText;
}
.important-text {
background-color: Highlight;
color: HighlightText;
}
}
</style>
</head>
<body>
<p>普通文本。</p>
<p class="important-text">重要文本。</p>
</body>
</html>在这个例子中，我们使用了 @media (forced-colors: active) 媒体查询来检测高对比度模式是否已激活。当高对比度模式激活时，我们将 body 和 .important-text 的颜色更改为 Canvas、CanvasText、Highlight 和 HighlightText。这些是系统颜色关键字，它们会根据用户的高对比度设置自动调整颜色。
系统颜色关键字
系统颜色关键字是 CSS 预定义的颜色名称，它们会根据用户代理或操作系统的设置自动调整颜色。这些颜色关键字在高对比度模式下特别有用，因为它们可以确保文本和背景之间的对比度始终足够。一些常用的系统颜色关键字包括：
Canvas: 应用或文档内容的主要背景颜色。CanvasText: 在Canvas背景上使用的文本颜色。Highlight: 用于突出显示用户界面中选择的项目。HighlightText: 在Highlight背景上使用的文本颜色。ButtonFace: 按钮的背景颜色。ButtonText: 按钮上使用的文本颜色。
何时使用 forced-color-adjust: none
通常情况下，应该避免使用 forced-color-adjust: none，除非有非常充分的理由。例如，如果元素包含复杂的图像或图形，并且更改颜色会破坏其含义，那么可以使用 forced-color-adjust: none。但是，在这种情况下，必须确保元素在所有情况下都具有足够的对比度。
可访问性考虑
在使用 forced-color-adjust 时，始终要考虑可访问性。确保文本和背景之间的对比度足够，以便视力障碍人士能够轻松阅读和使用网页。可以使用在线对比度检查工具来验证颜色对比度是否符合 WCAG (Web Content Accessibility Guidelines) 标准。
最佳实践
- 尽量避免使用
forced-color-adjust: none。 - 使用 CSS 媒体查询来检测高对比度模式，并提供自定义样式。
- 使用系统颜色关键字来确保文本和背景之间的对比度足够。
- 使用在线对比度检查工具来验证颜色对比度是否符合 WCAG 标准。
- 进行用户测试，以确保网页在高对比度模式下仍然可用。
- 提供替代文本，例如
aria-label和aria-describedby，以便屏幕阅读器可以正确解释元素的内容。 - 避免仅使用颜色来传达信息。例如，不要仅使用红色来表示错误，而是应该同时使用文本和图标。
浏览器兼容性
forced-color-adjust 属性的浏览器兼容性相对较好。它在 Chrome、Firefox、Safari 和 Edge 等主流浏览器中都得到了支持。但是，在一些旧版本的浏览器中可能不支持该属性。因此，在使用 forced-color-adjust 时，应该进行充分的测试，以确保网页在所有目标浏览器中都能正常工作。
表格总结
| 属性值 | 描述 |
|---|---|
auto |
(默认) 允许用户代理根据需要调整颜色。在高对比度模式下，浏览器可能会更改元素的颜色，以提高文本和背景之间的对比度。 |
none |
阻止用户代理调整颜色。在高对比度模式下，浏览器将不会更改元素的颜色。使用此值时，开发者必须确保元素在所有情况下都具有足够的对比度。 |
preserve-parent-color |
指示用户代理应该尝试保留父元素的颜色。这是一个实验性的值，支持程度有限。 |
| 媒体查询 | 描述 |
|---|---|
@media (forced-colors: active) |
用于检测高对比度模式是否已激活。当高对比度模式激活时，可以使用此媒体查询来应用自定义样式，以确保网页在高对比度模式下仍然可用。 |
| 系统颜色关键字 | 描述 |
|---|---|
Canvas |
应用或文档内容的主要背景颜色。 |
CanvasText |
在 Canvas 背景上使用的文本颜色。 |
Highlight |
用于突出显示用户界面中选择的项目。 |
HighlightText |
在 Highlight 背景上使用的文本颜色。 |
ButtonFace |
按钮的背景颜色。 |
ButtonText |
按钮上使用的文本颜色。 |
更高级的用法
除了基本的 auto 和 none 之外，forced-color-adjust 还可以与 CSS 变量 (custom properties) 结合使用，以实现更灵活的颜色控制。
例如：
<!DOCTYPE html>
<html>
<head>
<title>forced-color-adjust with CSS Variables</title>
<style>
:root {
--base-background-color: white;
--base-text-color: black;
}
body {
background-color: var(--base-background-color);
color: var(--base-text-color);
}
.important-text {
background-color: lightblue;
color: darkblue;
}
@media (forced-colors: active) {
:root {
--base-background-color: Canvas;
--base-text-color: CanvasText;
}
.important-text {
background-color: Highlight;
color: HighlightText;
}
}
</style>
</head>
<body>
<p>普通文本。</p>
<p class="important-text">重要文本。</p>
</body>
</html>在这个例子中，我们使用了 CSS 变量 --base-background-color 和 --base-text-color 来定义 body 的背景颜色和文本颜色。在高对比度模式下，我们使用 @media (forced-colors: active) 媒体查询来更改这些变量的值为 Canvas 和 CanvasText。这样，我们就可以更方便地控制页面在高对比度模式下的颜色。
其他注意事项
- 在使用
forced-color-adjust时，应该始终考虑到用户体验。确保网页在高对比度模式下仍然可用，并且用户可以轻松地找到所需的信息。 - 可以使用浏览器的开发者工具来模拟高对比度模式，以便测试网页在高对比度模式下的外观。
- 应该定期更新网页的 CSS，以确保其与最新的浏览器和辅助技术兼容。
总结来说
forced-color-adjust 属性控制浏览器在高对比度模式下的颜色调整行为。开发者应该谨慎使用 forced-color-adjust: none，并在使用时确保可访问性。利用 CSS 媒体查询和系统颜色关键字可以更好地控制高对比度模式下的样式。
更多IT精英技术系列讲座，到智猿学院