作為產(chǎn)品設(shè)計(jì)師，我最近和以為客戶合作創(chuàng)建了一組強(qiáng)可訪問性的色彩系統(tǒng)。相比于平時(shí)我們用到的配色，這套系統(tǒng)相對(duì)更加復(fù)雜，要求更高，而我也因此對(duì)于色彩的可訪問性有了更加深入的了解。下面就跟大家聊聊，配色的可訪問性設(shè)計(jì)~

可訪問性為何如此重要

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

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

數(shù)字產(chǎn)品的可訪問性落實(shí)到產(chǎn)品維度上，存在于許多不同的方面，而色彩是其中和設(shè)計(jì)連接最緊密的部分。對(duì)于有視力障礙的用戶而言，色彩的可訪問性和他們的體驗(yàn)息息相關(guān)。這其中，色弱和色盲用戶占據(jù)了相當(dāng)大的比例。

根據(jù)世界衛(wèi)生組織2017 年的調(diào)研：全世界有2.17億人，患有中度乃至重度的視力障礙。僅憑這一統(tǒng)計(jì)數(shù)據(jù)，就足以說明數(shù)字產(chǎn)品可訪問性的重要性。

讓數(shù)字產(chǎn)品具備可訪問性，不僅僅涉及到基本的道德，而且也存在潛在的法律問題和影響。2017年在美國境內(nèi)，總共發(fā)生了814起針對(duì)無法訪問或者可訪問性較差網(wǎng)站的聯(lián)邦訴訟，其中甚至包括一部分集體訴訟。

各個(gè)組織都曾經(jīng)試圖建立可訪問性設(shè)計(jì)的標(biāo)準(zhǔn)，其中最著名的是美國聯(lián)邦可訪問性委員會(huì)（第508條）和W3C，以下是相關(guān)標(biāo)準(zhǔn)的概述：

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

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

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

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

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

1. 確保對(duì)比度足夠

為了滿足W3C最低 AA 等級(jí)，你所選取的背景和文本的對(duì)比度至少要達(dá)到 4.5 : 1，因此在設(shè)計(jì)按鈕、卡片和導(dǎo)航元素的時(shí)候，請(qǐng)務(wù)必確保色彩組合的對(duì)比度。

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

2. 不要過分依賴色彩

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

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

3. 控制焦點(diǎn)狀態(tài)對(duì)比度

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

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

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

最后，創(chuàng)建可訪問性良好的色彩系統(tǒng)，最重要的方面，是要讓你的團(tuán)隊(duì)能夠在需要的時(shí)候，能直接拿來使用，并且每個(gè)人都能夠用在對(duì)的地方。系統(tǒng)化地設(shè)計(jì)配色系統(tǒng)，不僅能夠減少混亂，還能夠在整個(gè)團(tuán)隊(duì)范圍內(nèi)確?？稍L問性的一致。

根據(jù)我的經(jīng)驗(yàn)，在UI Kit 和設(shè)計(jì)系統(tǒng)中直接標(biāo)識(shí)出固定的組合，以及相應(yīng)的可訪問性等級(jí)，這樣是最有效的。此外，使用 InVision Craft 或者 InVision DSM 等工具作為團(tuán)隊(duì)協(xié)同，是非常有幫助的。

下面是如何記錄各種配色組合以及配色可訪問性評(píng)級(jí)的示例。

結(jié)語

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

在上文中所提到的一些設(shè)計(jì)資源在此：

• Colorbox: Lyft 最新的配色工具，旨在創(chuàng)造可用性良好、可擴(kuò)展的配色系統(tǒng)。
• Designing Systematic Colors by Jeeyoung Jung: 提供一種非常有深度的方法供你創(chuàng)建可用性良好的配色系統(tǒng)，如果你正在為多產(chǎn)品設(shè)計(jì)配色，那么它將非常有用。
• Colorable: 這是一款非常實(shí)用的、用來評(píng)估配色可訪問性的工具。
• Colorsafe: 高可訪問性配色生成工具。
• Color Oracle: 色盲模擬器，適用于 Windows、Mac 和 Linux。

原文作者 :?Justin Rey Reyna

譯者：陳子木

來源：https://www.uisdc.com/know-about-color-accessibility

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議