未选中的复选框是否需要大于4.5的对比度才能符合WCAG AA？ [英] Do unselected checkboxes need to be >4.5 contrast ratio to be WCAG AA compliant?

问题描述

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

I'm trying to understand the details of WCAG AA compliance. Would the unselected checkboxes in this image be considered too low-contrast to be compliant?

我们有什么能做的（除了改变颜色之外） ）以使其更合规？如果使用制表符焦点使对比度上升，就足够了吗？还是我们真的只需要增强对比度？

Is there anything we can do (other than change the color) to make it more compliant? If tab-focus makes the contrast go up, is that enough? Or do we really just need to boost the contrast?

推荐答案

在提出问题时，WCAG 2.0仍然是最新版本的W3C的Web可访问性建议。 成功标准1.4.3 [对比度（最低）]

At the time when the question was asked, WCAG 2.0 was still the most recent version of the W3C's web accessibility recommendation. Success criterion 1.4.3 [Contrast (Minimum)] says,

视觉效果的文字和文字图像的对比度至少为4.5：1，但以下条件除外：（ AA级）

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• 大文本：大型文本和大型图像比例文本的对比度至少为3：1；

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

偶然：属于文本一部分的文本或图像不活动的用户界面组件，它是纯装饰，对任何人都不可见，或者是包含显着其他视觉内容的图片的一部分，没有对比度要求。

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

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

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

控件，例如复选框或其他用户界面元素（用户界面元素中的文本除外）不属于此成功标准。根据WCAG 2.0的字母，屏幕快照中未选中的复选框将通过。

Controls such as checkboxes or other user interface elements (except for text in user interface elements) are not covered by this success criterion. According to the letter of WCAG 2.0, the unselected checkboxes in the screenshot would pass.

为了弥补这一漏洞，WCAG 2.1引入了新的成功标准，第1.4.11条，其措词如下：

In order to close this loophole, WCAG 2.1 introduced a new success criterion, 1.4.11, which is worded as follow:

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

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

• 用户界面组件：识别用户界面组件和状态所需的视觉信息，但不活动的组件或组件的外观由用户代理确定且未经作者修改的组件除外；


• 图形对象：理解内容所需的部分图形，除非特殊的图形表示对于所传达的信息至关重要。

• User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
• Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

复选框适合描述用于指示状态的视觉信息，因此新的SC将在此处适用。在2018年1月的草案中，此成功标准当前被标记为有风险，但它已通过标准化过程实现，并且现在使屏幕快照中未选中的复选框无法通过WCAG 2.1 AA级认证。

The checkboxes fit the description "visual information used to indicated states", so the new SC would apply here. In the January 2018 draft, this success criterion is currently marked as "at risk", but it made it through the standardisation process, and now causes the unselected checkboxes in the screenshot to fail WCAG 2.1 Level AA.

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

UPDATE 3 August 2018: since WCAG 2.1 became a W3C recommendation in June 2018, the answer has been updated to reflect this. Also note that webpages that meet WCAG 2.1 also meet WCAG 2.0 (new success criteria were added; existing ones remained at their original conformance level).

这篇关于未选中的复选框是否需要大于4.5的对比度才能符合WCAG AA？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！