非文本元素和 UI 控件的 WCAG AA 对比度要求 [英] WCAG AA contrast ratio requirements for non-text elements and UI controls

问题描述

我正在努力确保我正确解释了 WCAG 2.0 AA 对比度要求:

I'm trying to make sure I'm interpreting WCAG 2.0 AA contrast requirements correctly:

文字的视觉呈现与文字的图像至少要有4.5:1的对比度

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

最小对比度成功标准 (1.4.3) 适用于页面中的文本，包括占位符文本和当指针悬停在对象上或对象具有键盘焦点时显示的文本.如果页面中使用了其中任何一个，则文本需要提供足够的对比度.虽然此成功标准仅适用于文本，但图表、图形、图表和其他非基于文本的信息中显示的内容也会出现类似问题.以这种方式呈现的内容也应该具有良好的对比度，以确保更多用户可以访问信息.

The minimum contrast success criterion (1.4.3) applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast. Although this Success Criterion only applies to text, similar issues occur for content presented in charts, graphs, diagrams, and other non-text-based information. Content presented in this manner should also have good contrast to ensure that more users can access the information.

这是否意味着所有文本元素的最小对比度至少应为 4.5:1，但非文本元素如 UI 选择控件(复选框、单选按钮、开关、滑块等)没有对比度要求?

Does this mean that all text elements should have a minimum contrast ratio of at least 4.5:1, but non-text elements such as UI selection controls (checkboxes, radio buttons, switches, sliders, etc) have no contrast ratio requirement?

参考:https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

推荐答案

在 AA 级，SC 1.4.3 不是唯一与对比度相关的 WCAG 2.1 成功标准.SC 1.4.3 已经存在于 WCAg 2.0 中，仅适用于文本.这为许多其他类型的内容留下了漏洞，这些内容对用户的理解很重要但不依赖于文本.

At level AA, SC 1.4.3 is not the only WCAG 2.1 success criterion related to contrast. SC 1.4.3 already existed in WCAg 2.0 and applied only to text. This left a loophole for many other types of content that are important for a user's understand but don't rely on text.

为此，WCAG 2.1 引入了SC 1.4.11 Non-text Contrast，适用于用户界面组件和图形对象.此成功标准也适用于非文本元素，例如 UI 选择控件(复选框、单选按钮、开关、滑块等)"(引自问题).

For this reason, WCAG 2.1 introduced SC 1.4.11 Non-text Contrast, which applies to user interface components and graphical objects. This success criterion also applies to "non-text elements such as UI selection controls (checkboxes, radio buttons, switches, sliders, etc)" (quoted from the question).

了解成功标准 1.4.11 包含许多示例，例如按钮、复选框、单选按钮、星级评分小部件和各种类型的图形对象.该文档不包含滑块示例，即使成功标准也适用于该类型的组件(例如滑块的拇指有足够的对比度及其值).

Understanding Success Criterion 1.4.11 contains many examples, such as buttons, check boxes, radio buttons, star rating widgets, and various types of graphical objects. The document does not contain a slider example, even though the success criterion applies also to that type of component (e.g. sufficient contrast for the thumb of a slider and obviously its values).

如果您在需要遵守 WCAG 2.1 的司法管辖区工作，则 SC 1.4.11 将适用.如果您在仍然需要符合 WCAG 2.0 而尚未符合 WCAG 2.1 的司法管辖区工作，则 SC 1.4.11 尚不适用于您的内容，尽管满足该要求是个好主意.

If you work in a jurisdiction that requires conformance to WCAG 2.1, SC 1.4.11 will apply. If you work in a jurisdiction that still requires conformance WCAG 2.0 and not yet to WCAG 2.1, SC 1.4.11 does not yet apply to your content, although it's a good idea to fulfil that requirement.

这篇关于非文本元素和 UI 控件的 WCAG AA 对比度要求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！