可访问性配色的设计实践

原创 Clippp Clip设计夹

如何设计可访问性配色呢？本文将通过实际案例操作，展示如何调整颜色的不同对比度，得到一套完整的配色方案。

（全文共计1737字，阅读约需要5分钟）

这是Envoy Web仪表板的原有配色方案。像许多Web配色方案一样，包括品牌色（红色），信息色（蓝色），成功色（绿色），警告色（橙色）和各种灰色阴影。

尽管这些颜色可以作为独立调色板使用，但随着时间的流逝，发现它们不够灵活，无法满足网站的所有需求。

目前网站的文本颜色和背景颜色相似，没有足够对比，因此文本较难阅读。如果颜色的对比度更大，那么文本将更易于阅读。

针对Web可访问性进行设计意味着为所有用户提供一种体验，无论他们的视觉，听觉，运动或认知能力如何。

建立更易用的配色方案的原因

很多人有视力障碍：在世界卫生组织估计，全球13亿人患有某种形式的视力障碍。

更好的可读性对所有人都有帮助：一个人的视力并不是唯一要考虑的因素；考虑访问网站时，用户可能会用到不同分辨率和亮度级别的计算机和设备，易于阅读意味着每个人都更加容易。

今天的准则可能是明天的要求：与可访问性相关的诉讼正在上升，遵循现有准则可以减少公司的责任。

对用户的关心：作为设计师，有能力用同理心为更多人设计。

什么是可访问性颜色？

颜色的可访问性准则是选择人们可以看到的颜色，能够看到文本是能够阅读并理解其含义的一个重要因素。

那么，如何知道用户可以看到哪些颜色？这完全取决于对比度，也就是前景色与背景色的比较。

在下面的示例中，可以看到左侧文本与背景色（低对比度）非常相似，但是右侧的文本与背景颜色对比度高，更易于阅读。

由W3C开发的Web内容可访问性指南（WCAG）提供了一个计算两种颜色之间对比度的公式，从而得出对比度。对比度范围从1：1（颜色之间没有差异）到21：1（可能存在的最大差异）。

WCAG还定义了文本可读性的确切对比度：

AA级：最低标准

小文本的对比度应为4.5：1或更高

大文本应为3：1或更高

AAA级：增强标准

小文本应为7：1或更高

大文本应为4.5：1或更高

如何建立可访问性配色方案？

1.计算现有颜色的对比度

可以使用便捷的工具（Tanaguru，Contrast，Stark）在网站背景下测试现有配色方案中的每种颜色。

经过测试，发现原网站中所有的亮色都不符合4.5：1的文本标准，尽管网站上到处都在使用亮色。

2.灰色的选择

盘点在网站上使用灰色文本的地方，发现有以下用例:

主要段落文字，通常用最深的灰色阴影；
次要文本或副标题，通常是次深的灰色阴影；
禁用状态文本和占位符，通常是深度较浅的灰色阴影。

这种模式在web上很常见，所以如果从头开始构建调色板，它是一个靠谱的参照。

所以现在我们需要三种不同的灰色，它们看起来足够不同，以显示主要、次要或第三级的状态，而且还可以通过无障碍标准。

使用Sketch画几个方形，先把左边的方形填充为最深色，然后把中间方形的不透明度降低了50%变成灰色，最后使用吸管工具吸一下这个灰色作为右边方形的颜色。

然后用Stark插件计算右边灰色方形的对比度。经过计算与白色背景的对比度正好是3:1，通过了AA级的标准，所以可把它作为网站上文字使用的最浅的灰色阴影。

这个过程需要一些时间，但只要持续对比就能找到可以满足目标比例的精确色值。

3.彩色的选择

以现有颜色为起点，品牌色不会改变，其他颜色来自网络状态常用的颜色系列：蓝色表示信息，绿色表示成功，橙色表示警告。

先从每个颜色的基础色开始，调整饱和度（横向滑动）和亮度（竖向滑动），创建出色相相同但对比度不同的颜色。

使用选择灰色时的相同方式，测试出符合对比度的颜色。彩色调色板更加主观，有时可能需要稍微调整色相来做出区分。

橙色的选择相对困难，因为把它调暗时，橙色很快就会变成棕色，所以最后决定只在对比度最低的地方使用。

在为颜色区分对比度的同时，为每种颜色创建了非常浅的阴影，在必要时可以当作背景色使用。

4.实际应用

最终得到了一套完整的配色方案，该方案可以满足可访问性准则，并为文本和界面之间提供了大量的选择空间。

到目前为止，用户对推出的新颜色感到满意，而且在很大程度上提高了可读性。

总结

在整个配色的过程中，可能需要很多次的试验，也可能会出现不同的错误，但是这些结果能够为所有用户创建一个更加可见、可读和可访问的网站。

原文：https://medium.com/envoy-design/how-to-design-an-accessible-color-scheme-4a13ca12c92b

作者：Katie Riley 译者：Clippp

觉得好看就点一下在看吧👇