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

如何确保网站的颜色主题提供符合以下要求的高对比度替代方案WCAG 2 最低对比度要求 https://webaim.org/articles/contrast/#sc143除非用户想要或需要更高的对比度，否则更喜欢柔和的低对比度主题？

我尝试定义一个具有较高对比度的后备主题，并提供较低对比度的版本，除非用户需要高对比度，使用偏好对比媒体查询 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast，但是下面的例子（也作为代码笔在这里 https://codepen.io/openmindculture/pen/OJQBMPQ由于前景色 2.71 的低对比度：#eeeeee，背景色：#f26600，它未能通过 axe Chrome 扩展的可访问性审核。）

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

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

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

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

这是一个非常有趣的问题。

关于提供替代对比版本

提供具有足够对比度的控件，允许用户切换到使用足够对比度的演示文稿实际上是一个足够的技术来满足 WCAG 的对比标准 https://www.w3.org/WAI/WCAG21/Techniques/general/G174.html.

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

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

由于你只想切换样式，很可能会遇到2和3。你只需要添加一个切换样式的按钮即可。

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

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

这将允许支持这些的浏览器（Firefox）向用户提供样式切换。看替代样式表 https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets

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

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

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

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

同样的论点也适用于对比度模式（很多人可能不知道操作系统的对比度设置或无法访问它们），但这次 WCAG 实际上要求以任何方式进行控制。

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

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

我不知道有任何功能允许基于相同的设置对比度模式，即使在Windows 11 大大提高了其可访问性对比主题 https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696.

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