从3个方面，帮你从零开始掌握WCAG色彩对比度

最近在学习大厂设计系统的时候，发现了 WCAG 标准。我以前听说过这个概念，但我没有把它当回事。这一次，我沉下心来了解它，发现它包含了许多科学方法。我想 B 端设计师有必要了解这个内容。

相关神器推荐：

一、什么是 WCAG

Web Content Accessibility Guideline（Web 内容无障碍指南)是业界公认的指导标准，简称 WCAG 标准。其目标是满足国际个人、组织和政府的需要 Web 内容可访问性提供单一共享标准。2018年 年 6 月发布了 2.1 并成为版本 W3C 推荐标准。WCAG 2.2 草案于 2022 年 9 月完成。

1. 4 项原则

WCAG 解释了如何让残疾人更容易访问 Web 内容。这个标准有 12-13 规则，分为 4 项原则：

Perceivable（可感知）

信息和用户界面组件必须以用户可以感知的方式呈现，用户必须能够感知所呈现的信息(他们所有的感官都不能消失)

Operable（可操作）

用户界面组件和导航必须可操作。用户必须能够操作界面（界面不能要求用户无法执行的交互）

Understandable（可理解）

必须使用户能够理解信息和用户界面的操作(内容或操作不能超出他们的理解)

Robust(稳定耐用)

内容必须具有足够的适应性，并且可以与包括辅助技术在内的各种用户工具兼容。无论是技术进步还是用户工具升级，内容都应该是可访问的。

2. 成功标准

WCAG 它面向残疾人，包括视力、听力、运动和智力等标准规定。然而，符合本指南的产品必然有助于改善用户体验。

每个标准都有可测试的成功标准，分为三个层次：A（最低），AA，AAA 等级(最高)。

我们在 B 在终端产品设计中，可以参考色彩对比度的无障碍标准，提高界面信息的可读性。

产品设计阶段与实际使用场景不同。不同终端设备中相同的颜色受色域和分辨率的影响，显示效果也不同。用户的实际使用环境也可能与设计师的办公环境大不相同。如果用户有视觉障碍，对设计的要求将更加苛刻。

二、颜色对比度无障碍标准

虽然许多可用性原则都提到了可读性，但我们应该怎么做呢？也许每个设计师都有自己的答案。然而，设计师不仅可以从自己开始，还需要一个相对科学的标准来测试颜色对比度的可读性。

WCAG 有特殊的颜色对比度要求。

颜色对比度是根据亮度或发光强度计算的两种颜色之间的差异，对比度是 1-21。通常写为 1:1 或 21:1.颜色中对比度的最大值是 21:1(纯黑与纯白)。两个数字之间的比值越高，颜色的相对亮度就越大。

为满足不同场景的需要，WCAG 对比度最低标准制定了两个色彩对比度规定（AA 等级)和对比度增强标准（AAA 级）。

1. AA 级对比度要求如下：

文本和文本图像的视觉呈现至少具有 4.5:1 的对比度

大文本(加粗 14pt/普通 18pt 以上)与大文本图像的对比度至少为 3：1

2. AAA 级对比度要求较高，要求如下：

文本和文本图像的视觉呈现至少具有 7:1 的对比度

大文本(加粗 14pt/普通 18pt 以上)与大文本图像的对比度至少为 4.5：1

参考 Material Design 和 iOS 人机交互规范基本满足 AA 主要是等级标准。特殊情况下满足要求。 AAA 级标准。

当然，上述两个标准并不是对所有页面文本信息的要求。对以下文本没有最低对比度限制：

未激活的（inactive）部分用户界面组件(按钮或菜单选项)。表单字段的占位符 (placeholder) 或 ghost text。只是纯粹的装饰。对任何人来说都是看不见的。作为文本「图片包含其他重要的视觉内容」部分。作为文本 logo 或者品牌名称的一部分

三、色彩对比度

有了标准，我们如何确定我们选择的颜色对比度？

通过阅读性能评估，色相和饱和度实际上对可读性影响不大，甚至不大。真正影响阅读体验的是颜色亮度的对比度。所以在 WCAG 在标准中，基于相对亮度的颜色对比度计算公式。

公式如下：

对比度 = （L1 + 0.05）/（L2 + 0.05）。「L 指颜色的相对亮度 」

相对亮度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B

其中 R, G , B 取值为：若 XsRGB <= 0.03928 则 X = XsRGB/12.92；否则 X = ((XsRGB+0.055)/1.055) ^ 2.4。

XsRGB 在此指代 RsRGB, GsRGB, 或 BsRGB，取值为 XsRGB = X8bit/255「X8bit 指 R、G、B 通道各自在 8 位/通道下 0-255 的取值」。

这个公式很复杂，我不太明白。在实际应用过程中，设计师可以选择方便的色彩对比工具来测试对比度是否满足 WCAG 标准。

推荐两个工具

工具一：WebAIM’s Color Contrast Checker

这是一种可对比度的计算工具。只要设置前景色和背景色，对比度结果就会自动计算，并确定是否满意 WCAG 的标准。

地址： https://webaim.org/resources/contrastchecker/

工具二：Color Tool

Color Tool 是 Google Material Design 基于配色工具提供的配色工具 WCAG 在选择背景色时，黑色文本的最小透明度值自动计算。

地址： https://material.io/resources/color

根据上述标准，我们借用 Material Design 颜色对比度工具，可得出白色背景，符合要求 WCAG 标准颜色范围：

最浅的灰色是#949494普通字本可以用的最浅的灰色是#75755

做基本规范的时候要考虑 WCAG 标准，将颜色控制在可用性标准内，以确保产品的阅读体验。

写在最后

B 在设计终端产品时，一个非常重要的原则是明确信息，确保界面的可读性。在设计评估中，我们听到更多的是“界面没有层次”。在我看来，这个层次是界面的整体比较。重要信息是否突出，次要信息是否可读。

在大面积白色背景下，一些设计师整体铺设信息，没有通过一定的设计技术划分内容空间。第一个效果是信息的堆积，没有层次感。此外，文本颜色的随机性最终导致页面“苍白”。

因此，设计师需要通过科学的方法来纠正自己的认知偏差，以确保个人成长和设计的有效性。

欢迎关注作者微信微信官方账号:「子牧UXD」