点击 "子牧UXD" 关注，回复 "设计圈" 加入我们
2022年 原创总第 18 篇
距离年度目标40篇 还有 22 篇
(全文2782字，预计阅读时间：5分钟)
这是一篇介绍性的文章。
最近在学习大厂设计系统时，发现了WCAG标准。这个概念之前也听说过，但是没怎么当回事儿，这次沉下心来了解了一番，发现里面包含了不少科学的方法。我觉得B端设计师还是有必要了解下这块内容。
#01 什么是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端产品设计中，可以参考颜色对比度的无障碍标准，提升界面信息的易读性。
产品设计阶段和实际的使用场景还是有差异的，同一个颜色在不同终端设备受到色域、分辨率等影响，显示效果也不相同。用户的实际使用环境与设计师的办公环境也可能有很大不同。如果用户存在视觉障碍，对设计的要求将会更加苛刻。
#02 颜色对比度的无障碍标准
虽然很多可用性原则都提到易读性，但是到底该如何做呢？或许每个设计师都有自己的答案。不过设计师不能仅从自身出发，而需要一个相对科学的标准，去检验颜色对比度的可读性。
WCAG中就有专门的颜色对比度要求。
颜色对比度是基于亮度或发光强度，计算出来的两种颜色之间的差异程度，对比范围为1-21。通常写为 1:1 或 21:1，颜色中对比度的最大值为21:1（纯黑与纯白）。两个数字之间的比值越高，颜色的相对亮度就越大。
为了满足不同场景下的需要，WCAG制定了两条色彩对比度条例，对比度最低标准（AA级）和对比度增强标准（AAA级）。
AA级对比度要求如下：
-
文本和文本图像的视觉呈现具有至少 4.5:1 的对比度
-
大文本（加粗的14pt/普通的18pt及以上）和大文本图像的对比度至少为3：1
AAA级对比度要求更高，要求如下：
-
文本和文本图像的视觉呈现具有至少 7:1 的对比度
-
大文本（加粗的14pt/普通的18pt及以上）和大文本图像的对比度至少为4.5：1
参考Material Design和 iOS人机交互规范，基本都是以满足AA级标准为主。特殊情况下要求满足AAA级标准。
当然上述的两条标准并不是对所有页面文本信息的要求。以下情况的文本，并无最低对比度限制：
|
#03 颜色对比度
标准有了，我们该如何确定我们选择的颜色对比度呢？
通过阅读性能评估，色相和饱和度对可读性的影响其实很小，甚至没有。真正影响阅读体验的是颜色亮度造成的对比度。所以在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/#!/?view.left=0&view.right=0
根据以上标准，我们借用Material Design的颜色对比度工具，可以得出在白色背景下，符合WCAG标准的颜色范围：
-
大文本可以用的最浅纯灰色是#949494
-
普通字本可以用的最浅纯灰色是#757575
我们在做基础规范时，就要考虑到WCAG标准，将色彩控制在可用性标准之内，这样才能保证产品的阅读体验。
写在最后
B端产品设计时，一个很重要的原则就是清晰，既要能够清楚地传递信息；还要保证界面的易读性。设计评审时，我们听到比较多的就是“界面没有层次性”。在我看来，这个层次性就是界面的整体对比度。重要信息是否突出显示，次要信息是否可读。
有些设计师在大面积白色背景上，信息整体平铺，没有通过一定的设计手法进行内容空间划分，第一眼效果就是信息的堆砌，毫无层次感。加之文本用色的随意性，最终导致页面就是“惨白一片”。
所以设计师需要借助科学的方法修正自我的认知偏差，这样才能保证个人的成长和设计的有效性。
— THE END —
|
|
本文来自微信公众号“子牧UXD”作者：子牧先生（ID：HelloDesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
