可访问性配色的设计实践

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

可访问性配色的设计实践

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

可访问性配色的设计实践

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

可访问性配色的设计实践

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

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

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

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

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

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

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

2、什么是可访问性颜色?

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

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

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

可访问性配色的设计实践

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

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

AA级:最低标准

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

大文本应为3:1或更高

AAA级:增强标准

小文本应为7:1或更高

大文本应为4.5:1或更高

可访问性配色的设计实践

3、如何建立可访问性配色方案?

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

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

可访问性配色的设计实践

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

2.灰色的选择

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

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

可访问性配色的设计实践

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

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

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

可访问性配色的设计实践

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

可访问性配色的设计实践

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

可访问性配色的设计实践

可访问性配色的设计实践

3.彩色的选择

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

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

可访问性配色的设计实践

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

可访问性配色的设计实践

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

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

4.实际应用

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

可访问性配色的设计实践

可访问性配色的设计实践

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

可访问性配色的设计实践

总结

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

作者:Katie Riley 译者:Clippp

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

本文由 新媒体之家 作者:Clippp 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
1

发表评论