Windows高对比度模式指南

当我们谈论无障碍环境时，我们倾向于谈论很多东西--比如黑暗模式、键盘导航、偏好减弱动作和屏幕阅读器--但有一件事并没有得到那么多的关注。Windows高对比度模式（从现在开始，缩写为WHCM）。这是我在一些网站上看到的一种倾向，在这一点上，我们已经将一些可能损害用户在WHCM中的体验的做法规范化。在这篇文章中，我想解释一下它是什么，并给出一套好的做法，我们可以牢记在心，使我们的网站在这种模式下更加可用。

关于Windows高对比度模式

高对比度模式是一种无障碍功能，它通过将不同元素（如背景、按钮或文本）的颜色替换为一些用户设定的颜色来改变我们网站和Windows应用程序的外观。这有多种目的，比如增加可读性，通过移除某些元素来减少网站的视觉噪音（进而让它们有更好的焦点），并让用户完全控制网站的对比度。你可以通过进入设置，然后点击可访问性，最后点击高对比度来检查。

谈谈一些统计数据，根据Melanie Richard在她的演讲 "量身定做的网络：有效地尊重视觉偏好 "中的说法，大约4%的活跃设备使用Windows高对比度模式，而由于WebAIM的低视力用户调查，我们可以估计大约30%的低视力用户使用Windows高对比度模式。所有这些都应该给你一些关于使我们的网站对这种模式友好的重要性的观点。

高对比度模式 "这个名字有点误导，因为用户可以选择他们喜欢的颜色，导致调色板的对比度比平时低--这并不是一个很奇怪的情况。根据WebAIM的调查，大约3%的Windows高对比度模式的用户将其设置为创建低对比度的调色板。有偏头痛或光敏感的用户可以这样做，以减轻他们的残疾影响。只是为了给你一个简单的例子。

我相信你明白让我们的网站对WHCM友好的重要性，你可能认为由于它取代了我们很大一部分风格的性质，做一个适合这种模式的网站可能很难。好消息是，这并不难!我们只需要考虑一些重要的问题，确保用户体验不受损害。

关于Windows高对比度模式的考虑因素

尽管当我们的网站在WHCM中显示时，我们失去了很多控制权，但只要我们牢记一些注意事项，就可以让它不费吹灰之力。在我开始之前，我希望你能记住这个模式的黄金法则：在所有事情之上，高对比度模式是关于可用性的，我们需要尊重它，而不是任何其他美学问题。我们对这种模式的最大优先考虑是减轻可读性，并且不以任何方式损害用户体验。

我们怎样才能确保可读性和可用性在WHCM中发挥作用？对此，我们可以有一些重要的考虑。

使用语义化HTML

由于它对屏幕阅读器的重要性，当我们谈论无障碍性时，这一直是一个非常重要的话题，而它在WHCM中也非常重要！为什么？为什么？因为Windows会根据一个元素的语义来添加样式，而不是因为它在WHCM之外的样子。一个链接会有超链接的样式，一个按钮会有按钮文本的样式，诸如此类。

有些开发者（出于某种原因）决定在div上使用ria角色，以便将它们伪装成辅助技术的按钮。然而，在WHCM中，aria角色与Windows决定应用哪种样式无关，所以我们要依靠语义来使我们的网站在这种模式下正常工作。

为了验证这一点，让我们检查一下作为真正的按钮和链接的div在高对比度模式下使用同样的样式会有什么表现。

<div role="button" class="button" tabindex=0>
  Not a button
</div>
<button class="button">
  Definitely a button
</button>
<a href="#" class="button">
  This is a link
</a>

.button {
  padding: 0.5em 1em;
  border: 2px solid hotpink;
  background-color: hotpink;
  width: fit-content;
  border-radius: 0.5em;
  font-size: 1.5rem;
  font-family: sans-serif;
  text-decoration: none;
  color: black;
}

在默认设置中，DIV和按钮将具有相同的颜色，但请记住：用户可以改变这一点。让我们使用这个调色板，并让我们检查一下结果。

请注意，在WHCM中，语义对样式设计有重要的影响。记住，在这种模式下，我们必须专注于不损害用户的体验，而选择错误的元素会使用户感到困惑。

transparent 属性是有用的!

当我们为某些交互式组件（如按钮或链接）设计样式时，我们倾向于用border: none,outline: none, 或text-decoration: none 删除某些属性，因为这些属性可能与我们的设计系统不匹配。通常情况下，这不是一个坏主意，只要你记住这些组件的悬停或焦点状态等事项。然而，对于WHCM来说，这是一个严重的问题，因为背景元素被完全覆盖了，我们将依靠边框来区分这些组件和背景。

举个例子，我见过的一个很常见的设计模式是主按钮和副按钮，前者有背景色，没有边框，而后者只有边框，没有背景。这看起来不错，但当你在高对比度模式下看到它们时。

<button class="primary">
  Primary action
</button>
<button class="secondary">
  Secondary action
</button>

    button {
      font-size: 1.3em;
      padding: 0.5em 1em;
      border: none;
      font-family: sans-serif;
      border-radius: 0.4em;
      background-color: transparent;
    }

    .primary {
      background-color: hotpink;
    }

    .secondary {
      border: 2px solid hotpink
    }

主按钮很容易被误认为是一个普通的文本！这就是透明边框的作用。这就是透明边框发挥作用的地方，因为在高对比度模式下，透明的东西会被看到。因此，通过将按钮元素的边框属性替换成这样。2px solid transparent，我们会得到这样的结果。

    button {
      border: 2px solid transparent
    }

你可以想象，如果你使用属性text-decoration-color: transparent ，这也会发生在链接上，如果你使用outline-color: transparent ，则会发生在轮廓上。让我们来看看关于这些属性的一些快速例子。

text-decoration-color: transparent 如果你在你的网站中使用另一个元素来表示一个链接，那么 "链接 "是很有用的。举个例子，你可以使用background-image来制作下划线的动画，正如你在Kevin Powell制作的这个视频中看到的那样。然而，在WHCM中，你只能依靠用户在他的设置中的颜色，所以如果你想给一个额外的视觉线索，一个透明的下划线将在那里非常有效

在这种模式下，下划线是一个特别重要的话题，因为有些开发者依靠其他属性来为交互式元素添加焦点状态--比如改变background-color ，甚至是box-shadow hack（即使现在已经没有必要了，因为现在从Chrome 94和Firefox 88开始，下划线会跟随元素的border-radius ）。然而，在这种模式下，所有这些东西都会被完全覆盖，所以大纲仍然是WHCM中应用元素焦点状态的唯一可靠方式。永远记住这一点：如果你要使用不同于轮廓的东西来突出一个元素的焦点状态，请添加属性outline-color: transparent ，作为在这种模式下不丢失焦点状态的后备手段。

牢记滚动条

滚动条可以被样式化，但这是否意味着我们应该样式化它们？关于这个问题，有一些可用性和可访问性方面的担忧。我想说的是，根据你在WCM中的样式，在最好的情况下它们看起来很笨重，在最坏的情况下它们根本不可见。

有什么办法解决这个问题吗？这取决于你决定如何设计滚动条。有些人决定使用纯色来填充滚动条的拇指，这确实有一个非常简单的解决办法。假设我们决定以这种方式来设计我们的滚动条，那么你会去做这样的事情。

    ::-webkit-scrollbar {
      width: 20px; 
    }

    ::-webkit-scrollbar-track {
      background-color: #e4e4e4;
      border-radius: 100px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 100px;
      background-color: green;
    }
    

正如你可能猜到的那样，由于滚动条的background-color 属性被强行替换，因此在WHCM中滚动条将不可见。好消息是，我们已经看到了如何补救这个问题！透明边框可以覆盖这种情况。

透明的边框可以覆盖这种情况。你可以用它们来覆盖所有滚动条的拇指，它看起来会有一个纯色（你在设置中选择的文本颜色），这将与它在这种模式下作为默认滚动条的工作方式相当相似。按照我们之前的例子，如果我们使用属性border: 10px solid transparent ，它将使它看起来像在WHCM中拥有一个纯色的背景。

不过，对于使用box-shadow 嵌入的滚动条拇指，使用这种技术要小心。如果你这样做了，就会使它不可见。不是在WHCM中，我指的是在WHCM之外的地方看不见。你可以在Ahmad Shadeed制作的这个滚动条样式中检查这个问题，进入滚动条拇指样式，并添加我们之前添加的相同样式（border: 10px solid transparent ）。你会看到它将变得不可见，一个让它可见的好方法（无论是常规的还是在WHCM中）就是使用一个较小的边框（类似2px ，而不是10px ），使它在WHCM中看起来像这样。

它看起来很好!唯一的问题是，它在WHCM之外看起来有点奇怪，所以如果你决定使用内嵌的box-shadow 来设计滚动条，请记住这点。

请记住，所有这些只适用于基于Chromium的浏览器，因为Firefox有一种不同的方式来设计滚动条，即使用 scrollbar-color和 scrollbar-width属性来设计滚动条。好消息是，在WHCM中，你不需要做任何事情就可以使它正常工作！颜色将被覆盖。颜色将被覆盖，而滚动条的拇指将具有与用户设置的文本颜色相同的颜色。

图片的行为

我们有不同的方法在网站上使用图片：使用标签img ，background-image CSS属性，使用SVG，甚至是CSS艺术！让我们快速了解一下这些方法。让我们快速了解一下这些方法。img 标签在WHCM中的表现是一样的，所以我们来谈谈其他三种方法。

首先，我们有 background-image属性--只要你使用url() ，这个属性在WHCM中就会保持不变**。用background-image 做的渐变会被WHCM的背景色覆盖。然而，这其中只有一个问题。即使Firefox从2018-2019年左右开始支持高对比度模式下的背景图片，但如果你把background-image 放在 body 元素中**，它就看不到了。

你可以看看我做的CodePen，尝试在使用WHCM时打开它。所以要记住这一点，以防你使用这样的背景图片。

这就有点问题了。即使我们通常希望SVG保持不变，也应该有一种方法来管理这些特定场景的情况。好消息是，确实有这样的方法！这就是为什么我们要把SVG作为一种工具。不过，我们现在先给这个话题打个预防针吧。

请记住，这种情况只发生在基于Chromium的浏览器中--Firefox有自己的方法来管理这种情况。使用currentColor 属性的锚内的SVG将获得与用户设置的链接颜色相同的颜色。它甚至会尊重主题作为访问链接所使用的任何颜色，如图所示。

最后，我们还有CSS艺术。由于其使用盒状阴影和背景渐变等元素的性质，你可能会猜测它在WHCM中不会好看--你说得很对。由于它的艺术性，它没有什么大不了的，所以你应该没事。但是，如果它在你的网站中确实有用途，我们需要寻找一种方法来使其可见。关于CSS艺术的简单说明：请记住，你可以--而且应该--使你的CSS艺术具有可访问性！只要你牢记，你的CSS艺术是可以访问的。

只要你牢记这些小建议，我们的网站就差不多可以完成WHCM的工作了正如你所看到的，一些元素需要进行一些调整才能在这种模式下充分发挥作用，但幸运的是，CSS有办法帮助我们完成这最后一部分工作！这就是媒体查询。

媒体查询 强迫颜色

微软为创建一个支持WHCM的标准做出了努力，这项工作的结果是媒体查询forced-colors，它将帮助我们检测浏览器或操作系统是否启用了一种模式，将网站的样式限制在用户选择的调色板上。正如你可能猜到的，WHCM是其中最受欢迎的选择。

由于WHCM的工作方式，这个媒体查询的作用会有些不同。有些属性将被限制在某些值上，有些则根本无法被覆盖，而且我们还有新的属性值可以使用但在深入了解我们能用这个工具做什么之前，让我们记住，WHCM（和其他限制用户调色板的模式）优先考虑可用性，这是我们需要尊重的东西。所以不要使用这些属性，除非有必要调整你网站中的一些元素，使其在这种模式下具有良好的可用性。

说到这里，让我们开始讨论媒体查询本身。它有两个值：无和活动。前者会在没有强迫色彩模式时进行检测，后者会在有强迫色彩模式时进行检测。在强制颜色模式下，接下来的属性将被替换成用户设置的属性。

• color
• background-color
• text-decoration-color
• text-emphasis-color
• border-color
• outline-color
• column-rule-color
• -webkit-tap-highlight-color
• SVGfill 和stroke 属性

此外，还有一些属性会有强制行为。

属性	值
box-shadow	none
text-shadow	none
background-image	none (除非它是 )url()
color-scheme	light dark
accent-color	auto
scrollbar-color (Firefox)	auto

解释完这些，让我们来挖掘一下我们拥有的两个工具，我们可以用它们来增强这种模式下的体验。

强制-颜色-调整

现在，我们怎样才能改变这些属性的行为方式？有一种方法可以避免WHCM覆盖颜色，这就是通过使用属性forced-color-adjust 。这个属性有两个值：auto 和none ，它将让我们决定是否要让一个元素的颜色分别被用户代理的颜色取代。让我们来看看这些工作的例子，没有比我们在上一节中留下的那些例子更好的了！让我们检查一下这些工作的例子。

让我们用我们先前使用的外部链接的SVG来检查一下这个链接。请记住，在基于Chromium的浏览器中，这个SVG不会改变它的颜色来匹配作为链接颜色的SVG，因为SVG的默认值是无。因此，如果我们将属性forced-color-adjust: auto ，添加到我们的SVG中，如下所示。

.inline-icon {
  /* Previous CSS properties */
  forced-color-adjust: auto;
}

这将是我们的结果。

我知道这一节是关于媒体查询本身的，通常，你要做的是像这样把这个规则放在媒体查询里面。

@media screen and (forced-colors: active) {
  .inline-icon {
    forced-color-adjust: auto;
  }
}

这是一个有效的方法（说实话，也是最直观的方法）。然而，当我为这篇文章做一些实验时，我注意到你可以把这个属性放在一个元素中，而不需要使用媒体查询，而且你会得到同样的结果！因为这个属性只影响一个元素，而不是其他元素。而且，由于这个属性只影响这个元素在强制颜色情况下的行为，它不会给你带来任何意外的行为。

现在，对于CSS艺术，我们希望情况正好相反（同样，只要这个CSS对于给用户提供足够的背景是必要的），所以我们可以在艺术的父元素中使用forced-color-adjust: none ，现在在WHCM中，所有的艺术都是可见的。

你可能会想，这并不是forced-color-adjust: none 的常见用例，你是对的，所以我们来看看一个更现实的用例：在你的网站上显示调色板让我们看看任何由mycolor.space生成的调色板，比如说。

这些颜色是不可见的，它是网站的一个重要部分，所以如果我们去颜色容器元素，并添加这个属性，我们将解决这个问题。

系统颜色

现在让我们来谈谈颜色问题。通过媒体查询forced-colors ，我们有少量的系统颜色可以使用。你可以在MDN的文档中看到一个颜色列表，我们可以使用这个颜色列表来替换某些属性。例如，使用属性color: LinkText 将使它看起来像一个链接。

只要记住：这些颜色与HTML语义密切相关，所以也许你最好把一个元素改为正确的标签，而不是试图在WHCM中改变它的外观。这并不意味着它没有用途。我们只是要确保我们这样做是出于正确的原因。哪个是使用这个的好理由？嗯，这取决于你所创建的内容的复杂性。让我们举个例子，我在 "属性 "的帮助下创建的这个链接。 clip-path属性。

.link {
  --clip-path: polygon(0% 0%, calc(100% - 0.8em) 0%, 100% 0.8em, 100% 100%, 0.8em 100%, 0% calc(100% - 0.8em));
  font-size: 2rem;
  padding: 0.1em;
  border: none;
  background-color: #0E0054;
  clip-path: var(--clip-path);
  font-family: sans-serif;
}

.link:focus {
  outline: none;
}

.link:focus span, .link:hover span {
  outline-offset: -0.5em;
  outline: 3px solid transparent;
  background-color: #0E0054;
  color: white;
  text-decoration-color: white;
}

.link span {
  display: inline-block;
  padding: 0.5em 1.2em;
  clip-path: var(--clip-path);
  background-color: white;
  color: #0E0054;
  text-decoration: underline #0E0054;
  text-underline-offset: 2px;
}

.link span {
  display: inline-block;
  padding: 0.5em 1.2em;
  clip-path: var(--clip-path);
  background-color: white;
  color: #0E0054;
  text-decoration: underline #0E0054;
  text-underline-offset: 2px;
}

让我们对WHCM中这个元素的问题做一个快速检查。

• 我用background-color 来模仿这个元素的边框，但由于它是一个背景，所以在WHCM中是看不到的。
• 即使我用一个透明的轮廓在这种模式下做一个焦点状态，它的颜色也会是系统用作链接的颜色，而不是WHCM通常的轮廓颜色。

考虑到这一点，我们可以使用媒体查询forced-colors 来调整系统的颜色，通过向用户展示那是一个链接来给他们足够的视觉反馈。

@media screen and (forced-colors: active) {
  .link {
    background-color: LinkText;
  }

  .link:visited {
    background-color: VisitedText;
  }

  .link:focus span {
    outline-color: Highlight;
  }
}

请记住Firefox对链接有一个访问状态的颜色，所以要尊重这一点。我们应该在我们链接的visited 伪类中添加VisitedText 系统颜色。说到这里，这就是我们的结果。

另一个关于我们如何使用系统颜色来调整体验的简单例子是我们在上一节中看到的：滚动条！这就是我们的结果。让我们假设，由于某些原因，透明边框不是一个选项。在这种情况下，我们可以使用系统颜色来使我们的滚动条在这种模式下看起来很好让我们回到我们之前使用的一个例子，我们不使用透明边框，而是使用媒体查询来调整滚动条的拇指颜色。

::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-color: green;
}

@media screen and (forced-colors: active) {
  ::-webkit-scrollbar-thumb {
    background-color: CanvasText;
  }
}

这个媒体查询的其他用途

正如你所读到的，如果需要的话，强制调整颜色和系统颜色是调整我们设计的好工具，但这并不是我们用这个媒体查询能做的全部。是的，我们看到有些属性被限制在某些用途上，但大多数属性都可以正常使用请记住，这只是为了提高WHCM的可用性，所以没有必要在这方面太过疯狂。只是在需要的时候使用。

让我们回到我们使用的剪辑路径链接。你可以决定它在WHCM中的样子是使用一个更简单的设计，比如也许只是使用一个普通的边框元素。我们可以这样做!让我们忽略我在之前的例子中使用的CSS规则，让我们用这些规则来代替。

@media screen and (forced-colors: active) {
  .link {
    --clip-path: none;
    border: 3px solid transparent;
    border-radius: 8px;
  }

  .link:focus {
    outline: 3px solid transparent;
    outline-offset: 3px;
  }

  .link:focus span {
    outline: none;
  }
}

这就是我们的结果。

用这种方法，你仍然可以向用户展示这是一个链接，而且你避免了这个主题可能带来的任何混淆。在这个媒体查询中使用CSS属性可以打开一些有趣的门来改善网站的工作方式。你可以在这种模式下删除一个仅仅是装饰性的图片--用display: none （如果你使用了一个img标签）或background-image: none （如果你用CSS添加它）--如果你认为它能带来更好的体验--对于有偏头痛的用户来说，它可能有非常明亮的颜色，或者它可能有点令人分心，例如。

只要你在你的网站中用这种模式优先考虑可用性，它应该是足够好的。然而，只要你考虑到我之前提到的建议，大多数时候你可能并不需要它。

你也可以在这种模式下使用自定义属性，这将导致一些有趣的使用，你可以在Eric Bailey的这篇文章中看到。

其他资源

需要注意的是，在你仍然需要支持Internet Explorer的情况下，媒体查询forced-colors ，将无法工作。如果你想知道如何在这个浏览器中支持高对比度模式，你可以在Greg Whitworth写的这篇文章和Adrian Roselli写的这篇文章中阅读。对于本文所涉及的主题，你可以阅读以下文章。

• 微软Edge团队写的 "用新的强迫色彩标准为Windows高对比度设计样式"。
• "使用JavaScript来检测高对比度和黑暗模式"，作者：Scott O'Hara。
• Dietra Rater的 "让网站在Windows高对比度模式下工作"，这是一个关于这个主题的可汗学院网站的案例研究。

结束语

Windows高对比度模式是我看到一些网站忽略的东西，这可能会给使用这种无障碍功能的人带来问题。好消息是，我们有足够的工具来使我们的网站在WHCM中工作得很好，甚至在微软努力创建媒体查询forced-colors - 这打开了新的大门，使我们的网站在这种模式下看起来更好。请记住：这是一个可访问性和可用性的功能，所以当你想在这种模式下调整你的项目时，请记住这一点!

在Smashing杂志上的进一步阅读

• "Windows高对比度模式、强制颜色模式和CSS自定义属性"，Eric Bailey
• "使用CSS Color-Contrast()管理无障碍设计系统主题"，Daniel Yuschik
• "当CSS不够用时。无障碍组件的JavaScript要求》，Stephanie Eckles
• "无障碍前端组件完整指南》，Vitaly Friedman