[譯] 色彩無障礙性產品設計指南

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。