如果我提供 WCAG 2.1 遵守的替代颜色版本，我可以在网站的默认版本上使用任何颜色吗

Question

我对无障碍内容不熟悉，想从这里的专家那里获得一些关于该主题的观点。如果提供了颜色集的替代版本（黑-白、黑-黄和增强默认值），我可以在不遵守 WCAG 2.1 的默认版本颜色上使用吗？

我想使用 CSS 插件在单击按钮时通过类更改颜色。我只是想知道是否允许使用对比度不足的颜色。

Answer 1

最好的指导是默认情况下有足够的对比度。您提到黑/白和黑/黄作为替代方案。这些被认为是“高对比度”，并且不是 WCAG AA 所要求的。事实上，甚至 WCAG AAA 也没有要求，这只建议对比度为 7:1 (WCAG 1.4.6)。

黑/白的对比度为 21:1，黑/黄的对比度为 19.6:1。这些都是极高的对比度。 7:1 的对比度仍然相当高，但标准 WCAG 2.1 AA 标准并不要求（但这是一个不错的选择 - 如果您让用户选择他们的配色方案）。

例如，stackoverflow 上的“相关问题”部分显示带有白色文本的绿色按钮。

绿色背景上的白色文本的对比度为 2.4:1，未通过 WCAG。

Foreground: #FFFFFF
Background: #5EBA7D
The contrast ratio is: 2.4:1

虽然 stackoverflow.com 可以 提供指向具有更好对比度的替代网站的链接，但为什么不直接修复“真实”网站呢？将绿色调暗一点可以使其对比度达到 4.6:1，这使得每个人更容易阅读。

Foreground: #FFFFFF
Background: #2A8649
The contrast ratio is: 4.6:1

使绿色更暗，#0B672A，使其对比度达到 7:1，无需使用“高对比度”模式即可满足 WCAG AAA。

Foreground: #FFFFFF
Background: #0B672A
The contrast ratio is: 7.0:1