未选中的复选框是否需要 >4.5 对比度才能符合 WCAG AA 标准？

Question

我正在尝试了解 WCAG AA 合规性的详细信息。此图像中未选中的复选框是否会被视为对比度太低而无法合规？

我们可以做些什么（除了更改颜色）来使其更合规吗？如果 tab-focus 使对比度上升，这就足够了吗？还是我们真的只需要提高对比度？

Answer 1

新的 WCAG 2.1 指南涵盖了这一点：1.4.11 Non-text Contrast

对于页面上的控件，例如按钮和表单域，组件的视觉边界必须与相邻背景有足够的对比度。此外，指示状态的视觉效果，例如组件是否被选中或聚焦，还必须提供与组件相邻背景的最小 3:1 对比度。

注意：标签焦点是不够的，因为它已经暗示使用键盘（例如，对于使用触摸屏的视力不佳的人来说，这不会有任何影响）

Answer 2

在提出问题时，WCAG 2.0 仍然是 W3C 的 Web 可访问性建议的最新版本。 Success criterion 1.4.3 [Contrast (Minimum)] 说，

文本的视觉呈现和文本的图像的对比度至少为 4.5:1，但以下情况除外：（AA 级）

• Large Text：大尺寸文字和大尺寸文字的图片的对比度至少为3:1；

• 附带：作为非活动用户界面组件一部分的文本或文本图像，纯粹是装饰，任何人都看不到，或者是包含重要其他内容的图片的一部分视觉内容，没有对比度要求。

• 标识：作为标识或品牌名称一部分的文字没有最低对比度要求。

此成功标准不涵盖复选框或其他用户界面元素（用户界面元素中的文本除外）等控件。根据WCAG 2.0的字母，截图中未选中的复选框都会通过。

为了堵住这个漏洞，WCAG 2.1 引入了new success criterion，1.4.11，措辞如下：

以下视觉呈现与相邻颜色的对比度至少为 3:1：

• 用户界面组件：识别用户界面组件和状态所需的视觉信息，不活动的组件或组件的外观由用户代理确定且未经作者修改的组件除外；
• 图形对象：理解内容所需的图形部分，除非图形的特定表示对于所传达的信息至关重要。

复选框符合“用于指示状态的视觉信息”的描述，因此新的 SC 将适用于此。在 2018 年 1 月的草案中，此成功标准目前被标记为“有风险”，但它通过了标准化流程，现在导致屏幕截图中未选中的复选框未通过 WCAG 2.1 AA 级。

2018 年 8 月 3 日更新：自从 WCAG 2.1 于 2018 年 6 月成为 W3C 建议以来，答案已更新以反映这一点。另请注意，符合 WCAG 2.1 的网页也符合 WCAG 2.0（添加了新的成功标准；现有标准保持其原始一致性级别）。