未选中的复选框需要> 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网站可访问性建议的最新版本。 Success criterion 1.4.3 [Contrast (Minimum)]说，

  

文本和文字图像的视觉呈现具有至少4.5：1的对比度，除了以下内容：（AA级）

     

  

• 大文字：大型文字和大型文字图片的对比度至少为3：1;

  

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

  

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

  

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

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

  

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

     

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

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

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