助你輕松做好無障礙的15個UI設(shè)計工具推薦

時間：2023-09-05 17:48:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-05 17:48:01 來源：網(wǎng)站運(yùn)營

助你輕松做好無障礙的15個UI設(shè)計工具推薦：

為什么要在設(shè)計過程中考慮無障礙？

關(guān)于無障礙設(shè)計的重要性，我已經(jīng)在這篇文章、這篇回答、和這個講座等等講過很多次了，相信大家都不想再聽我嘮叨，但照顧到新讀者，我還是重申一下最重要的幾點：

無障礙設(shè)計對所有人都更友善
不只是殘障人士，每個人每天都會遇到很多殘障瞬間，比如：在戶外用手機(jī)、陽光很強(qiáng)看不清，符合無障礙標(biāo)準(zhǔn)的高清晰度文字就更容易閱讀；再比如在顛簸的地鐵上用手機(jī)，符合標(biāo)準(zhǔn)的大尺寸按鈕就不容易誤觸。

越早做無障礙，工作就越輕松
如果等到整個產(chǎn)品都開發(fā)完畢、再去做無障礙測試，那時發(fā)現(xiàn)問題就為時已晚了。在策劃和設(shè)計階段就考慮好無障礙適配，才是最省時省力的。

互聯(lián)網(wǎng)產(chǎn)品被現(xiàn)代人高度依賴、應(yīng)當(dāng)有服務(wù)所有人的社會責(zé)任
引用Victor Pineda（城市規(guī)劃師、無障礙權(quán)益運(yùn)動人士）的一段話：“你設(shè)計的工具，會直接決定我能做出多少貢獻(xiàn)。請你移除那些障礙，讓我能夠以我的才華回報社會。你能改變游戲的規(guī)則，讓這個游戲中有我、有我的才華?！?br>
很多設(shè)計師問我，"我沒有時間做無障礙怎么辦？"、"老板覺得無障礙改善太費事了不支持，怎么辦？"，但其實在設(shè)計過程中運(yùn)用一些小工具，做好無障礙友善的設(shè)計其實一點也不費時，也壓根不需要專門找老板匯報批準(zhǔn)噠~！

下面分享一些我自己平時常用的寶藏工具和工作流程，希望廣泛擴(kuò)散~

---

【檢查色彩對比度】

色彩對比度，指的是【前景中文字/圖片的顏色】和【背景顏色】之間的對比度，簡單來說就是背景越淡、前景越深，內(nèi)容的清晰度就更高，反之亦然。把色彩對比度量化的話，可以計算出比例值，最低1:1（黑底黑字）、最高21:1（白底黑字）。

最權(quán)威的互聯(lián)網(wǎng)無障礙規(guī)范 —— WCAG AA規(guī)范規(guī)定，所有重要內(nèi)容的色彩對比度需要達(dá)到 4.5:1 或以上（字號大于18號時達(dá)到 3:1 或以上），才算擁有較好的可讀性。

色彩對比度是設(shè)計師最經(jīng)常踩雷的無障礙規(guī)范。很多我們認(rèn)為“看得清”的設(shè)計，其實只是“一個視力良好的年輕人、坐在光線良好的辦公室里、使用高質(zhì)量的顯示器的時候看得清”的設(shè)計而已。

在設(shè)計過程中使用色彩對比度檢查工具，可以快速查詢你的配色是否符合規(guī)范、及時修正。

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

個人的最愛，在設(shè)計軟件里選中兩個圖層就能計算出色彩對比度、告訴你是否負(fù)責(zé)無障礙標(biāo)準(zhǔn)。

不達(dá)標(biāo)的時候，它還會推薦最接近當(dāng)前顏色并且符合標(biāo)準(zhǔn)的色彩建議、一鍵替換，非常方便（這個功能只能免費用3次，之后需要付費訂閱）。

Stark也可以生成不同色盲狀況的預(yù)覽，幫助你挑選色盲友善的配色。

官網(wǎng)：https://www.getstark.co
或在Figma插件社區(qū)內(nèi)搜索Stark

#2: Contrast（Mac軟件）

如果Stark不支持你用的設(shè)計軟件，那么Contrast或許是其次方便的，可以在Mac系統(tǒng)內(nèi)用吸管工具查詢兩個顏色之間的對比度，只不過要花$6.99買它。另外有一個平價替代品叫Color Contrast Desktop，只要$0.99，我沒用過無法評價。

官網(wǎng)：https://usecontrast.com
或在Mac app store搜索Contrast

#3: Polypane Color Contrast Checker

如果上面兩個都不適用，那么你也可以用色彩對比度檢查網(wǎng)站、手動輸入兩個顏色進(jìn)行計算。這類網(wǎng)站很多（搜"color contrast checker"），我個人推薦的是Polypane的對比度檢查器，界面簡單易懂，而且不符合標(biāo)準(zhǔn)的時候會給你最接近的顏色推薦，相當(dāng)于Stark的平替版。另外Tanaguru Contrast Finder也是一個提供顏色推薦的好工具。

網(wǎng)站：https://polypane.app/color-contrast

#4: Color.review

輸入你的顏色，Color.review會直接在色彩選取器里面顯示出幾個常用對比度規(guī)范的分界線（3:1, 4.5:1, 7:1），幫助你很直觀地挑選配色。

網(wǎng)站：https://color.review

#5-6: 批量替換顏色插件

如果在設(shè)計途中發(fā)現(xiàn)一直使用的某個顏色不符合標(biāo)準(zhǔn)，那么你可以用這兩個插件批量替換顏色，節(jié)省大量逐一修改的時間。

Figma: Find and Replace Colors

Sketch：Sketch Replace Colour

---

【生成友善配色】

很多設(shè)計師覺得，“符合高對比度標(biāo)準(zhǔn)的顏色搭配都好無趣/好丑啊”，但其實根本不是這樣！開始新項目的時候，推薦用以下幾個配色工具來找靈感、管理色彩系統(tǒng)：

#7: Randoma11y

這個網(wǎng)站會隨機(jī)生成一對符合對比度標(biāo)準(zhǔn)的色彩搭配，并且都是非常大膽時髦的顏色，拿來給ppt / 海報 / banner / logo 之類的小項目找靈感也都相當(dāng)好用噢！

網(wǎng)站：https://randoma11y.com

#8: Cloudflare Design - color

這個工具可以讓你上傳一張照片、或者輸入一個網(wǎng)址，自動提取顏色、生成幾套符合無障礙標(biāo)準(zhǔn)的UI配色方案，也是找配色靈感的神器噢！

網(wǎng)站：https://cloudflare.design/color
（注：2天前用的時候還好使的，今天再上去就打不開鏈接了> < 希望會盡快修復(fù)）

#9: Accessible Color Palette Builder

輸入你的所有項目顏色，這個工具就能告訴你有哪些搭配是符合標(biāo)準(zhǔn)的，所有可以使用的配色一目了然。

網(wǎng)站：https://toolness.github.io/accessible-color-matrix

#10: ColorBox

如果你的產(chǎn)品已經(jīng)有比較完善的設(shè)計色彩系統(tǒng)，可以用這個工具來管理你的整套系統(tǒng)、很直觀地看到不同顏色與黑/白之間的對比度數(shù)值，方便你在做UI的時候挑選合適的顏色。

網(wǎng)站：https://colorbox.io/

#11：Data Color Picker

數(shù)據(jù)可視化配色工具，給出兩端的顏色可以生成等距的中間色，方便辯識，而且默認(rèn)的配色方案也是色盲友善的。

網(wǎng)站：https://learnui.design/tools/data-color-picker.html

順提，色盲友善的數(shù)據(jù)可視化的配色方案可以參考Venngage這篇blog文章里面的幾套推薦：如何制作無障礙友善的信息圖

---

【殘障模擬工具】

使用殘障模擬工具可以更好地建立同理心、理解不同類型的用戶使用你的設(shè)計會遇到哪些問題。不過模擬工具歸根究底還是模擬，并不能100%還原障礙用戶的感受，每個人的狀況也會因人而異，當(dāng)成一個參考就好。

#12: Color Oracle

非常好用的色盲模擬器，支持Mac / Win / Linux。大約8%的男人和0.5%的女人有色盲或色弱、是相當(dāng)大的族群。當(dāng)然，UI中不應(yīng)該只通過顏色來區(qū)分信息，但有時無論如何會用到色彩區(qū)分（比如數(shù)據(jù)可視化），那么就一定要使用色盲友善的配色方案。一般來講，藍(lán)/黃、藍(lán)/橙是比較萬用的搭配。

下載：https://colororacle.org/

#13: Web Disability Simulator

模擬多種障礙的Chrome插件，包括色盲、遠(yuǎn)視、手抖（鼠標(biāo)指針抖動）、閱讀障礙（文字跳動/較難的單詞無法辯識）、注意力障礙（頁面元素移動/隨機(jī)出現(xiàn)無關(guān)的圖像）。

模擬器內(nèi)還會針對每一種障礙給出設(shè)計建議，非常值得參考。雖然視覺障礙、手抖、閱讀障礙等狀況因人而異、不像色彩對比度那樣有"標(biāo)準(zhǔn)答案"，但仍然有很多設(shè)計當(dāng)中可以采用的實踐原則。

插件安裝：https://chrome.google.com/webstore/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla

#14: NoCoffee

NoCoffee的視覺障礙模擬比起Web Disability Simulator更加詳細(xì)、涵蓋障礙類別更廣，包括視線模糊、對比度下降（所有人的視覺對比度都會隨著年齡而下降）、雜色、白內(nèi)障、糖尿病視網(wǎng)膜病變等。

插件安裝：https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl




另外Funkify的障礙模擬插件也很好用，涵蓋障礙全面且簡單易懂，只是需要訂閱$4.99/月的會員，如果上面兩個模擬器不滿意的話可以考慮。

---

【無障礙標(biāo)注文檔】

我在這篇文章里寫到過無障礙標(biāo)注文檔的重要性和具體操作。總結(jié)一下，就是設(shè)計師在和工程師交接的時候，需要給工程師提供一定的無障礙標(biāo)注（包括無障礙標(biāo)簽、焦點順序等），才能達(dá)到最好的無障礙用戶體驗。

#15: A11y - Focus Orderer

這個Figma插件通過簡單的工具生成包含焦點順序、無障礙標(biāo)簽在內(nèi)的標(biāo)注文檔，避免設(shè)計師手動畫各種無障礙標(biāo)注，讓交接工作變得簡單高效~

插件安裝：https://www.figma.com/community/plugin/731310036968334777

---

【無障礙測試工具】

如果是已經(jīng)上線或者已經(jīng)開發(fā)完畢的產(chǎn)品，可以使用無障礙測試工具快速檢查規(guī)范度。這個工作大多是工程師負(fù)責(zé)的，但是設(shè)計師也完全可以用這些工具進(jìn)行自我測試。

安卓端可以用Google Accessibility Scanner（更多資源參考安卓開發(fā)者文檔），iOS端可以用Xcode內(nèi)置的Accessibility Inspector。

網(wǎng)頁端的測試工具非常多，個人感覺對非程序員比較友善的是Siteimprove Accessibility Checker和微軟的Accessibility Insights for Web，另外Axe也不錯，都可以試試看~

---

請注意，正確操作以上所有工具，也不能100%保證你的產(chǎn)品對于障礙用戶來講是好用的。還是要請大家在設(shè)計開發(fā)的每一個階段都融入包容性設(shè)計的思維、邀請更加多元的用戶參與調(diào)研和測試。更多建議請參考我之前寫的《包容性設(shè)計實踐指南》。

---

相關(guān)文章

更多無障礙相關(guān)的討論和干貨，歡迎關(guān)注我的本站專欄「無障礙，是每個人都被世界善待」以及公眾號「無障礙設(shè)計小組」。

期待和大家一起打造更友善、更有溫度的互聯(lián)網(wǎng)。