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

时间：2023-09-05 17:48:01 | 来源：网站运营

时间：2023-09-05 17:48:01 来源：网站运营

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

为什么要在设计过程中考虑无障碍？

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

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

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

互联网产品被现代人高度依赖、应当有服务所有人的社会责任
引用Victor Pineda（城市规划师、无障碍权益运动人士）的一段话：“你设计的工具，会直接决定我能做出多少贡献。请你移除那些障碍，让我能够以我的才华回报社会。你能改变游戏的规则，让这个游戏中有我、有我的才华。”

很多设计师问我，"我没有时间做无障碍怎么办？"、"老板觉得无障碍改善太费事了不支持，怎么办？"，但其实在设计过程中运用一些小工具，做好无障碍友善的设计其实一点也不费时，也压根不需要专门找老板汇报批准哒~！

下面分享一些我自己平时常用的宝藏工具和工作流程，希望广泛扩散~

---

【检查色彩对比度】

色彩对比度，指的是【前景中文字/图片的颜色】和【背景颜色】之间的对比度，简单来说就是背景越淡、前景越深，内容的清晰度就更高，反之亦然。把色彩对比度量化的话，可以计算出比例值，最低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

---

【生成友善配色】

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

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

---

相关文章

更多无障碍相关的讨论和干货，欢迎关注我的本站专栏「无障碍，是每个人都被世界善待」以及公众号「无障碍设计小组」。

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