每個設計師都要明白的配色可訪問性設計
作為 Handsome 的產品設計師，我最近和以為客戶合作建立了一組強可訪問性的色彩系統。相比於平時我們用到的配色，這套系統相對更加複雜，要求更高，而我也因此對於色彩的可訪問性有了更加深入的瞭解。
可訪問性為何如此重要
數字產品的可訪問性對於所有人（包括在視覺、聽覺、語言、肢體和認知上有障礙的使用者）而言都很重要，而身為設計師和開發人員，應該將讓數字產品具備足夠良好的包容性，讓所有人都能夠從中獲得好處。
可訪問性良好的產品是優雅而友好的，我們理應對所有人都友好。
數字產品的可訪問性落實到產品維度上，存在於許多不同的方面。而色彩是其中和設計連線最緊密的部分。對於有視力障礙的使用者而言，色彩的可訪問性和他們的體驗息息相關。這其中，色弱和色盲使用者佔據了相當大的比例。根據世界衛生組織2017 年的調研，全世界有2.17億人，患有中度乃至重度的視力障礙。僅憑這一統計資料，就足以說明數字產品可訪問性的重要性。
讓數字產品具備可訪問性，不僅僅涉及到基本的道德，而且也存在潛在的法律問題和影響。2017年在美國境內，總共發生了814起針對無法訪問或者可訪問性較差網站的聯邦訴訟，其中甚至包括一部分集體訴訟。各個組織都曾經試圖建立可訪問性設計的標準，其中最著名的是美國聯邦可訪問性委員會（第508條）和W3C，以下是相關標準的概述：
第508條：這指的是最早創立於 1973年的康復法案中的第508條，你可以點選這裡檢視詳細內容。總的來說，無論是直屬於聯邦的網站，還是相關機構或者承包商所建立的網站，都需要有良好的可訪問性。
W3C：全球資訊網聯盟（W3C）是一個自發的國際組織，成立於 1994年，旨在制定開放的網路標準。W3C 在 ofollow,noindex" target="_blank">WCAG 2.1 中概述了他們的Web 可訪問性的詳細標準和指南，這本質上是如今 Web 可訪問性最佳實踐的黃金準則。
確保產品的色彩可訪問性
在整個產品研發的生命週期中，儘早考慮可訪問性設計，是最好的——這樣可以減少產品後期來回追溯相關設計所花費的時間和金錢。選擇前期確定產品配色的時候，就需要考慮產品配色的可訪問性。
以下是一些比較有用的提示，確保你的產品具備良好的可訪問性：
1、確保對比度足夠
為了滿足W3C最低 AA 等級，你所選取的背景和文字的對比度至少要達到 4.5 : 1，因此在設計按鈕、卡片和導航元素的時候，請務必確保色彩組合的對比度。
有很多工具能夠幫你測試色彩組合的可訪問性，不過我發現最有用的始終還是 Colorable 和 Colorsafe。我個人更加傾向於 Colorable，因為它可以使用滑塊實時調整色相、飽和度和亮度，你可以直接選取特定的配色，並且確定它們的可訪問性的等級。
2、不要過分依賴色彩
你還需要確保很多資訊不依賴色彩來進行傳遞，尤其是一些關鍵的系統資訊，它們的可訪問性也是需要考量的。對於諸如錯誤狀態、成功狀態、系統警告和提示，都務必讓文字資訊和圖示搭配起來，清楚地告知使用者（尤其是視覺障礙使用者）正在發生的事情。
對於圖表資訊，應該新增紋理或者圖案，這樣即使是色盲使用者都可以輕鬆分辨它們，而不用擔心色彩會影響他們對於資料的感知。Trello 的Colorblind 友好模式就做的很不錯。
3、控制焦點狀態對比度
雖然如今絕大多數的使用者瀏覽網頁會使用滑鼠或者直接螢幕點選，但是依然會有一些運動障礙的使用者，會使用鍵盤來進行導航。所謂焦點狀態，指的是是使用者使用使用鍵盤的「Tab」鍵來點選切換網頁頁面中不同連結的時候，每個連結周圍會呈現出的描邊外發光的視覺效果。
所有的瀏覽器對於焦點狀態，都有預設的顯示色彩，如果你想在後續產品中對它的顯示進行調整，那麼需要儘量確保它的對比度足夠明顯，這對於有視覺缺陷的使用者而言，也能帶來足夠顯著的效果。
4、文件和社交色彩系統
最後，建立可訪問性良好的色彩系統，最重要的方面，是要讓你的團隊能夠在需要的時候，能直接拿來使用，並且每個人都能夠用在對的地方。系統化地設計配色系統，不僅能夠減少混亂，還能夠在整個團隊範圍內確保可訪問性的一致。根據我的經驗，在UI Kit 和設計系統中直接標識出固定的組合，以及相應的可訪問性等級，這樣是最有效的。此外，使用 InVision Craft 或者 InVision DSM 等工具作為團隊協同，是非常有幫助的。下面是如何記錄各種配色組合以及配色可訪問性評級的示例。
結語
今天所談到的，其實更多是關於可訪問性這個事情的一些大概技巧。但是，如果你考慮這個問題，那麼最值得參考的，就是 W3C 中的 WCAG 2.1 ，其中包含了最專業而詳盡的說明。雖然這些指導方針看起來有點令人生畏，但是它們能夠幫你更加深入的瞭解可用性設計。
在上文中所提到的一些設計資源在此：
Colorbox : Lyft 最新的配色工具，旨在創造可用性良好、可擴充套件的配色系統。
Designing Systematic Colors by Jeeyoung Jung : 提供一種非常有深度的方法供你建立可用性良好的配色系統，如果你正在為多產品設計配色，那麼它將非常有用。
Colorable : 這是一款非常實用的、用來評估配色可訪問性的工具。
Colorsafe : 高可訪問性配色生成工具。
Color Oracle : 色盲模擬器，適用於 Windows、Mac 和 Linux。
