无障碍色彩对比度：符合 WCAG 标准，告别灰暗模糊。
如何在不让品牌形象变得灰暗的情况下，设计出符合 WCAG 2.2 对比度要求的界面？本文将介绍对比度、APCA、真实的设计系统示例以及标记化的测试工作流程。
可访问性和设计个性并不冲突。这是大多数品牌团队在回避对比度讨论时给自己灌输的误区，也是为什么许多“无障碍”品牌重塑最终看起来像机场指示牌的原因。
可访问的色彩对比度是一个衡量问题。现代设计系统已经在令牌层解决了这个问题，这意味着你无需在点击WCAG和保持品牌趣味性之间做出选择。你只需要了解规则，知道哪些规则存在缺陷，以及实际工作发生在哪个环节。
为什么对比度是你不可忽视的规则
大约有3亿人对颜色的感知与你的基础调色板所假设的不同，还有更多人在光线昏暗、屏幕质量差或视力受损的情况下使用界面，而这些问题却无人提及。
低对比度是网络上最常见的可访问性缺陷，也是最容易修复的缺陷。盲点、色差、眩光、眼睛老化、劣质显示器、阳光直射手机屏幕……所有这些问题最终都归结于同一个解决方案：文本与背景之间足够的对比度，确保信息在最严苛的环境下也能清晰呈现，而不仅仅是设计师的 Retina 显示屏。
对比度不足的代价不仅仅是用户无法访问，还会带来合规性风险。欧盟的《欧洲无障碍法案》、美国的《康复法案》第 508 条、安大略省的《安大略省无障碍法案》以及越来越多的国家法律都以 WCAG 为法律参考。对比度是审核的首要检查项目之一，因为它也是最先出现问题的项目之一。
WCAG 2.2 对比度规则简述
WCAG 给出了三个数值：4.5:1、3:1 和 3:1，每个数值都适用于特定类型的 UI 元素。
| 元素 | AA 级最低标准 | AAA 级最低标准 | 注释 |
|---------|-----------|-------------|-------|
| 正文 | 4.5:1 | 7:1 | 任何小于 18 磅常规字体或 14 磅粗体的文本 |
| 大号文本 | 3:1 | 4.5:1 | 18 磅及以上常规字体或 14 磅及以上粗体 |
| UI 组件和图形 | 3:1 | 未指定 | 按钮、图标、表单边框、焦点环 |
| 徽标或装饰图像中的文本 | 豁免 | 豁免 | 品牌元素和附带文本不计入 |
AA 是大多数商业产品的目标级别，也是大多数无障碍法律的要求。AAA 是一个更严格的目标，主要用于政府、医疗保健和教育领域。除非有人提供 AAA 合规性文件，否则 AA 是最低标准。
大多数设计师容易犯的错误是忘记了 3:1 的非文本规则。即使表单字段内的标签符合要求，2:1 的表单字段边框与页面背景的比例仍然不符合要求。
对比度不足的对焦环会失败。含义依赖于 2.5:1 颜色比的图标也会失败。非文本对比度并非可选项。
为什么 WCAG 的计算公式经常出错
WCAG 对比度 是一个已有 30 年历史的公式，它忽略了视觉感知，因此有时会让看起来很糟糕的颜色通过，而让看起来不错的颜色失败。
WCAG 2 公式仅基于亮度。它将文本与背景的对比度视为两种颜色相对亮度之间的线性关系。但这并非人类视觉系统实际感知对比度的方式。
真实的感知对比度取决于字体粗细、字号、色温以及眼睛前一秒的注视点。WCAG 2 完全忽略了这些因素。其结果是，它将白底浅灰文字与浅灰底黑文字视为同一比例，尽管前者清晰易读，后者却令人难以忍受。
APCA 如何解决感知问题
APCA（无障碍感知对比度算法）以人类视觉实际运作的方式测量对比度，因此 WCAG 3 草案提议用它作为替代方案。
APCA 分数范围从 0（无对比度）到大约 108（极高对比度）。与 WCAG 2 不同，它考虑了文本粗细、字号和极性（浅色底深色文字与深色底浅色文字在视觉上的表现不同）。
常见文本的粗略 APCA 阈值：
-
正文（16px 常规字体）：75+（必需），90+（理想）
-
小字正文（14px 常规字体）：90+（必需）
-
大字文本（24px+）：60+（必需）
-
非文本 UI：最低 45+
APCA 目前在任何地方都不是法律强制要求。但许多产品已经将其作为内部标准，因为它与实际阅读体验的相关性更高。明智的做法是同时满足 WCAG 2 AA 合规性要求和 APCA 实际质量要求。如果您的 颜色标记 是为此设计的，那么同时达到这两个目标并不难。
四种设计系统的标记化对比
这些系统已经将可访问性编码到标记层中，因此设计师只需选择一个角色，而无需计算比率。
Radix Colors
Radix Colors 提供 12 级对比度等级，每级都预先分配了一个角色。第 11 级和第 12 级是高对比度文本级别，保证比低级别级别更符合 WCAG AA 标准。角色标记（text、textContrast、solid、solidHover）意味着设计师无需计算对比度，只需选择一个角色即可。
值得借鉴之处：按角色编号的对比度模型。任何选择第 11 级的设计师都知道，它比同一等级中对比度较低的级别更符合标准。对比度就编码在级别编号本身中。
Material Design 3
Material Design 3 将每个颜色角色与其对应的 on- 代码（on-primary、on-surface、on-error）配对，保证其与父级颜色的对比度达到 4.5:1。这些配对的标记构成了辅助功能层，直接内置于系统中。
值得借鉴：on- 模式。当设计师为文本选择 on-primary 时，辅助功能便会自动实现。无需担心出错。
再补充两种方法：比例和感知系统
Radix 和 Material Design 通过角色配对来解决对比度问题。接下来的两种方法则通过记录比例和感知均匀的尺度来解决。两种方法都有效，都值得借鉴。
GitHub Primer
Primer 将前景、背景和边框标记明确划分为不同的层级，并记录了相应的对比度。它们的 fg.default 和 bg.default 均以精确的对比度发布，并且每个基于角色的语义标记都采用相同的处理方式。
值得借鉴之处：将对比度信息发布在标记旁边。当每个标记与所有相关背景的对比度都记录在案时，设计师和开发者就可以完全跳过对比度检查器。
Adobe Spectrum
请访问 spectrum.adobe.com 查看实时画面。
Spectrum 使用感知均匀的颜色标度，因此具有相同阶数的两个标记在所有色调上具有相同的视觉权重。这意味着在同一主题内交换色调可以保持对比度关系。不再有“蓝色通过，橙色失败”的情况。
借鉴之处：感知一致性。基于感知模型构建的尺度（例如 HSLuv、OKLCH 或 Spectrum 的定制方法）使可访问性能够在不同的品牌主题之间通用。
如何在保持可访问性的同时又不失个性
可访问性并不意味着白底黑字和低调的品牌形象，而那些打造最具包容性产品的团队正是那些领悟到这一点的团队。
关键在于可访问性在技术栈中的位置。如果它位于标记层，品牌形象就能鲜明生动，设计师也能获得可访问的输出。如果它位于最终审核阶段，那么每一种品牌颜色都可能成为审核失败的隐患。
三种技巧可以兼顾个性化和可访问性：
-
将强调层拆分为品牌色和可访问操作色。 Linear 使用特定的紫色来强调品牌时刻，并使用略有不同的紫色来表示交互元素。两者都具有鲜明的品牌识别度。但只有一种颜色能够保证在所有表面上都适用。
-
使用感知均匀的色阶。 OKLCH 和 HSLuv 将颜色值映射到感知亮度，因此您可以在不破坏对比度的情况下切换色调。Radix、Spectrum 和 Material 3 都采用了类似的方法。
-
将深色模式作为独立的令牌集发布，而不是事后添加。 在深色模式下失效的令牌不适用于深色模式。如果您的系统将
text-default解析为浅色和深色下的不同颜色，则这两个值都必须在其对应的表面上都能正常工作。
最糟糕的结果是没人想要的妥协：一个色彩黯淡但仍然不易于访问的品牌。这种情况通常发生在团队对对比度反馈做出反应时，他们不是修复颜色搭配，而是降低所有颜色的饱和度。降低饱和度并不等同于提高可访问性，而颜色之间的关系才是关键。
可访问性测试工作流程
如果等到设计评审阶段才进行对比度测试，虽然成本低廉、自动化程度高，但却毫无意义。
有效的工作流程会在四个环节进行对比度检查，而不是仅仅一个环节。
-
在定义标记时。 创建标记时，也会定义其允许的表面。
text-default仅允许用于bg-default、bg-subtle和bg-raised。每个令牌与每个元素的对比都会被检查一次并锁定。 -
组件提交时。 Storybook 加上 axe-core 或 pa11y 集成，会在持续集成 (CI) 过程中对每个组件变体运行可访问性检查。任何未通过的新变体都会在合并前被阻止。
-
设计文件交付时。 Figma 诸如 Stark 之类的插件或内置的 WCAG 检查器会在设计工具中标记问题。在设计阶段而非审核阶段发现问题。
-
页面级别。 Lighthouse、axe DevTools 或 pa11y 会在预发布或生产环境中的实时页面上运行。这可以捕获组件测试遗漏的实际问题（第三方嵌入、用户生成的内容、动态主题）。
重点不在于运行更多工具，而在于提前进行检查。CI 流水线发现的对比失败只需五分钟即可修复。在发布前审核中发现的同样错误，却让团队损失了一周的时间。
关于这种分层方法的结构性原因，设计系统指南 解释了为什么基于标记的分层思维方式更胜一筹。60-30-10 规则被打破 则解释了为什么基于角色的颜色（可访问性依赖于此）取代了基于比例的思维方式。
常见问题解答
WCAG AA 就足够了吗？还是我需要 AAA？
AA 是大多数商业产品和大多数可访问性法律的标准。AAA 仅在特定领域（政府、医疗保健、教育）具有法律要求，而且如果不简化调色板，要达到 AAA 的标准成本很高。建议以 AA 为最低标准，APCA 理想标准为最高标准。
所有非文本元素都需要满足对比度要求吗？
根据 WCAG 2.2，传达含义的非文本 UI 组件的对比度至少需要达到 3:1。这涵盖按钮、表单边框、焦点环、具有含义的图标和图形元素。纯粹的装饰性元素（背景图案、环境渐变）不受此限制。附带文本（例如 标志、图片说明文字叠加层）也不受此限制。
WCAG 和 APCA 有什么区别？
WCAG 2 是当前的法律标准，基于一个已有 30 年历史的亮度公式。APCA 是 WCAG 3 草案中提出的替代方案，它基于人类感知的实际运作方式。APCA 分数与实际可读性更相关，但目前尚未成为法律强制要求。已发布的产品同时使用这两种标准：WCAG 2 用于合规性，APCA 用于质量。
将无障碍设计融入令牌
无障碍色彩对比度并非一种样式选择，而是一项系统属性。
那些发布最具包容性、品牌导向型产品的团队，不再将无障碍设计视为事后考虑，而是将其视为 色彩调色板 本身的属性。
令牌编码了这些比例。比例尺用于编码配对。测试贯穿工作流程的四个环节。发布前，没有人会拿着对比度检查器对着屏幕检查。
如果你的流程是让设计师凭肉眼判断调色板是否“清晰易读”，那么你肯定过不了审核。如果你的流程是使用检查工具加上人工审核，那么你大规模推广时肯定会失败。如果你的流程是使用基于角色的令牌，在定义层编码可访问性，那么你就能顺利发布。
构建令牌。发布比例。自动化检查。品牌形象鲜明，界面清晰易读，审核也只是例行公事，而不是需要重新构建。
需要一套符合 WCAG 标准且不破坏品牌形象的颜色系统吗？Brainy 在每个调色板中都内置了标记层可访问性。
Need a color system that hits WCAG without flattening the brand? Brainy builds token-layer accessibility into every palette.
Get Started
