如何提供一种易于使用的高对比度替代柔和的配色方案？

Question

如何确保网站的颜色主题提供符合WCAG 2 最低对比度要求的高对比度替代方案，同时更喜欢柔和的低对比度主题，除非用户想要或需要更高的对比度？

我尝试定义一个具有较高对比度的后备主题，并提供较低对比度的版本，除非用户需要高对比度，使用prefers-contrast媒体查询，但以下示例（也作为此处的codepen，未通过 axe 的可访问性审核Chrome 扩展程序由于前景色 2.71 的低对比度：#eeeeee，背景色：#f26600。）

需要什么 CSS 代码来定义正确的后备？用户希望如何表明他们的对比度偏好，是否有办法让浏览器或操作系统根据日光设置、暗/亮主题、环境光传感器等来适应对比度偏好？

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

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

我还尝试反转代码片段中的逻辑，使高对比度成为实际默认值，而不是相反：codepen.io/openmindculture/pen/eYVPgoo。这在没有颜色对比警告的情况下验证，但是这会显示柔和的版本吗？我在哪里可以声明我更喜欢较少的对比度，我怎么知道？

Answer 1

那\xe2\x80\x99是一个非常有趣的问题。

\n

关于提供替代对比版本

\n

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

\n

不过，他们确实需要以下内容：

\n

\n

\n
1. 原始页面上的链接或控件本身必须满足所需 SC 的对比度要求。（如果用户看不到该控件，他们可能无法使用它转到新页面。）
\n
2. 新页面必须包含与原始页面相同的所有信息和功能。
\n
3. 新页面必须符合所有 SC 以获得所需的一致性级别。（即，新页面不能仅具有所需的对比度级别，但在其他方面不符合要求）。
\n

\n

\n

由于您只想切换样式，所以\xe2\x80\x99很可能会遇到2和3。您只需要添加一个切换样式的按钮即可。

\n

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

\n

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

\n

这将允许支持这些的浏览器（Firefox）向用户提供样式切换。请参阅替代样式表

\n

然后添加一个通过 JavaScript 激活该样式表的按钮，以及一个在以下情况下导入该样式表的媒体查询：@media (prefers-contrast: more)。

\n

当替代样式表处于活动状态时，不确定您的审核工具是否会通过该审核工具。最后，为了符合法律规定，手动审核始终是必要的，您应该通过 1.4.3。

\n

用户如何表明他们的对比度偏好

\n

当时有一场关于字体大小控件是否应该成为网站一部分的大讨论，因为它已经在浏览器中可用很长时间了。WCAG 从未要求这样做（据我所知），但在网站上进行控制的理由是许多用户对他们的浏览器不够了解。

\n

同样的参数也适用于对比度模式（很多人可能不知道 OS\xe2\x80\x99s 对比度设置，或者不知道 \xe2\x80\x99t 有权访问它们），但这次 WCAG 实际上要求以任何方式进行控制。

\n

有没有办法让浏览器或操作系统根据日光设置、暗/亮主题、环境光传感器等调整对比度首选项？

\n

有多种方法可以根据 Android 中的日光设置来使用深色主题设置，并且可能有一些应用程序允许根据环境光进行切换。

\n

我不知道有什么功能允许基于此设置对比度模式，即使在Windows 11 中也没有，它大大提高了其可访问性对比度主题。

\n

这可能是有道理的，因为它\xe2\x80\x99更多地表明用户需要更高的对比度，无论是白天还是晚上，浅色还是深色主题。

\n