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

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