每個設計師都要明白的配色可訪問性設計

作為 Handsome 的產品設計師，我最近和以為客戶合作創建了一組強可訪問性的色彩系統。相比于平時我們用到的配色，這套系統相對更加復雜，要求更高，而我也因此對于色彩的可訪問性有了更加深入的了解。

可訪問性為何如此重要

數字產品的可訪問性對于所有人（包括在視覺、聽覺、語言、肢體和認知上有障礙的用戶）而言都很重要，而身為設計師和開發人員，應該將讓數字產品具備足夠良好的包容性，讓所有人都能夠從中獲得好處。

可訪問性良好的產品是優雅而友好的，我們理應對所有人都友好。

數字產品的可訪問性落實到產品維度上，存在于許多不同的方面。而色彩是其中和設計連接最緊密的部分。對于有視力障礙的用戶而言，色彩的可訪問性和他們的體驗息息相關。這其中，色弱和色盲用戶占據了相當大的比例。根據世界衛生組織2017 年的調研，全世界有2.17億人，患有中度乃至重度的視力障礙。僅憑這一統計數據，就足以說明數字產品可訪問性的重要性。

讓數字產品具備可訪問性，不僅僅涉及到基本的道德，而且也存在潛在的法律問題和影響。2017年在美國境內，總共發生了814起針對無法訪問或者可訪問性較差網站的聯邦訴訟，其中甚至包括一部分集體訴訟。各個組織都曾經試圖建立可訪問性設計的標準，其中最著名的是美國聯邦可訪問性委員會（第508條）和W3C，以下是相關標準的概述：

第508條：這指的是最早創立于 1973年的康復法案中的第508條，你可以點擊這里查看詳細內容。總的來說，無論是直屬于聯邦的網站，還是相關機構或者承包商所創建的網站，都需要有良好的可訪問性。

W3C：萬維網聯盟（W3C）是一個自發的國際組織，成立于 1994年，旨在制定開放的網絡標準。W3C 在 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。