助你轻松做好无障碍的15个UI设计工具推荐

为何要在结构设计操作过程中考量无线网络？

关于无线网络结构设计的必要性，我已经在这首诗、这篇回答、和那个专题讲座等等讲过许多次了，相信大家都不想再听我成天，但照料到新听众，我还是强调一下最重要的以下几点：

无线网络结构设计对其他人都更和善

及早做无线网络，组织工作就越随心所欲

网络商品被当代人高度依赖、应当有服务其他人的社会风气责任

许多结构雕塑家问我，”我没有时间做无线网络咋办？”、”老板娘觉得无线网络改善太称心了不支持，咋办？”，但只不过在结构设计操作过程中运用许多小辅助工具，搞好无线网络和善的结构设计只不过一点也不耗时，也压根儿不需要专门找老板娘请示批准哒~！

下面撷取许多我自己平时常用的宝物辅助工具和组织工作业务流程，期望广泛蔓延~

【检查美感对比度】

美感对比度，指的是【发展前景中文本/图片的色调】和【大背景色调】之间的对比度，简单来说就是大背景越淡、发展前景越远，内容的对比度就更高，与此相反。把美感对比度定量的话，可以计算出比例值，最低1:1（蓝底蓝底）、最高21:1（蓝底）。

最权威性的网络无线网络规范 —— WCAG AA规范规定，所有重要内容的美感对比度需要达到 4.5:1 或以上（字号大于18号时达到 3:1 或以上），才算拥有较好的可读性。

美感对比度是结构雕塑家最经常踩雷的无线网络规范。许多我们认为“看得清”的结构设计，只不过只是“一个视力良好的年轻人、坐在光线良好的办公室里、使用高质量的显示器的时候看得清”的结构设计而已。

在结构设计操作过程中使用美感对比度检查辅助工具，可以快速查询你的配色是否符合规范、及时修正。

#1: Stark（Figma, Sketch, Adobe XD插件）

个人的最爱，在结构设计应用软件里选中两个图层就能计算出美感对比度、告诉你是否负责无线网络标准。

不达标的时候，它还会推荐最接近当前色调并且符合要求的美感建议、一键替换，非常方便（那个功能只能免费用3次，之后需要付费订阅）。

Stark也可以生成不同色盲状况的预览，帮助你挑选色盲和善的配色。

官网：https://www.getstark.co

或在Figma插件社区内搜索Stark

#2: Contrast（Mac应用软件）

如果Stark不支持你用的结构设计应用软件，那么Contrast或许是其次方便的，可以在Mac系统内用吸管辅助工具查询两个色调之间的对比度，只不过要花$6.99买它。另外有一个平价替代品叫Color Contrast Desktop，只要$0.99，我没用过无法评价。

官网：https://usecontrast.com或在Mac app store搜索Contrast

#3: Polypane Color Contrast Checker

如果上面两个都不适用，那么你也可以用美感对比度检查网站、手动输入两个色调进行计算。这类网站许多（搜”color contrast checker”），我个人推荐的是Polypane的对比度检查器，界面简单易懂，而且不符合要求的时候会给你最接近的色调推荐，相当于Stark的平替版。另外Tanaguru Contrast Finder也是一个提供色调推荐的好辅助工具。

网站：https://polypane.app/color-contrast

#4: Color.review

输入你的色调，Color.review会直接在美感选取器里面显示出几个常用对比度规范的分界线（3:1, 4.5:1, 7:1），帮助你很直观地挑选配色。

网站：https://color.review

#5-6: 批量替换色调插件

如果在结构设计途中发现一直使用的某个色调不符合要求，那么你可以用这两个插件批量替换色调，节省大量逐一修改的时间。

Figma: Find and Replace Colors

Sketch：Sketch Replace Colour

【生成和善配色】

许多结构雕塑家觉得，“符合T8100标准的色调搭配都好无趣/好丑啊”，但只不过根本不是这样！开始新项目的时候，推荐用以下几个配色辅助工具来找灵感、管理美感系统：

#7: Randoma11y

那个网站会随机生成一对符合对比度标准的美感搭配，并且都是非常大胆时髦的色调，拿来给ppt / 海报 / banner / logo 之类的小项目找灵感也都相当好用噢！

网站：https://randoma11y.com

#8: Cloudflare Design – color

那个辅助工具可以让你上传一张照片、或者输入一个网址，自动提取色调、生成几套符合无线网络标准的UI配色方案，也是找配色灵感的神器噢！

网站：https://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文章里面的几套推荐：如何制作无线网络和善的信息图

【残疾模拟辅助工具】

使用残疾模拟辅助工具可以更好地建立同理心、理解不同类型的用户使用你的结构设计会遇到哪些问题。不过模拟辅助工具归根究底还是模拟，并不能100%还原障碍用户的感受，每个人的状况也会因人而异，当成一个参考就好。

#12: Color Oracle

非常好用的色盲模拟器，支持Mac / Win / Linux。大约8%的男人和0.5%的女人有色盲或色弱、是相当大的族群。当然，UI中不应该只通过色调来区分信息，但有时无论如何会用到美感区分（比如说数据可视化），那么就一定要使用色盲和善的配色方案。一般来说，蓝/黄、蓝/橙是比较万用的搭配。

下载：https://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/月的会员，如果上面两个模拟器不满意的话可以考量。

【无线网络标注文档】

我在这首诗里写到过无线网络标注文档的必要性和具体操作。总结一下，就是结构雕塑家在和工程师交接的时候，需要给工程师提供一定的无线网络标注（包括无线网络标签、焦点顺序等），才能达到最好的无线网络用户体验。

#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%保证你的商品对于障碍用户来说是好用的。还是要请大家在结构设计开发的每一个阶段都融入包容性结构设计的思维、邀请更加多元的用户参与调研和试验。更多建议请参考我之前写的《包容性结构设计实践指南》。

相关文章

无线网络，是每个人都被世

期待和大家一起打造更和善、更有温度的网络。