每個設計師都要明白的配色可訪問性設計
作為 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。