界面设计美国留学

一个例子

首先，当你看到上方的这张图，这就是无障碍设计(accessibility design)中的一个重要原则，对比。

我们可以非常肉眼可见地描述视觉元素的对比程度，比如上图中最强的 Hello from Natt 是视觉中最强的对比，纯黑白的对比，而下方蓝紫色句子，对比一点点减弱。

但，一个可靠的设计，一定是理性的，理性的代表是量化。那么，量化上述视觉对比强度的话， 可以用下方这样的黑色数字进行表达：

我们看到的和被人看到的虽然是一个客体，但由于视力状况或感知能力与理解能力的差别（或者薛定谔大佬说过，世界本是无色无声的，声与色都是人的感知，因为这样省内存），大家看到的同样的东西，实际上是不一样的，那么，就需要一个严谨可量化的对于视觉感知的描述，如上图中这个数字所表达的对比，就是WCAG标准。

WCAG

其实多年之前我的同事安老师就写过关于WCAG的文章，可以参考这篇：这个关于文字的知识点你肯定不知道！其中详述了WCAG的相关内容。

这里做个概念性的极简重复：

网络内容可及性指南/Web Content Accessibility Guidelines（WCAG）是由万维网联盟（W3C）制定的网络可及性技术标准。该指南代表了由许多不同的利益相关者，包括工业界、残疾人组织、政府和无障碍研究组织制定的一个共享的国际标准。WCAG并不是一个法律要求，而是一套全球采用的标准。该准则旨在使网站、应用程序、电子文件和其他数字资产能够被广泛的残疾人士访问，包括感官、智力、学习和身体残疾。

出处：https://wcag.com/resource/what-is-wcag/

上述内容显得很啰嗦，但简单来说就是，如果你需要考虑自己设计能够有更强的无障碍设计，能够对视障、长者和低智或低龄用户更加友好的话，那么让自己的界面通过WCAG标准将是一个很好的选择。

WCAG 标准的结果非常简单，就三个等级：

A / AA / AAA

1-3个A，越多越好，一般情况下，AA就够了。

Figma家怎么做

Figma 本身并没有WCAG检查工具，但是好在Figma足够开放，我们在Figma Plugin 里随便一搜，都是各种检查器:

而我经常使用的插件，是 Stark:

在选择文字/或两个色后，Stark的Contrast就会展现出目前的WCAG情况。Stark 的另外一个好处是，它可以把WCAG标准切换到APCA标准：

顺便说一嘴，目前主要的WCAG还在2.1阶段，而进入WCAG3.0后，会使用APCA算法，它会考虑了颜色的使用环境，以确定其可读性。但目前的应用还不足够广泛。

Adobe家怎么做

AdobeXD 的插件内也有各种插件，而这里我依然选择了Stark插件。

截图看到，Natt老师最爱的猛男粉，其实在无障碍方面是很差的，所以不得不忍痛放弃。

Stark 插件还给了我们建议功能，可以直接应用建议（但得充值PRO了）。

而如果我们进入 Adobe Color 网站，则可以看到它新增了颜色检查，比如我们把黑色和猛男粉放在adobe color 检查器内看看是否符合 WCAG 2.2下的 AA 标准：

总结

以上，就是关于界面无障碍设计的一部分，所以，在后续做特殊人群群体设计的时候，记得打开个对比插件看看可读性程度到底如何。

而如果后续APCA得到更大的应用，我们也再来分析分析，出个小教程看看。

下一篇见。