[译] 色彩无障碍性产品设计指南

• 原文地址：A guide to color accessibility in product design
• 原文做者：InVision
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Hopsken
• 校对者：Ivocin

关于无障碍设计的讨论有不少，但你是否想过色彩的无障碍设计？

最近，有一个客户带来了一个项目，该项目具备很是具体、复杂的无障碍色彩体系。这让我意识到这个课题是如此重要，其内容又是如此丰富。

图片：Justin Reyna

让咱们来学习如何使用你已经知道的设计原则来进行色彩无障碍设计。

为何无障碍性如此重要？

数字产品的无障碍设计旨在为全部人提供精致的使用体验，这些人包括有视觉、语言、听觉、身体或者认知障碍的人。做为设计师、开发者以及全部科技行业从业人员，咱们有能力去创造一个咱们全部人都为之骄傲的网络 — 一个为全部人创造，服务于全部人，不排斥任何群体的网络。

并且，作出不具有无障碍性的产品是种很粗鲁的行为。因此，请保持礼貌。

色彩无障碍设计使得有视力障碍或者色觉缺陷的人可以得到与正常人一样的数字体验。2017 年，WHO（世界卫生组织）估计，大约有 2.17 亿人患有某种形式的中度至重度视力障碍。仅凭这个数据，咱们就有足够的理由去作无障碍设计。

“作出不具有无障碍性的产品是种很粗鲁的行为。因此，请保持礼貌。”

无障碍设计不只仅只是道德上的最佳实践，若是不服从关于无障碍性的监管要求，还会有潜在的法律隐患。在 2017 年，联邦法院收到过至少 814 条关于网站涉嫌未提供无障碍访问的诉讼，包括为数很多的集体诉讼。各个组织都在努力创建无障碍性标准，其中最著名的是美国无障碍委员会（United States Access Board，Section 508）和 W3C 组织（World Wide Web Consortium）。如下是这些规范的概述:

• Section 508：508 号法令援引自 1973 年康复法案（Rehabilitation Act of 1973）的第 508 节。你能够在这里找到详细的说明。总而言之，根据 508 法令，若是你隶属于任何联邦机构，或者为联邦机构构建网站（例如：承包商），那么你的网站必须具备无障碍性。
• W3C：W3C 组织是一个国际性的自发性组织，于 1994 年创建，为互联网提供开发性规范。在 WCAG 2.1 中，W3C 概述了它们关于互联网无障碍性的指导方针。这基本上就是互联网无障碍设计的金科玉律。

确保你的产品具有色彩无障碍性

最好是在产品生命周期的早期就考虑无障碍性 —— 这在之后能够帮您省下很多时间和金钱。为了保证色彩无障碍性，在你为产品选择主题色彩时就要考虑好，随着产品发展下去，你会发现这么作的好处。

这里给出一些小技巧来帮助你打造色彩无障碍性产品。

提供足够的对比度

为了达到 W3C 标准 AA 评级最低限度，背景与文字的对比度至少为 4.5:1。所以，在设计按钮、卡片或者导航元素之类时，记得检查色彩组合的对比度是否符合要求。

有不少工具能够帮助你检查色彩组合的无障碍性，我我的认为最好用的是 Colorable 和 Colorsafe。我之因此喜欢 Colorable 是由于你能够经过使用滑动条来调整色相、饱和度和明度，它会实时显示出你的调整将如何影响特定颜色组合的无障碍性评分。

不要单纯依赖颜色

为了保证无障碍性，确保你没有彻底依赖颜色来展现系统不一样层级的关键信息。所以，对于错误状态、成功状态或者系统警告等，诸如此类，确保同时使用文字或者图标来清晰地展现发生了什么。

除此之外，当展现图片、表格之类时，容许用户选择是否加入纹理或图案。确保色盲用户可以准确地分辨出它们，而不用担忧颜色会影响他们对数据的理解。Trello 在这上面作得很棒，它特别提供了色盲友好模式。

聚焦（Focus）状态对比度

当使用键盘浏览站点时，聚焦状态能够经过在元素周围显示视觉引导来帮助人们在页面上导航。这对有视觉缺陷、运动障碍，以及单纯喜欢用键盘导航的人群会颇有帮助。

全部浏览器都有一个默认的聚焦状态颜色，可是若是你打算在你的产品上覆盖掉它，那么请务必确保你有提供足够的色彩对比度。这使得有视力障碍或色觉缺陷的人群能够经过聚焦状态在页面内导航。

文档化和推广色彩系统

最后，建立色彩无障碍系统过程当中最关键的一步就是，要让你的团队可以在须要的时候可以查阅它，这样每一个人都清楚恰当的用法。这不只能够减小混乱和滥用，也能够保证在你的团队中无障碍设计永远是个优先事项。根据个人经验，明确地在 UI 套件或设计系统中显示出特定颜色组合的可访问性评级是最有效的，尤为是在经过某个工具（如：InVision Craft 或 InVision DSM）进行团队间合做时。这里有一个关于如何文档化背景文字颜色组合及其可访问性评级的例子。

让咱们行动起来

这只是一些提升产品无障碍性的小建议。另外，别忘了这只是关于色彩无障碍性的建议。要想详细地了解无障碍设计原则，推荐先熟悉 WCAG 2.1 规范。虽然这些规范看上去有些吓人，但网上有大量的的资源能够帮到你。若是遇到困难，不要犹豫，向你身边的（或者网上的）设计师们寻求帮助。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。