射鸡狮们,如何弄懂配色可访问性设计?

原创 admin  2018-10-18 11:11:02  阅读 23 次 评论 0 条

作为产品设计师,我最近和认为客户合作创建了一组强可拜访性的颜色体系。比较于平常咱们用到的配色,这套体系相对愈加复杂,要求更高,而我也因而关于颜色的可拜访性有了愈加深化的了解。下面就跟大家聊聊,配色的可拜访性设计~

可访问性为何如此重要

数字产品的可拜访性关于所有人(包含在视觉、听觉、言语、肢体和认知上有妨碍的用户)而言都很重要,而身为设计师和开发人员,应该将让数字产品具有足够杰出的包容性,让所有人都能够从中获得优点。

可拜访性杰出的产品是高雅而友爱的,咱们理应对所有人都友爱。

数字产品的可拜访性落实到产品维度上,存在于许多不同的方面,而颜色是其间和规划衔接最紧密的部分。关于有视力妨碍的用户而言,颜色的可拜访性和他们的体会休戚相关。这其间,色弱和色盲用户占有了相当大的份额。

依据世界卫生安排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 ,其中包含了最专业而详尽的说明。虽然这些指导方针看起来有点令人生畏,但是它们能够帮你更加深入的了解可用性设计。


本文地址:http://www.uiwhy.cn/uistudy/uipost85.html
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?