非文本元素和 UI 控件的 WCAG AA 对比度要求
WCAG AA contrast ratio requirements for non-text elements and UI controls
我正在努力确保我正确解释了 WCAG 2.0 AA 对比度要求：
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
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 选择控件（复选框、单选按钮、开关、滑块等） ) 没有对比度要求？
参考：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 中并且仅适用于文本。这为许多其他类型的内容留下了漏洞，这些内容对于用户的理解很重要但不依赖于文本。
为此，WCAG 2.1 引入了SC 1.4.11 Non-text Contrast，它适用于用户界面组件和图形对象。此成功标准也适用于 "non-text elements such as UI selection controls (checkboxes, radio buttons, switches, sliders, etc)"（从问题中引用）。
Understanding Success Criterion 1.4.11 包含许多示例，例如按钮、复选框、单选按钮、星级评级小部件和各种类型的图形对象。该文档不包含滑块示例，即使成功标准也适用于该类型的组件（例如滑块拇指的足够对比度及其值）。
如果您在要求符合 WCAG 2.1 的司法管辖区工作，则 SC 1.4.11 将适用。如果您在仍然需要符合 WCAG 2.0 而不是 WCAG 2.1 的司法管辖区工作，则 SC 1.4.11 尚不适用于您的内容，尽管满足该要求是个好主意。
Christophe在理解规则方面给出了很好的答案。我想添加一些太大的评论。
停止以合规为目标，将 WCAG 更多地用作清单而不是一组要求
WCAG 的关键部分是 'G' - 指南。它们是为了指导和教育而编写的，而不是一套硬性规则（遗憾的是，那样就不会有那么多的混乱......但那是另一天的事！呵呵）
所以对于上面的例子，你已经意识到颜色对比度是一个问题。太棒了，现在专心做'How would someone who has low colour contrast perception use my site'
等问题
当您这样做时，您需要减少对 WCAG 的依赖，而更多地依赖逻辑。你有一个按钮来控制什么？然后确保它是高对比度的。
有动作图标吗？确保它对于视力不佳的人来说足够大。
了解可访问性的更好方法（一旦您了解 WCAG 的大致内容）是询问 'How would this item be accessed by someone:'
- 具有低对比度感知（比率 4.5:1 或更好7:1）
- 谁是完全色盲（颜色不仅是传达意义的方式）
- 谁是盲人（是否需要 ARIA，我的 ARIA 标签和标签是否正确，使用 Screen Reader 测试？）
- 谁是聋人（字幕、文字记录和字幕，BSL 和 ASL，如果您真的想要的话！）
- 谁行动不便（想一想帕金森氏症 - 按钮大到足以用摇晃的鼠标/手点击，足够白space在移动设备上触摸滚动区域当你的准确度很差时不点击 link。
- 谁有焦虑症（简单的设计，可以撤消操作，没有明确说明就没有任何改变，例如，如果过滤列表不自动更新，而是有一个应用按钮（或警告它会自动更新，这是预期的），没有自动播放视频，可以关闭动画等）
谁有学习障碍/认知障碍（12 岁的阅读年龄* - 简单的单词，表格有标签所以可以看到填写（无论如何被屏幕覆盖 reader），没有复杂的验证码等）
- 12 岁的阅读年龄，因为五分之一的成年人（至少在英国）的阅读年龄为 12 岁，所以不要疏远他们 - 不只是帮助残疾人（如大多数可访问性的东西）
如果你感觉特别勇敢，想想那些使用眼睛凝视技术或[=36的人（严重行动不便/四肢瘫痪） =]语音软件（例如 Dragon Naturally Speaking）与您的网站互动。
如果你为人着想，更多地关注人们如何互动以及个人可能有什么要求，你将事半功倍地提高可访问性。
然后它成为您设计时思考方式的一部分，您将为按钮等留出足够的空间。您也开始更加重视语义（<button> 元素作为按钮而不是 <div> - 令人震惊！）。
TL;DR - 抱歉，有点啰嗦，希望你能明白关注人和他们的要求而不是规则/准则
我正在努力确保我正确解释了 WCAG 2.0 AA 对比度要求：
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
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 选择控件（复选框、单选按钮、开关、滑块等） ) 没有对比度要求？
参考：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 中并且仅适用于文本。这为许多其他类型的内容留下了漏洞，这些内容对于用户的理解很重要但不依赖于文本。
为此，WCAG 2.1 引入了SC 1.4.11 Non-text Contrast，它适用于用户界面组件和图形对象。此成功标准也适用于 "non-text elements such as UI selection controls (checkboxes, radio buttons, switches, sliders, etc)"（从问题中引用）。
Understanding Success Criterion 1.4.11 包含许多示例，例如按钮、复选框、单选按钮、星级评级小部件和各种类型的图形对象。该文档不包含滑块示例，即使成功标准也适用于该类型的组件（例如滑块拇指的足够对比度及其值）。
如果您在要求符合 WCAG 2.1 的司法管辖区工作，则 SC 1.4.11 将适用。如果您在仍然需要符合 WCAG 2.0 而不是 WCAG 2.1 的司法管辖区工作，则 SC 1.4.11 尚不适用于您的内容，尽管满足该要求是个好主意。
Christophe在理解规则方面给出了很好的答案。我想添加一些太大的评论。
停止以合规为目标，将 WCAG 更多地用作清单而不是一组要求
WCAG 的关键部分是 'G' - 指南。它们是为了指导和教育而编写的，而不是一套硬性规则（遗憾的是，那样就不会有那么多的混乱......但那是另一天的事！呵呵）
所以对于上面的例子，你已经意识到颜色对比度是一个问题。太棒了，现在专心做'How would someone who has low colour contrast perception use my site'
等问题当您这样做时，您需要减少对 WCAG 的依赖，而更多地依赖逻辑。你有一个按钮来控制什么？然后确保它是高对比度的。
有动作图标吗？确保它对于视力不佳的人来说足够大。
了解可访问性的更好方法（一旦您了解 WCAG 的大致内容）是询问 'How would this item be accessed by someone:'
- 具有低对比度感知（比率 4.5:1 或更好7:1）
- 谁是完全色盲（颜色不仅是传达意义的方式）
- 谁是盲人（是否需要 ARIA，我的 ARIA 标签和标签是否正确，使用 Screen Reader 测试？）
- 谁是聋人（字幕、文字记录和字幕，BSL 和 ASL，如果您真的想要的话！）
- 谁行动不便（想一想帕金森氏症 - 按钮大到足以用摇晃的鼠标/手点击，足够白space在移动设备上触摸滚动区域当你的准确度很差时不点击 link。
- 谁有焦虑症（简单的设计，可以撤消操作，没有明确说明就没有任何改变，例如，如果过滤列表不自动更新，而是有一个应用按钮（或警告它会自动更新，这是预期的），没有自动播放视频，可以关闭动画等）
谁有学习障碍/认知障碍（12 岁的阅读年龄* - 简单的单词，表格有标签所以可以看到填写（无论如何被屏幕覆盖 reader），没有复杂的验证码等）
- 12 岁的阅读年龄，因为五分之一的成年人（至少在英国）的阅读年龄为 12 岁，所以不要疏远他们 - 不只是帮助残疾人（如大多数可访问性的东西）
如果你感觉特别勇敢，想想那些使用眼睛凝视技术或[=36的人（严重行动不便/四肢瘫痪） =]语音软件（例如 Dragon Naturally Speaking）与您的网站互动。
如果你为人着想，更多地关注人们如何互动以及个人可能有什么要求，你将事半功倍地提高可访问性。
然后它成为您设计时思考方式的一部分，您将为按钮等留出足够的空间。您也开始更加重视语义（<button> 元素作为按钮而不是 <div> - 令人震惊！）。
TL;DR - 抱歉，有点啰嗦，希望你能明白关注人和他们的要求而不是规则/准则