WCAG AA对非文本元素和UI控件的对比度要求

Question

我试图确保我正确解释了WCAG 2.0 AA对比度要求：

  

文本和文本图像的视觉呈现方式的对比度至少为4.5：1

     

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

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

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

Answer 1

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

由于这个原因，WCAG 2.1引入了SC 1.4.11 Non-text Contrast，它适用于用户界面组件和图形对象。此成功标准还适用于“非文本元素，例如UI选择控件（复选框，单选按钮，开关，滑块等）”（引自问题）。

Understanding Success Criterion 1.4.11包含许多示例，例如按钮，复选框，单选按钮，星级小部件以及各种类型的图形对象。即使成功条件也适用于该类型的组件，该文档也没有包含滑块示例（例如，滑块的拇指具有足够的对比度，显然还有其值）。

如果您在要求符合WCAG 2.1的司法管辖区工作，则适用SC 1.4.11。如果您在仍需要符合WCAG 2.0且尚未符合WCAG 2.1的辖区中工作，则SC 1.4.11尚不适用于您的内容，尽管满足此要求是一个好主意。

Answer 2

克里斯托夫（Christophe）在理解规则方面给出了很好的答案。我想添加一些太大的东西来发表评论。

停止追求合规性，并将WCAG用作检查清单，而不是一组要求

WCAG的关键部分是“ G”-准则。编写它们是为了指导和教育，而不是硬性规定（可悲的是，那样就不会有太多的困惑了。。。但是那是另一天了！呵呵）

因此对于上面的示例，您已经意识到颜色对比度是一个问题。太棒了，现在专注于诸如“色彩对比度较低的人如何使用我的网站”之类的问题

当您这样做时，您需要越来越少地依赖WCAG逻辑。您有一个按钮来控制某些东西吗？然后确保高对比度。

有动作图标吗？确保它足够大，适合那些视力不好的人。

一种更好的可访问性方法（一旦您知道WCAG的广泛用法）是询问“某人将如何访问此项目：”

• 具有低对比度的感知（比例为4.5：1或更高，但仍为7：1）
• 谁是完全色盲的人（颜色不仅是传达含义的方式）
• 谁是盲人（是否需要ARIA，我的ARIA标签和标签是否正确，是否已通过屏幕阅读器进行了测试？）
• 谁是聋人（字幕，成绩单和字幕，BSL和ASL，如果您真的要这么做的话！）
• 谁行动不便（想想“帕金森”-即使摇晃的鼠标/手也足以点击按钮，移动设备上有足够的空白空间来滚动页面，而您的准确性较差则无需点击链接）。
• 患有焦虑症的人（简单的设计，可以撤消操作，无需明确声明就可以进行任何更改，例如，如果过滤列表不会自动更新，请改用“应用”按钮（或自动发出警告）更新，这是可以预期的），没有自动播放的视频，可以关闭动画等。）

• 患有学习障碍/认知障碍的人（阅读年龄为12岁*-简单的单词，表格带有标签，因此可以看到所填写的内容（由屏幕阅读器覆盖）无论如何），没有复杂的验证码等。

  • 12岁的阅读年龄为五分之一的成年人（至少在英国）具有12岁的阅读年龄，因此不要疏远他们-不仅对残疾人有帮助（因为大多数人可以访问）东西）

如果您感觉特别勇敢，请考虑使用视线技术或语音软件（例如，严重的活动性/四肢瘫痪）的人（例如龙自然说话）与您的网站互动。

如果您考虑人，并且更多地关注人如何互动以及个人可能具有的要求，那么您只需花一半的精力就能在可访问性方面提高两倍。

然后它成为您在设计时的思维方式的一部分，您将为按钮等留出足够的空间。您还开始更多地评估语义（将<button>元素作为按钮而不是<div>-令人震惊！）。

TL; DR-抱歉，有点rant恼，希望您能专注于人员及其需求，而不是规则/准则