contrast_for_accessibility_zh-CN

无障碍对比度

对比度标准

谷歌无障碍评级 (GAR) 是一套确保数字产品对残障人士无障碍的指南。颜色对比度是 GAR 合规性的一个关键组成部分。

对于 Web 应用程序，这意味着要遵守 WCAG 的对比度建议。在旨在让所有用户（包括视障用户）都能轻松阅读内容的情况下，足够的对比度至关重要。这可以通过使用在文本和背景之间提供足够对比度的颜色来实现。

对比度

颜色对比度指的是色调或亮度的差异，而不考虑色相或色度。一个有助于理解具有良好对比度的用户界面的方法是，即使在灰度格式下，它仍然能正常工作。

对比度基于 CIEXYZ 颜色空间中的一个分量 Y，该分量测量亮度。Y 与 CIELab 中的 L* 存在一一对应的关系。给定两种颜色，其中较亮颜色的 Y 为 yL，较暗颜色的 Y 为 yD，对比度定义为：

1
contrast_ratio = (yL + 5.0) / (yD + 5.0)

示例：

  • 一种颜色与其自身的对比度为 1.0。
  • 黑色和白色之间的对比度为 21.0。
  • 对比度范围可以从 1 到 21（通常写作 1:1 到 21:1），可以想象一下白色背景上的黑色文本。

当我们说“对比度不足”时，意味着背景和前景颜色之间的对比度对于某个阈值来说不够高。例如，色调相差 40 可保证 WCAG 对比度 ≥ 3.0；色调相差 50 可保证对比度 ≥ 4.5。通常，当两种颜色的对比度至少为 4.5 时，文本在背景上被认为是清晰可读的。

MCU 方案如何遵守 GAR/WCAG

默认、中等和高对比度级别的配色方案是根据每个级别为文本和非文本元素指定的各种对比度设计的。这些对比度以两种方式运作：

  • 保证的最低对比度：根据 GAR/WCAG 标准定义。颜色在相关 UI 元素上达到或超过这些比率。

  • 酌情对比度：根据理想的视觉设计定义。颜色在相关 UI 元素上接近这些比率。由于颜色的物理限制，这些颜色可能无法达到或超过这些比率，这就是为什么它们作为目标而不是保证的最低值。

默认对比度

  • 满足 AA 级无障碍标准

    • 保证的最低对比度：

      • 所有文本和图标为 4.5:1
      • 必需的非文本元素为 3:1（GAR/WCAG 标准允许某些非文本元素根据其他设计标准低于 3:1 的对比度）

    • 酌情对比度：

      • 较高强调文本为 7:1

中等对比度

  • 超过 AA 级无障碍标准

    • 保证的最低对比度：

      • 所有文本和图标为 4.5:1
      • 所有非文本元素为 3:1，包括那些不需要满足 3:1 的元素

    • 酌情对比度：

      • 文本为 7:1
      • 较高强调文本为 11:1

高对比度

  • 满足 AAA 级无障碍标准

    • 保证的最低对比度：

      • 所有文本和图标为 7:1
      • 所有非文本元素为 4.5:1

    • 酌情对比度：

      • 文本为 11:1
      • 较高强调文本为 21:1

MCU 如何为无障碍性派生方案

MCU 通过以下方式实现 GAR/WCAG 合规性：

  • 颜色角色： 为颜色分配语义角色（例如，主色、辅色、背景色）可确保无障碍性。颜色系统建立在无障碍颜色配对的基础上；MCU 测量相邻颜色或重叠颜色（前景/背景）之间的对比度，并相应地调整它们以满足所需的对比度。这些颜色对提供了 3:1 的无障碍最低对比度。

  • 对比度库： 这些库提供预定义的调色板和算法，以调整颜色对中颜色的色调，以达到目标对比度。

引用