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

可訪問性為何如此重要

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

可訪問性良好的產(chǎn)品是優(yōu)雅而友好的，我們理應對所有人都友好。

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

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

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

W3C：萬維網(wǎng)聯(lián)盟（W3C）是一個自發(fā)的國際組織，成立于 1994年，旨在制定開放的網(wǎng)絡標準。W3C 在 WCAG 2.1 中概述了他們的Web 可訪問性的詳細標準和指南，這本質(zhì)上是如今 Web 可訪問性最佳實踐的黃金準則。

確保產(chǎn)品的色彩可訪問性

在整個產(chǎn)品研發(fā)的生命周期中，盡早考慮可訪問性設計，是最好的——這樣可以減少產(chǎn)品后期來回追溯相關設計所花費的時間和金錢。選擇前期確定產(chǎn)品配色的時候，就需要考慮產(chǎn)品配色的可訪問性。

以下是一些比較有用的提示，確保你的產(chǎn)品具備良好的可訪問性：

1、確保對比度足夠

為了滿足W3C最低 AA 等級，你所選取的背景和文本的對比度至少要達到 4.5 : 1，因此在設計按鈕、卡片和導航元素的時候，請務必確保色彩組合的對比度。

有很多工具能夠幫你測試色彩組合的可訪問性，不過我發(fā)現(xiàn)最有用的始終還是 Colorable 和 Colorsafe。我個人更加傾向于 Colorable，因為它可以使用滑塊實時調(diào)整色相、飽和度和亮度，你可以直接選取特定的配色，并且確定它們的可訪問性的等級。

2、不要過分依賴色彩

你還需要確保很多信息不依賴色彩來進行傳遞，尤其是一些關鍵的系統(tǒng)信息，它們的可訪問性也是需要考量的。對于諸如錯誤狀態(tài)、成功狀態(tài)、系統(tǒng)警告和提示，都務必讓文本信息和圖標搭配起來，清楚地告知用戶（尤其是視覺障礙用戶）正在發(fā)生的事情。

對于圖表信息，應該添加紋理或者圖案，這樣即使是色盲用戶都可以輕松分辨它們，而不用擔心色彩會影響他們對于數(shù)據(jù)的感知。Trello 的Colorblind 友好模式就做的很不錯。

3、控制焦點狀態(tài)對比度

雖然如今絕大多數(shù)的用戶瀏覽網(wǎng)頁會使用鼠標或者直接屏幕點擊，但是依然會有一些運動障礙的用戶，會使用鍵盤來進行導航。所謂焦點狀態(tài)，指的是是用戶使用使用鍵盤的「Tab」鍵來點擊切換網(wǎng)頁頁面中不同鏈接的時候，每個鏈接周圍會呈現(xiàn)出的描邊外發(fā)光的視覺效果。

所有的瀏覽器對于焦點狀態(tài)，都有默認的顯示色彩，如果你想在后續(xù)產(chǎn)品中對它的顯示進行調(diào)整，那么需要盡量確保它的對比度足夠明顯，這對于有視覺缺陷的用戶而言，也能帶來足夠顯著的效果。

4、文檔和社交色彩系統(tǒng)

最后，創(chuàng)建可訪問性良好的色彩系統(tǒng)，最重要的方面，是要讓你的團隊能夠在需要的時候，能直接拿來使用，并且每個人都能夠用在對的地方。系統(tǒng)化地設計配色系統(tǒng)，不僅能夠減少混亂，還能夠在整個團隊范圍內(nèi)確保可訪問性的一致。根據(jù)我的經(jīng)驗，在UI Kit 和設計系統(tǒng)中直接標識出固定的組合，以及相應的可訪問性等級，這樣是最有效的。此外，使用 InVision Craft 或者 InVision DSM 等工具作為團隊協(xié)同，是非常有幫助的。下面是如何記錄各種配色組合以及配色可訪問性評級的示例。

結(jié)語

今天所談到的，其實更多是關于可訪問性這個事情的一些大概技巧。但是，如果你考慮這個問題，那么最值得參考的，就是 W3C 中的 WCAG 2.1 ，其中包含了最專業(yè)而詳盡的說明。雖然這些指導方針看起來有點令人生畏，但是它們能夠幫你更加深入的了解可用性設計。

在上文中所提到的一些設計資源在此：

Colorbox: Lyft 最新的配色工具，旨在創(chuàng)造可用性良好、可擴展的配色系統(tǒng)。

Designing Systematic Colors by Jeeyoung Jung: 提供一種非常有深度的方法供你創(chuàng)建可用性良好的配色系統(tǒng)，如果你正在為多產(chǎn)品設計配色，那么它將非常有用。

Colorable: 這是一款非常實用的、用來評估配色可訪問性的工具。

Colorsafe: 高可訪問性配色生成工具。

Color Oracle: 色盲模擬器，適用于 Windows、Mac 和 Linux。