WCAG 2.2 AA 的颜色对比度：课程创作者实用手册

颜色对比度是网络上最常见的无障碍问题——年复一年，自动调查发现超过五分之四的顶级主页存在低对比度文本问题——同时也是最容易解决的问题之一。对于课程讲师来说，正确处理对比度意味着低视力学员、色觉障碍者（约 1/12 的男性）以及在强光下使用手机的任何人都能真正阅读您的内容。本指南用简单语言解释了WCAG 2.2 AA 对比度要求——4.5:1 和 3:1 比率，什么算作“大”文本，以及按钮、图标和图表的常被遗忘的规则——然后准确展示如何测量对比度并修复问题，而不影响您的品牌。

对比度比率实际测量的是什么

对比度比率是描述两种颜色（通常是文本和其背景）之间相对亮度（感知亮度）差异的数字。范围从 1:1（相同，不可见）到 21:1（纯黑对纯白）。这与色调无关：两种颜色看起来可能非常不同，但如果它们亮度相似，对比度仍然很差（想象一下中蓝色文本在中绿色背景上）。

这就是为什么您无法可靠地用肉眼判断。一个在昏暗办公室中校准的显示器上看起来不错的颜色，可能在户外使用廉价手机的低视力学员眼中是不可读的。WCAG 将判断转化为可测量的阈值，使其可测试且客观。

您实际需要的对比度比率

对于 AA 级别，这些是需要达到的阈值：

• 4.5:1 — 正文文本的最低要求（WCAG 1.4.3）。
• 3:1 — 大文本的最低要求，定义为 18.66px 加粗或 24px 常规及以上（约 14pt 加粗 / 18pt 常规）。
• 3:1 — 非文本对比度的最低要求（WCAG 1.4.11）：UI 组件的有意义部分如输入边框、切换状态和图标的基本形状，以及理解内容所需的图形。

AAA 级别将正文文本提高到 7:1，这在长篇阅读中值得追求，并且用接近黑色的文本在白色背景上很容易实现。但 AA 是法律基线，在整个课程中一致地达到它是现实目标。请注意，徽标和纯粹的装饰性元素是豁免的——规则针对的是学员需要阅读或操作的内容。

课程讲师最常犯的对比度错误

几乎所有的失败都集中在少数模式上，一旦您知道它们，您会到处发现它们：

• 白色背景上的浅灰色文本 — 在模型中优雅，但对许多人来说不可读。灰色背景上的灰色字幕和淡淡的元数据是常见的罪魁祸首。
• 品牌色按钮上的白色文本，其中品牌色太浅，无法达到 4.5:1——在使用粉彩或霓虹品牌调色板时极为常见。
• 图像或视频上的文本没有遮罩或覆盖，因此对比度随着每一帧的变化而变化，并在某处失败。
• 用作标签的占位符文本——通常太过微弱，并且在字段填充后消失。
• 仅用颜色表示意义——“点击绿色按钮”或红/绿通过/失败没有图标或文本，这也违反了 WCAG 1.4.1（使用颜色）。
• 低对比度图表，相邻段无法区分，尤其是对色盲观众而言——添加标签或图案。

如何测量对比度

您永远不必猜测。使用以下任意免费工具：

• 浏览器开发者工具 — Chrome 和 Firefox 在颜色选择器和无障碍检查器中直接显示对比度比率，包括通过/失败线。
• WebAIM 对比度检查器 — 粘贴两个十六进制值，获取精确比率以及 AA 和 AAA、正常和大文本的通过/失败结果。
• axe-core / Lighthouse — 自动扫描一次标记整个页面的每个对比度失败，非常适合审核现有课程。
• 色盲模拟器 — 在色盲（如红绿色盲、蓝黄色盲）下预览您的调色板，以捕捉图表和状态颜色的崩溃。

将对比度作为课程审核的常规步骤，而不是最后一天的惊喜——修复一个标记比重新着色 40 个课时便宜得多。

如何在不破坏品牌的情况下修复对比度

对比度和良好设计并不冲突；您只需要一个系统，而不是一次性调整：

• 加深文本，而不是整个调色板。 使用稍微深一点的品牌颜色专用于文本，通常可以通过，同时保持品牌识别。
• 将浅色品牌色调保留用于背景和装饰，而不是用于正文文本或关键图标。
• 在图像上的文本后添加遮罩或覆盖，以便无论照片如何，对比度都保持稳定。
• 将颜色与形状、图标或文本配对，以便意义从不依赖于颜色。
• 定义一次可访问的颜色标记——对比度检查的设计系统（文本颜色、按钮颜色、链接颜色、焦点颜色）意味着每个新课时从合规开始，没有讲师需要重新测试。
• 考虑深色模式和高对比度变体，因为相同的标记需要在两种背景上通过。

一个思维转变使这一切变得更容易：停止将对比度视为每个元素的决策，而开始将其视为设计系统的属性。一个品牌有几十种可能的颜色配对，但一个课程只需要少数几种——正文文本、标题、链接、按钮、边框、焦点和几个装饰。定义这些一次，证明每个都通过，然后“这个通过对比度吗？”的问题在任何课时编写之前就已回答。使用您模板的讲师不必考虑比率，这正是它应该的样子：无障碍对内容生产者来说是不可见的，因为它内置于他们开始使用的工具中。

深色模式、视频和图表中的对比度

三个上下文值得特别关注，因为在一个中通过的调色板可能在另一个中失败。深色模式颠倒了问题：现在您需要在深色背景上使用浅色文本以达到 4.5:1，而纯白对纯黑实际上可能过于刺眼——稍微柔和的偏白色既更舒适又符合要求。如果您提供浅色和深色主题，每个标记必须在两者上通过。

视频或图像上的文本是最难的情况，因为背景不断变化。您无法保证对比度对未知帧，因此在文本后添加半透明遮罩，或将文本放置在实心面板中。字幕文本特别应放在实心或半透明背景上，以便在任何场景中都可读。

图表和数据可视化以不同方式失败：相邻段在颜色上不同但亮度相似，对于色盲观众变得无法区分，而仅依赖颜色的图例在 1.4.1 中失败。通过添加直接标签、图案或纹理来修复，确保相邻有意义区域之间的 3:1，并通过色盲模拟器测试图表。

构建无障碍颜色系统的五个步骤

对比度的持久解决方案是一个小而经过测试的颜色系统，而不是每页调整。以下是一个实用的顺序：

1. 选择一个在您的主要背景上通过的文本颜色。 从白色背景上的接近黑色（或深色背景上的接近白色）开始，只需稍微变亮/变暗，直到您舒适地超过 4.5:1。
2. 派生一个可访问的“品牌文本”色调。 如果您的品牌颜色对文本来说太浅，定义一个用于链接和强调的较深变体，仍然可以识别为您的品牌。
3. 定义按钮标记。 选择一个按钮背景，使白色（或深色）标签文本达到 4.5:1，并选择一个明显可见的焦点颜色，与相邻颜色达到 3:1。
4. 设置一个 3:1 的 UI/边框标记。 输入边框、切换和图标形状需要非文本对比度（1.4.11），所以不要让它们消失在背景中。
5. 测试整个集合一次，然后重复使用。 将每个标记对通过对比度检查器，保存值，并从中构建所有课时。新内容因此通过构建而合规。

在任何地方都以 AA 为目标，并在长篇正文文本中尽可能达到 AAA（7:1）——用接近黑色的文本成本很低，并且显著提高了每个人的可读性。

高效的对比度测试工作流程

逐个颜色检查对比度无法扩展到包含数十个课时的课程。更快的工作流程一次测试系统，然后对内容进行抽查：

1. 审核设计标记，而不是每个页面。 如果您的文本、链接、按钮、边框和焦点颜色都通过您的背景，大多数内容会自动通过。
2. 使用 axe-core 或 Lighthouse 运行全页面自动扫描，在代表性课时、测验和仪表板上——这些可以批量显示对比度失败，并命名确切的元素。
3. 手动检查风险内容类型：图像上的文本、图表、徽章和状态标签，以及任何讲师选择的颜色。
4. 模拟色盲，用于任何使用颜色传达意义的内容。
5. 仅重新测试更改的内容。 因为标记是固定的，您主要需要检查新的自定义颜色，而不是整个库。

将其纳入您的发布清单，以便在课时上线前而不是学员投诉后验证对比度。预防的成本是几分钟；修复的成本是重新着色整个课程。

快速参考：比率、检查和修复

在选择颜色或审查课时时，请随时参考此摘要：

• 正常文本：至少 4.5:1（AA）。在长篇阅读中尽可能达到 7:1（AAA）。
• 大文本（24px 常规 / 18.66px 加粗）：至少 3:1。
• UI 组件和有意义的图标/图形形状：至少 3:1（非文本对比度）。
• 徽标和装饰元素：豁免。
• 永远不要仅依赖颜色：将其与文本、图标或图案配对。
• 测量，不要猜测：使用 WebAIM 对比度检查器、浏览器开发者工具或 axe-core/Lighthouse 进行全页面扫描。
• 在标记级别修复：加深文本色调，将浅色调用于背景，在图像上的文本后添加遮罩，并一次测试系统。

何时值得额外努力达到 AAA？在密集、长时间阅读时——文档、文字稿、冗长课时——较高的 7:1 比率显著减少了每个人的眼睛疲劳，并且用接近黑色的文本很容易实现。对于按钮、标签和短 UI 文本，坚实的 AA 是务实的目标。无论哪种方式，在设计系统级别一次性决定意味着每个讲师都继承了无障碍颜色，而无需考虑它。

Eduspera 如何为您处理对比度

Eduspera 提供对比度检查的主题，因此默认文本、按钮和组件已经符合 WCAG 2.2 AA——并且内置的品牌对比度检查会在所选品牌颜色对白色失败时警告学院所有者，在学员看到之前建议可访问的替代方案。学员还可以在平台范围内的阅读辅助中获得高对比度模式。结果：讲师获得保持可读的品牌课程，而无需手动测试每种颜色组合。

这都是经过WCAG 2.2 AA测试的无障碍优先平台的一部分，价格约为大平台的一半，并提供免费迁移。免费开始或阅读什么使 LMS 真正合规。

常见问题解答

WCAG 2.2 AA 的最低颜色对比度是多少？

对于正常正文文本，最低要求是 4.5:1。对于大文本（18.66px 加粗或 24px 常规及以上），最低要求是 3:1。UI 组件和有意义的图形也需要至少 3:1（非文本对比度，WCAG 1.4.11）。AAA 级别将正文文本提高到 7:1。

在 WCAG 中，什么算作“大文本”？

至少 24px（约 18pt）常规文本，或 18.66px（约 14pt）加粗文本。大文本只需要 3:1 的对比度比率，而不是正常文本所需的 4.5:1。

如何检查两种颜色的对比度比率？

使用 WebAIM 对比度检查器、浏览器开发者工具的颜色选择器，或使用 axe-core 或 Lighthouse 进行自动扫描。粘贴您的前景色和背景色以查看确切的比率以及它是否通过 AA 和 AAA 的正常和大文本。

颜色对比度也适用于按钮和图标吗？

是的。WCAG 1.4.11 要求 UI 组件的有意义部分（如输入边框和图标的基本形状）以及理解内容所需的图形至少达到 3:1 的对比度——不仅仅是文本。徽标和纯装饰元素是豁免的。

Eduspera 会自动检查颜色对比度吗？

是的。Eduspera 提供符合 WCAG 2.2 AA 的对比度检查主题，并在所选品牌颜色对白色失败时警告学院所有者，建议可访问的替代方案——此外还有为学员提供的高对比度阅读模式。