《助你轻松做好无障碍的15个UI设计工具推荐》
文章转载自│无障碍设计小组
作者│夏冰莹
—

为什么要在设计过程中

考虑到无障碍？

关于无障碍设计的重要性，我已经在这篇文章、这篇文章、和这个讲座
等等讲过很多次了，相信大家都不想再听我唠叨，但为了照顾新读者，还是重申一下最重要的几点：


无障碍设计对所有人都更友善
不只是残障人士，每个人每天都会遇到很多残障瞬间，比如：
  • 在户外用手机、阳光很强看不清，符合无障碍标准的高清晰度文字就更容易阅读
  • 在颠簸的地铁上用手机会手抖，那么符合标准的大尺寸按钮就不容易误触。


越早做无障碍，工作就越轻松
如果等到整个产品都开发完毕、再去做无障碍测试，那时发现问题就为时已晚了。在策划和设计阶段就考虑好无障碍适配，是最省时省力的。

互联网产品被现代人高度依赖、应当有服务所有人的社会责任
引用Victor Pineda（城市规划师、无障碍权益运动人士）的一段话：
你设计的工具，会直接决定我能做出多少贡献。请你移除那些障碍，让我能够以我的才华回报社会。你能改变游戏的规则，让这个游戏中有我、有我的才华。
Victor Pineda访谈：希望设计师们做出能解锁人类潜力的设计，这不只会让那个软件或者学校对更多人来讲更加实用，它（也）能改变那些人们、因此改变社会
很多设计师问我，"我没有时间做无障碍怎么办？"、"老板觉得无障碍改善太费事了不支持，怎么办？"，但其实在设计过程中运用一些小工具，做好无障碍友善的设计一点也不费时，也压根不需要专门找老板汇报批准哒~！
下面分享一些我自己平时常用的宝藏工具和工作流程，望广泛扩散~
—
检查色彩对比度
色彩对比度，指的是 前景中文字/图片的颜色 和 背景颜色 之间的对比度，简单来说就是背景越淡、前景越深，内容的清晰度就越高，反之亦然。把色彩对比度量化的话，可以计算出比例，最低1:1（黑底黑字）、最高21:1（白底黑字）。
最权威的互联网无障碍规范 — WCAG AA规定，所有重要内容的色彩对比度需要达到 4.5:1 或以上（字号大于18号时达到 3:1 或以上），才算拥有较好的可读性。
白底黑字（对比度21:1）符合标准

白底深灰字（5.74:1）符合标准

白底浅灰字（1.35:1）不符合标准
色彩对比度是设计师最经常踩雷的无障碍规范。很多我们认为“看得清”的设计，其实只是“一个视力良好的年轻人、坐在光线良好的办公室里、使用高质量的显示器的时候看得清”而已。
在设计过程中使用
色彩对比度检查工具
，可以快速查询你的配色是否符合规范、及时修正。

#1: Stark
个人的最爱，在设计软件里选中两个图层就能快速计算出色彩对比度、告诉你是否负责无障碍标准。
不达标的时候，它还会推荐最接近当前颜色并符合标准的色彩建议、一键替换，非常方便（这个功能只能免费用3次，之后需要订阅）。
Stark也可以生成不同色盲情况的预览，帮助你挑选色盲友善的配色。
官网：getstark.co
或在Figma插件社区内搜索Stark
#2: Contrast
如果Stark不支持你用的设计软件，那么Contrast或许是其次方便的，可以在Mac系统内用吸管工具查询两个颜色之间的对比度，只不过要花$6.99买它。
另外有一个平价替代品叫Color Contrast Desktop，只要$0.99，我没用过无法评价。
官网：usecontrast.com
或在Mac app store搜索Contrast
#3: Polypane Color Contrast Checker
如果上面两个都不适用，你也可以用色彩对比度检查网站、手动输入两个颜色进行计算。
这类网站很多（搜"color contrast checker"），我个人推荐的是Polypane的对比度检查器，界面简单易懂，而且不符合标准的时候会给你最接近的颜色推荐，相当于Stark的平替版。
网站：polypane.app/color-contrast
另外，
Tanaguru Contrast Finder
也是一个提供近似颜色推荐的好工具：

https://contrast-finder.tanaguru.com
#4: Color.review
输入你的颜色，Color.review会直接在色彩选取器里面显示出几个常用对比度规范的分界线（3:1, 4.5:1, 7:1），帮助你很直观地挑选符合规范的配色。
网站：https://color.review
#5-6: 批量替换颜色插件
如果在设计途中发现一直使用的某个颜色不符合标准，那么你可以用插件批量替换颜色，节省大量逐一修改的时间。
Figma: 
Find and Replace Colors

https://www.figma.com/community/plugin/806266638862897503
Sketch：
Sketch Replace Colour

https://github.com/lewishowles/sketch-replace-colour
—
生成友善配色
很多设计师觉得，
“符合高对比度标准的颜色搭配都好无趣/好丑啊”
，但其实根本不是这样！
开始
新项目的时候，推荐用以下几个配色工具来找灵感、管理色彩系统：


#7: Randoma11y
这个网站会随机生成一对符合对比度标准的色彩搭配，并且都是非常大胆时髦的颜色，拿来给ppt / 海报 / banner / logo 之类的小项目找灵感也都相当好用噢！
网站：randoma11y.com
#8: Cloudflare Design - color
这个工具可以让你上传一张照片、或者输入一个网址，自动提取颜色、生成几套符合无障碍标准的UI配色方案，也是找配色灵感的神器！
网站：http://cloudflare.design/color
（注：2天前用的时候还好使的，今天再上去就打不开链接了> < 希望会尽快修复）
#9: Accessible Color

Palette Builder
输入你的所有项目颜色，这个工具就能告诉你有哪些搭配是符合标准的，所有可以使用的配色一目了然~
网站：https://toolness.github.io/accessible-color-matrix
#10: ColorBox
如果你的产品已经有比较完善的设计色彩系统，可以用这个工具来管理你的整套系统、很直观地看到不同颜色与黑/白之间的对比度数值，方便你在做UI的时候挑选合适的颜色。
网站：https://colorbox.io
#11：Data Color Picker
数据可视化配色工具，给出两端的颜色可以生成等距的中间色，方便辩识，而且默认的配色方案也是色盲友善的。
网站：

https://learnui.design/tools/data-color-picker.html
顺提，色盲友善的数据可视化的配色方案可以参考Venngage的这篇blog文章里面的几套配色推荐：
如何制作无障碍友善的信息图

https://venngage.com/blog/accessible-infographics/
—
残障模拟工具
使用残障模拟工具可以更好地建立同理心、理解不同类型的用户使用你的设计会遇到哪些问题。
不过模拟工具归根究底还是模拟，并不能100%还原障碍用户的感受，每个人的状况也会因人而异，当做一个参考就好。
#12: Color Oracle
非常好用的色盲模拟器，支持Mac / Win / Linux。
大约8%的男人和0.5%的女人有色盲或色弱、是相当大的族群。当然，UI中不应该只通过颜色来区分信息，但有时无论如何会用到色彩区分（比如数据可视化），那么就一定要使用色盲友善的配色方案。一般来讲，蓝/黄、蓝/橙是比较万用的搭配。
官网下载：colororacle.org
#13: Web Disability Simulator
阅读障碍模拟效果

可以模拟多种不同的障碍的Chrome插件，包括色盲、远视、手抖（鼠标指针抖动）、阅读障碍（文字跳动/较难的单词无法辩识）、注意力障碍（页面元素移动/随机出现无关的图像）。
模拟器内还会针对每一种障碍给出设计建议，非常值得参考。虽然视觉障碍、手抖、阅读障碍等状况因人而异、不像色彩对比度那样有"标准答案"，但是仍然有很多设计当中可以采用的实践原则。
插件安装：

https://chrome.google.com/webstore/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla
#14: NoCoffee
模拟视线模糊、白内障、边缘视觉缺失

NoCoffee的视觉障碍模拟比起Web Disability Simulator更加详细、涵盖障碍类别更广，包括视线模糊、对比度下降（所有人的视觉对比度都会随着年龄而下降）、杂色、白内障、糖尿病视网膜病变等。
插件安装：

https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
另外Funkify的障碍模拟插件也很好用，覆盖面广且简单易懂，只是需要订阅$4.99/月的会员，如果上面两个模拟器不满意的话可以考虑：www.funkify.org
—
无障碍标注文档
我在这篇文章里写到过无障碍标注文档的重要性和具体操作。
总结一下，就是设计师在和工程师交接的时候，需要给工程师提供一定的无障碍标注（包括无障碍标签、焦点顺序等），才能达到最好的无障碍用户体验。
#15: A11y - Focus Orderer
这个Figma插件通过简单的工具生成包含焦点顺序、无障碍标签在内的标注文档，避免设计师手动画各种无障碍标注，让交接工作变得简单高效~
插件安装：https://www.figma.com/community/plugin/731310036968334777
—
无障碍测试工具
如果是已经上线或者开发完毕的产品，可以使用无障碍测试工具快速检查规范度。这个工作大多是工程师负责的，但是设计师也完全可以用这些工具进行自我测试。
安卓端可以用Google Accessibility Scanner（更多资源参考安卓开发者文档），iOS端可以用Xcode内置的Accessibility Inspector。
网页端的测试工具非常多，个人感觉对非程序员比较友善的是
Siteimprove Accessibility Checker
和微软的
Accessibility Insights for Web
，另外
Axe
也不错，都可以试试看~

请注意，正确操作以上所有工具，也不能100%保证你的产品对于障碍用户来讲是好用的。
还是要请大家在设计开发的每一个阶段都融入包容性设计的思维、邀请更加多元的用户参与调研和测试。更多建议请参考我之前写的《包容性设计实践指南》。
往期推荐：
辞典说 | Shutterstock：大数据驱动下的2021年创意设计趋势
辞典甄选 | 书单03：去实际案例中体会设计思维
辞典甄选 | 书单02：送你一本「小偷」指南
辞典甄选 | 书单01：设计师也要懂点儿心理学
  UX 辞典  
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 •
形象理解用户体验，时刻关注设计趋势
Powered by Canopy Institute of Design
2020©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送，请设置个 星标☆ 」
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文