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

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

2018/10/14 12490评论区

作为 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。

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/know-about-color-accessibility

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 版式设计 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里