作为设计师如何弄懂配色可访问性设计

　　作为产品设计师，我最近和以为客户合作创建了一组强可访问性的色彩系统。相比于平时我们用到的配色，这套系统相对更加复杂，要求更高，而我也因此对于色彩的可访问性有了更加深入的了解。下面就跟大家聊聊，配色的可访问性设计
　　可访问性为何如此重要
　　数字产品的可访问性对于所有人（包括在视觉、听觉、语言、肢体和认知上有障碍的用户）而言都很重要，而身为设计师和开发人员，应该将让数字产品具备足够良好的包容性，让所有人都能够从中获得好处。
　　可访问性良好的产品是优雅而友好的，我们理应对所有人都友好。
　　数字产品的可访问性落实到产品维度上，存在于许多不同的方面，而色彩是其中和设计连接最紧密的部分。对于有视力障碍的用户而言，色彩的可访问性和他们的体验息息相关。这其中，色弱和色盲用户占据了相当大的比例。
　　根据世界卫生组织2017年的调研：全世界有2。17亿人，患有中度乃至重度的视力障碍。仅凭这一统计数据，就足以说明数字产品可访问性的重要性。
　　让数字产品具备可访问性，不仅仅涉及到基本的道德，而且也存在潜在的法律问题和影响。2017年在美国境内，总共发生了814起针对无法访问或者可访问性较差网站的联邦诉讼，其中甚至包括一部分集体诉讼。
　　各个组织都曾经试图建立可访问性设计的标准，其中最著名的是美国联邦可访问性委员会（第508条）和W3C，以下是相关标准的概述：
　　第508条：这指的是最早创立于1973年的康复法案中的第508条，你可以点击这里查看详细内容。总的来说，无论是直属于联邦的网站，还是相关机构或者承包商所创建的网站，都需要有良好的可访问性。
　　W3C：万维网联盟（W3C）是一个自发的国际组织，成立于1994年，旨在制定开放的网络标准。W3C在WCAG2。1中概述了他们的Web可访问性的详细标准和指南，这本质上是如今Web可访问性最佳实践的黄金准则。
　　确保产品的色彩可访问性
　　在整个产品研发的生命周期中，尽早考虑可访问性设计，是最好的，这样可以减少产品后期来回追溯相关设计所花费的时间和金钱。选择前期确定产品配色的时候，就需要考虑产品配色的可访问性。
　　以下是一些比较有用的提示，确保你的产品具备良好的可访问性：
　　1。确保对比度足够
　　为了满足W3C最低AA等级，你所选取的背景和文本的对比度至少要达到4。5：1，因此在设计按钮、卡片和导航元素的时候，请务必确保色彩组合的对比度。
　　有很多工具能够帮你测试色彩组合的可访问性，不过我发现最有用的始终还是Colorable和Colorsafe。我个人更加倾向于Colorable，因为它可以使用滑块实时调整色相、饱和度和亮度，你可以直接选取特定的配色，并且确定它们的可访问性的等级。
　　2。不要过分依赖色彩
　　你还需要确保很多信息不依赖色彩来进行传递，尤其是一些关键的系统信息，它们的可访问性也是需要考量的。对于诸如错误状态、成功状态、系统警告和提示，都务必让文本信息和图标搭配起来，清楚地告知用户（尤其是视觉障碍用户）正在发生的事情。
　　对于图表信息，应该添加纹理或者图案，这样即使是色盲用户都可以轻松分辨它们，而不用担心色彩会影响他们对于数据的感知。Trello的Colorblind友好模式就做的很不错。
　　3。控制焦点状态对比度
　　虽然如今绝大多数的用户浏览网页会使用鼠标或者直接屏幕点击，但是依然会有一些运动障碍的用户，会使用键盘来进行导航。所谓焦点状态，指的是是用户使用使用键盘的Tab键来点击切换网页页面中不同链接的时候，每个链接周围会呈现出的描边外发光的视觉效果。
　　所有的浏览器对于焦点状态，都有默认的显示色彩，如果你想在后续产品中对它的显示进行调整，那么需要尽量确保它的对比度足够明显，这对于有视觉缺陷的用户而言，也能带来足够显著的效果。
　　4。文档和社交色彩系统
　　最后，创建可访问性良好的色彩系统，最重要的方面，是要让你的团队能够在需要的时候，能直接拿来使用，并且每个人都能够用在对的地方。系统化地设计配色系统，不仅能够减少混乱，还能够在整个团队范围内确保可访问性的一致。
　　根据我的经验，在UIKit和设计系统中直接标识出固定的组合，以及相应的可访问性等级，这样是最有效的。此外，使用InVisionCraft或者InVisionDSM等工具作为团队协同，是非常有帮助的。
　　下面是如何记录各种配色组合以及配色可访问性评级的示例。
　　结语
　　今天所谈到的，其实更多是关于可访问性这个事情的一些大概技巧。但是，如果你考虑这个问题，那么最值得参考的，就是W3C中的WCAG2。1，其中包含了最专业而详尽的说明。虽然这些指导方针看起来有点令人生畏，但是它们能够帮你更加深入的了解可用性设计。
　　在上文中所提到的一些设计资源在此：
　　Colorbox：Lyft最新的配色工具，旨在创造可用性良好、可扩展的配色系统。
　　DesigningSystematicColorsbyJeeyoungJung：提供一种非常有深度的方法供你创建可用性良好的配色系统，如果你正在为多产品设计配色，那么它将非常有用。
　　Colorable：这是一款非常实用的、用来评估配色可访问性的工具。
　　Colorsafe：高可访问性配色生成工具。
　　ColorOracle：色盲模拟器，适用于Windows、Mac和Linux。
　　原文作者：JustinReyReyna