如何提供一种可接近的高对比度替代粉彩配色方案？

Question

如何确保网站的颜色主题提供符合WCAG 2最低对比度要求的高对比度选项，同时选择柔和、低对比度的主题，除非用户希望或需要更高的对比度？

我试图定义一个对比度较高的回退主题，并提供一个较低的对比度版本，除非用户需要高对比度，使用偏好-对比媒体查询，但下面的示例(也是一个代码在这里，由于前景颜色的对比度低2.71而导致axe Chrome扩展无法通过可访问性审核：#eeeeee，背景颜色：#f26600)。

定义适当的回退需要哪些CSS代码？用户如何指示他们的对比度偏好，是否有办法使浏览器或操作系统根据日光设置、暗/光主题、环境光传感器等来调整对比度偏好？

p {
  background-color: #f26600;
  color: #eeeeee;
}

@media (prefers-contrast: more) {
  p {
    background-color: #aa3300;
    color: #ffffff;
  }
}

我还试图反转代码片段中的逻辑，以使实际的缺省值具有很高的对比度，而不是相反：Codemen.io/openmindculture/pen/eYVPgoo。这是有效的，没有颜色对比警告，但这是否会显示平淡的版本？我在哪里可以说我希望少一点对比，我怎么知道呢？

Answer 1

这是个很有趣的问题。

关于提供另一种对比版本

提供的控件具有足够的对比度比率，允许用户切换到使用足够对比度的的演示文稿，实际上是满足WCAG对比标准的充分技术。

但是，它们确实需要以下几点：

1. 原始页面上的链接或控件本身必须满足所需SC的对比要求。(如果用户看不到控件，他们可能无法使用它转到新页面。)
2. 新页必须包含与原始页相同的所有信息和功能。
3. 新页面必须符合所有SC，以达到所需的一致性水平。(也就是说，新页面不能只是具有所需的对比度，否则就不符合)。

因为您只想切换样式，所以很可能会遇到2和3，您只需要添加一个按钮就可以切换样式。

您可以有第二个样式表(.css文件)来定义对比版本。然后，您可以执行以下操作：

<link href="contrast.css" rel="alternate stylesheet" type="text/css" title="Contrast Styles">

这将允许支持这些浏览器(Firefox)为用户提供样式切换。请参阅备选样式表

然后添加一个通过JavaScript激活样式表的按钮，并添加一个媒体查询(如果@media (prefers-contrast: more)导入它)。

当备选样式表处于活动状态时，您的审计工具是否会传递给您，这是不确定的。最后，对于法律上的一致性，手动审核总是必要的，在这里，您应该通过1.4.3。

用户应该如何表示他们的对比偏好？

在过去的几天里，关于字体大小的控制是否应该成为站点的一部分是一个很大的讨论，因为它在浏览器中已经存在很长时间了。WCAG从来没有要求过它(afaik)，但是在网站上使用控件的理由是很多用户对他们的浏览器不够了解。

同样的参数也适用于对比度模式(很多人可能不知道操作系统的对比度设置，或者无法访问这些设置)，但这次WCAG实际上需要任何方式的控制。

是否有办法使浏览器或操作系统根据日光设置、暗/光主题、环境光传感器等来调整对比度偏好？

有一些方法可以根据Android中的日光设置来使用暗主题设置，还有一些允许在环境光基础上切换的应用程序。

我不知道有什么特性允许在相同的基础上设置对比度模式，甚至在Windows 11，它极大地改善了它们的可访问性，对比了主题。中也是如此。

这可能是有意义的，因为它更多的是一个声明，用户需要更高的对比度，无论是白天还是夜晚，光明还是黑暗的主题。

Answer 2

作为一种解决方法，我们可以在CSS中将高对比度的颜色设置为默认方案，并使用JavaScript应用替代的淡色颜色。

在验证工具中使用超时可以防止出现错误的阳性颜色对比警告，因为验证工具不承认我们尊重用户的对比度首选项，只要工具足够快地在其他颜色应用之前完成其审核。使用CSS转换，切换成为一个平滑的淡出，这可以被认为是一个优雅的网页设计效果。

在CSS中不依赖prefers-contrast媒体查询可以解决这两个问题

• 当前的浏览器似乎忽略了@media (prefers-contrast: less)
• 验证工具，如斧头浏览器插件，即使对于不限于(prefers-contrast: more)媒体查询的默认样式规则，也坚持足够高的对比度。

我们可以改用柔和的颜色。

• 加载另一个CSS文件，或
• 修改CSS自定义属性，或
• 删除某些类名。

在下面的代码示例(将在axe颜色对比审计中验证)中，我使用了两个特殊的CSS类名：

• contrast--more用于应用初始高对比度颜色，
• contrast--varies用于指示哪些元素具有选项，并在这些元素的颜色上应用CSS转换，

.contrast--varies {
  transition: background-color 2s ease-out, color 2s ease-out;
}

​

document.addEventListener('DOMContentLoaded', () => {
      const prefersMoreContrastQuery = window.matchMedia("(prefers-contrast: more)");
  if (prefersMoreContrastQuery && !prefersMoreContrastQuery.matches) {
    window.setTimeout(() => {
      const moreContrastElements = document.getElementsByClassName("contrast--varies");
      for (let i = 0; i < moreContrastElements.length; i++) {
         moreContrastElements[i].classList.remove("contrast--more");
      }
    }, 5000);
  }
});

.contrast--varies {
  transition: background-color 2s ease-out, color 2s ease-out;
}

.pastelboxes div:first-child {
  color: #fff;
  background: #dbcc7c;
}

.pastelboxes div:nth-child(2) {
  color: #fff;
  background: #e2d7c1;
}

.pastelboxes div.contrast--more:first-child {
  background-color: #9a8800;
}

.pastelboxes div.contrast--more:nth-child(2) {
  background-color: #966e37;
}

.pastelboxes div {
  padding: 1em;
  font-size: 24px;
  font-weight: bold;
}

<div class="pastelboxes">
  <div class="contrast--varies contrast--more">
    Some like pastel colors...
  </div>

  <div class="contrast--varies contrast--more">
    ...but illegible text for many people?!
  </div>
</div>

​