每个设计师都要明白的配色可访问性设计

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

作为 Handsome 的产品设计师，我最近和以为客户合作创建了一组强可访问性的色彩系统。相比于平时我们用到的配色，这套系统相对更加复杂，要求更高，而我也因此对于色彩的可访问性有了更加深入的了解。

可访问性为何如此重要

数字产品的可访问性对于所有人（包括在视觉、听觉、语言、肢体和认知上有障碍的用户）而言都很重要，而身为设计师和开发人员，应该将让数字产品具备足够良好的包容性，让所有人都能够从中获得好处。

可访问性良好的产品是优雅而友好的，我们理应对所有人都友好。

数字产品的可访问性落实到产品维度上，存在于许多不同的方面。而色彩是其中和设计连接最紧密的部分。对于有视力障碍的用户而言，色彩的可访问性和他们的体验息息相关。这其中，色弱和色盲用户占据了相当大的比例。根据世界卫生组织2017 年的调研，全世界有2.17亿人，患有中度乃至重度的视力障碍。仅凭这一统计数据，就足以说明数字产品可访问性的重要性。

让数字产品具备可访问性，不仅仅涉及到基本的道德，而且也存在潜在的法律问题和影响。2017年在美国境内，总共发生了814起针对无法访问或者可访问性较差网站的联邦诉讼，其中甚至包括一部分集体诉讼。各个组织都曾经试图建立可访问性设计的标准，其中最著名的是美国联邦可访问性委员会（第508条）和W3C，以下是相关标准的概述：

第508条：这指的是最早创立于 1973年的康复法案中的第508条，你可以点击这里查看详细内容。总的来说，无论是直属于联邦的网站，还是相关机构或者承包商所创建的网站，都需要有良好的可访问性。

W3C：万维网联盟（W3C）是一个自发的国际组织，成立于 1994年，旨在制定开放的网络标准。W3C 在 WCAG 2.1 中概述了他们的Web 可访问性的详细标准和指南，这本质上是如今 Web 可访问性最佳实践的黄金准则。

确保产品的色彩可访问性

在整个产品研发的生命周期中，尽早考虑可访问性设计，是最好的——这样可以减少产品后期来回追溯相关设计所花费的时间和金钱。选择前期确定产品配色的时候，就需要考虑产品配色的可访问性。

以下是一些比较有用的提示，确保你的产品具备良好的可访问性：

1、确保对比度足够

为了满足W3C最低 AA 等级，你所选取的背景和文本的对比度至少要达到 4.5 : 1，因此在设计按钮、卡片和导航元素的时候，请务必确保色彩组合的对比度。

有很多工具能够帮你测试色彩组合的可访问性，不过我发现最有用的始终还是 Colorable 和 Colorsafe。我个人更加倾向于 Colorable，因为它可以使用滑块实时调整色相、饱和度和亮度，你可以直接选取特定的配色，并且确定它们的可访问性的等级。

2、不要过分依赖色彩

你还需要确保很多信息不依赖色彩来进行传递，尤其是一些关键的系统信息，它们的可访问性也是需要考量的。对于诸如错误状态、成功状态、系统警告和提示，都务必让文本信息和图标搭配起来，清楚地告知用户（尤其是视觉障碍用户）正在发生的事情。

对于图表信息，应该添加纹理或者图案，这样即使是色盲用户都可以轻松分辨它们，而不用担心色彩会影响他们对于数据的感知。Trello 的Colorblind 友好模式就做的很不错。

3、控制焦点状态对比度

虽然如今绝大多数的用户浏览网页会使用鼠标或者直接屏幕点击，但是依然会有一些运动障碍的用户，会使用键盘来进行导航。所谓焦点状态，指的是是用户使用使用键盘的「Tab」键来点击切换网页页面中不同链接的时候，每个链接周围会呈现出的描边外发光的视觉效果。

所有的浏览器对于焦点状态，都有默认的显示色彩，如果你想在后续产品中对它的显示进行调整，那么需要尽量确保它的对比度足够明显，这对于有视觉缺陷的用户而言，也能带来足够显著的效果。

4、文档和社交色彩系统

最后，创建可访问性良好的色彩系统，最重要的方面，是要让你的团队能够在需要的时候，能直接拿来使用，并且每个人都能够用在对的地方。系统化地设计配色系统，不仅能够减少混乱，还能够在整个团队范围内确保可访问性的一致。根据我的经验，在UI Kit 和设计系统中直接标识出固定的组合，以及相应的可访问性等级，这样是最有效的。此外，使用 InVision Craft 或者 InVision DSM 等工具作为团队协同，是非常有帮助的。下面是如何记录各种配色组合以及配色可访问性评级的示例。

结语

今天所谈到的，其实更多是关于可访问性这个事情的一些大概技巧。但是，如果你考虑这个问题，那么最值得参考的，就是 W3C 中的 WCAG 2.1 ，其中包含了最专业而详尽的说明。虽然这些指导方针看起来有点令人生畏，但是它们能够帮你更加深入的了解可用性设计。

在上文中所提到的一些设计资源在此：

Colorbox: Lyft 最新的配色工具，旨在创造可用性良好、可扩展的配色系统。

Designing Systematic Colors by Jeeyoung Jung: 提供一种非常有深度的方法供你创建可用性良好的配色系统，如果你正在为多产品设计配色，那么它将非常有用。

Colorable: 这是一款非常实用的、用来评估配色可访问性的工具。

Colorsafe: 高可访问性配色生成工具。

Color Oracle: 色盲模拟器，适用于 Windows、Mac 和 Linux。