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

Christophe 在理解规则方面给出了很好的答案。我想添加一些太大而无法发表评论的内容。

停止以合规为目标，将 WCAG 更多地用作清单而不是一组要求

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

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

当您这样做时，您需要越来越少地依赖 WCAG 的逻辑。你有一个按钮来控制什么？然后确保它是高对比度的。

有一个动作图标？确保它对于视力不佳的人来说足够大。

处理可访问性的更好方法（一旦您了解 WCAG 的大致内容）是询问“某人如何访问此项目：”

• 具有低对比度感知（比例为 4.5:1 或更好，但为 7:1）
• 谁是完全色盲（颜色不仅仅是传达意义的方式）
• 谁是盲人（它需要 ARIA，我的 ARIA 标签和标签是否正确，用屏幕阅读器测试过？）
• 谁是聋人（字幕、文字记录和字幕、BSL 和 ASL，如果你真的想要的话！）
• 谁是行动不便（想想帕金森 - 按钮足够大，即使鼠标/手晃动也可以点击，移动设备上有足够的空白区域可以触摸滚动区域而无需点击链接，但准确性较差)。
• 患有焦虑症（简单的设计，可以撤消操作，没有明确说明没有任何变化，例如，如果过滤列表不自动更新，而是有一个应用按钮（或自动警告它）更新，所以它是预期的），没有自动播放视频，可以关闭动画等）

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

  • 12 岁的阅读年龄占 5 分之一的成年人（至少在英国）的阅读年龄为 12 岁，因此不要疏远他们 - 不仅有助于残疾人（与大多数无障碍环境一样）东西）

如果您觉得特别勇敢，请想想那些使用眼睛注视技术或语音软件的人（行动不便/四肢瘫痪）（例如Dragon Naturally speak) 与您的网站互动。

如果您考虑人并更多地关注人们如何互动以及个人可能有什么要求，那么您将事半功倍地获得可访问性。

然后它成为你设计时思考的一部分，你将为按钮等留出足够的空间。你也开始更加重视语义（<button> 元素作为按钮而不是<div> - 令人震惊！）。

TL;DR - 抱歉，这里有点啰嗦，希望你明白关注人员及其要求而不是规则/指南

Answer 2

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

为此，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 尚不适用于您的内容，尽管满足该要求是个好主意。