CSS `prefers-contrast` / `forced-colors`：无障碍性高对比度模式

嘿，大家好！欢迎来到今天的“CSS 高对比度模式：让你的网页更懂用户的心”讲座。今天咱们不搞那些虚头巴脑的理论，直接撸起袖子干，用代码说话，让你的网页在高对比度模式下也能熠熠生辉。

一、啥是 prefers-contrast 和 forced-colors？为啥要关心它？

想象一下，你的用户中有视力障碍的朋友，或者在阳光强烈的地方使用你的网站。他们可能开启了操作系统的高对比度模式。这时候，如果你的网页没有做相应的适配，那画面可能惨不忍睹，甚至直接影响用户的体验。

prefers-contrast 是一个 CSS 媒体查询，它允许你检测用户是否开启了高对比度模式，并根据用户的偏好调整网页的样式。简单来说，就是“嘿，用户你喜欢高对比度是吧？没问题，我给你安排上！”

forced-colors 则更进一步，它指示浏览器强制应用用户选择的颜色方案。这意味着，你定义的颜色可能会被浏览器覆盖。听起来有点吓人，但别慌，这是为了确保用户的可访问性，让颜色更加清晰易辨。

为什么要关心它们？原因很简单：

可访问性（Accessibility）： 让每个人都能无障碍地访问你的网站，这是开发者应尽的责任。
用户体验（User Experience）： 适配高对比度模式，能让用户在各种环境下都能获得良好的体验。
专业性（Professionalism）： 展现你对细节的关注，提升你的专业形象。

二、prefers-contrast 的用法：根据用户喜好定制样式

prefers-contrast 媒体查询有几个取值：

no-preference：用户没有明确的对比度偏好。
less：用户偏好较低的对比度。
more：用户偏好较高的对比度。

最常用的就是 more 了，咱们直接上代码：

body {
  background-color: #fff;
  color: #333;
}

@media (prefers-contrast: more) {
  body {
    background-color: #000;
    color: #fff;
  }
}

这段代码的意思是：

默认情况下，背景色是白色，文字颜色是深灰色。
如果用户开启了高对比度模式，那么背景色变成黑色，文字颜色变成白色。

是不是很简单粗暴？再来个稍微复杂点的例子，比如按钮：

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

@media (prefers-contrast: more) {
  .button {
    background-color: #008000; /* Darker Green */
    color: #fff;
    border: 2px solid #fff; /* Add a border for better visibility */
  }
}

这里我们不仅改变了背景颜色，还添加了边框，让按钮在高对比度模式下更加醒目。

三、forced-colors 的威力：让浏览器接管你的颜色

forced-colors 媒体查询只有一个值：active。当用户启用了操作系统的高对比度模式，并且浏览器强制应用用户选择的颜色方案时，这个媒体查询就会生效。

这时候，你需要使用一些特殊的 CSS 属性来配合：

currentColor：表示当前元素的 color 属性的值。
Canvas：表示应用背景颜色的颜色。
CanvasText：表示应用文本颜色的颜色。
LinkText：表示应用链接颜色的颜色。
VisitedText：表示应用已访问链接颜色的颜色。
ButtonFace：表示应用按钮背景颜色的颜色。
ButtonText：表示应用按钮文本颜色的颜色。
Field：表示输入框背景颜色。
FieldText：表示输入框文字颜色。
Highlight：表示选中文本高亮背景颜色。
HighlightText：表示选中文本高亮文字颜色。

这些属性就像是占位符，告诉浏览器：“嘿，这个地方的颜色，你说了算！”

举个例子：

body {
  background-color: Canvas;
  color: CanvasText;
}

a {
  color: LinkText;
}

a:visited {
  color: VisitedText;
}

button {
  background-color: ButtonFace;
  color: ButtonText;
}

这段代码的意思是：

body 的背景色和文字颜色，由浏览器根据用户选择的颜色方案来决定。
链接的颜色和已访问链接的颜色，也由浏览器来决定。
按钮的背景色和文字颜色，同样由浏览器来决定。

这样，无论用户选择了什么样的高对比度主题，你的网页都能保证颜色清晰易辨。

四、实战演练：一个完整的例子

咱们来做一个简单的例子，一个包含标题、段落和按钮的网页，看看如何同时使用 prefers-contrast 和 forced-colors 来适配高对比度模式。

HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>高对比度模式示例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个示例文本，用于演示高对比度模式。</p>
  <button class="button">点击我</button>
</body>
</html>

CSS 代码 (style.css):

body {
  background-color: #fff;
  color: #333;
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  color: #007bff; /* Blue */
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

/* prefers-contrast: more */
@media (prefers-contrast: more) {
  body {
    background-color: #000;
    color: #fff;
  }

  h1 {
    color: #add8e6; /* Light Blue */
  }

  .button {
    background-color: #008000; /* Darker Green */
    color: #fff;
    border: 2px solid #fff;
  }
}

/* forced-colors: active */
@media (forced-colors: active) {
  body {
    background-color: Canvas;
    color: CanvasText;
  }

  h1 {
    color: LinkText; /* Or HighlightText, depending on the desired effect */
  }

  a {
    color: LinkText;
  }

  a:visited {
    color: VisitedText;
  }

  .button {
    background-color: ButtonFace;
    color: ButtonText;
  }
}

这个例子做了以下事情：

默认样式： 定义了网页的默认颜色方案。
prefers-contrast: more： 如果用户开启了高对比度模式，那么改变背景色、文字颜色和按钮的样式，让它们更加醒目。
forced-colors: active： 如果浏览器强制应用用户选择的颜色方案，那么使用 Canvas、CanvasText 等属性，让浏览器来控制颜色。

五、一些实用技巧和注意事项

不要过度依赖颜色： 不要仅仅使用颜色来传达信息。比如，不要只用红色来表示错误，最好加上文字提示或者图标。
测试你的代码： 在不同的操作系统和浏览器中测试你的代码，确保在高对比度模式下显示正常。
使用辅助工具： 可以使用一些辅助工具来检查你的网站的可访问性，比如 WAVE (Web Accessibility Evaluation Tool)。
了解用户的需求： 了解你的用户的需求，根据他们的反馈来改进你的网站。
谨慎使用 forced-colors： forced-colors 可能会覆盖你的样式，所以要谨慎使用，确保你的网站在高对比度模式下仍然可用。
避免使用透明色： 透明色在高对比度模式下可能会出现问题，尽量避免使用。
考虑使用 CSS 变量： 使用 CSS 变量可以让你更方便地管理颜色，在高对比度模式下更容易修改。

六、表格总结

特性	描述	适用场景
`prefers-contrast`	媒体查询，检测用户是否开启了高对比度模式，并根据用户的偏好调整网页的样式。	当你想根据用户的对比度偏好来定制网页的样式时。
`forced-colors`	媒体查询，指示浏览器强制应用用户选择的颜色方案。你需要使用 `Canvas`、`CanvasText` 等属性来配合。	当你需要确保你的网页在高对比度模式下颜色清晰易辨，并且完全由用户控制颜色方案时。
`currentColor`	表示当前元素的 `color` 属性的值。	当你想让某个元素的颜色和文本颜色保持一致时。
`Canvas`	表示应用背景颜色的颜色。	当你想让某个元素的背景颜色由浏览器根据用户选择的颜色方案来决定时。
`CanvasText`	表示应用文本颜色的颜色。	当你想让某个元素的文本颜色由浏览器根据用户选择的颜色方案来决定时。
避免透明色	透明色在高对比度模式下可能会出现问题，尽量避免使用。	任何场景，避免使用透明色可以提高可访问性。

七、最后的叮嘱

适配高对比度模式，不仅仅是为了满足规范，更是为了让你的网站更加包容，让每个人都能无障碍地访问。这是一种人文关怀，也是一种专业素养。希望今天的讲座能帮助你更好地理解和使用 prefers-contrast 和 forced-colors，让你的网页更懂用户的心。

好了，今天的讲座就到这里。感谢大家的聆听！祝大家写码愉快！

发表回复 取消回复

发表回复取消回复