色彩無障礙指南:如何讓色盲用戶獲取色彩信息

10 評論 6281 瀏覽 21 收藏 34 分鐘

編輯導語:如今人們已經習慣于使用各種智能設備,然而全球有3億左右殘障人群,他們的需求不該被忽略,于是無障礙設計便應運而生。本文作者從色盲用戶的角度出發,分享如何做色彩無障礙設計,一起來學習一下吧。

隨著科技的普及和快速發展,人們越來越頻繁和習慣于使用智能設備,然而全球有3億左右的殘障人群, 無論是從科技還是法律的角度,這群人的需求不該被忽略。

于是無障礙設計應運而生。無障礙具體可拆分為視覺、聽覺、操作、認知、言語交流無障礙. 而色彩是視覺中很重要的部分,我們的世界是五彩繽紛的,不同的色彩被賦予不同的意義,對于色覺障礙人群,我們該如何包容性地設計,讓他們的生活更加便利和美好呢?

無障礙設計無處不在,舉個例子:Spotify有兩種播放模式,一個是隨機播放,一個是循環播放.它通過改變圖標的顏色為綠色,表明激活狀態,但是如果僅僅只是改變顏色,對于色盲用戶來說,不容易識別,因為原本鮮艷的綠色在他們看來是暗淡的:

但是加上小綠點之后,不去依靠顏色也很容易判斷當前的狀態:

再舉個例子:有一款名為FODMAP的應用程序值得借鑒,FODMAP是在腸道中不能正確吸收的糖, 這是一款通過列出食物中各種含糖量,來給用戶提供飲食參考的軟件。

軟件中用紅黃綠表示不同的FODMAP等級,但是這讓色盲用戶感到很困擾:

幸運的是,這個軟件的設置中,可以打開色盲幫助選項, 打開后你看到的界面就變成了這樣:

用顯而易見的符號替換顏色,無論對色盲用戶還是普通用戶,都很友好。

再舉個例子, 英國的在線足球網站在2012年時是這樣的:

色盲用戶根本無法分辨輸贏情況,此舉無疑是白白流失了全國的色盲用戶。后來,他們也意識到了問題,于是現在的設計時這樣的:

每個顏色色塊中填入字母,W代表贏,L代表輸,D代表平局,色盲用戶也可以輕松獲得信息。

但是目前無障礙的普及程度并不高,色盲用戶在日常生活中仍然面臨很多的問題,比如在商店買衣服問題、在線選座問題、無法使用色彩標簽等等。本文將帶你全面地了解如何做好色彩無障礙設計。

01 色盲類型

色盲的頻率相當高,十二分之一的高加索人(8%),二十分之一的亞洲人(5%)和25分之一的非洲男性(4%)是所謂的“紅綠”色盲。它比AB血型更常見,據統計,平均每12名男性中就有1人有某種形式的色盲, 每200名女性中就有1人, 占人口的4.25%。麥當勞每天為300萬色盲客戶提供服務。亞馬遜每天超過110萬客戶是色盲。

色盲遠比我們想象中的數量要龐大的多,所以設計色盲友好的互聯網產品,這件事情應當被重視和完善。

正常的彩色視覺需要用到三種功能正常的錐形細胞,紅色、綠色和藍色錐形細胞,根據三色錐形細胞的是否缺失,又可以將色盲分為全色盲,雙色色盲和三色色盲。

1. 三色色盲

三色色盲擁有三種錐形細胞, 但是其中一種錐細胞感知的光略微偏離對齊,根據哪種錐形細胞類型“有缺陷”,產生三種不同類型的效果,并且還具有不同的嚴重性。

三種情況分別是是紅色弱,即對紅光的敏感性降低,綠色弱: 對綠光(最常見的色盲形式)的敏感性降低,以及藍色弱: 對藍光的敏感性降低(極為罕見,只有0.001%的發生率)。

對某種類型光的感知力,有敏感性降低的,也有完全感知不到的,程度不一。

因為紅色和綠色錐形細胞感知到的光譜部分明顯重疊,因此紅色和綠色色弱都難以分辨紅色、綠色、褐色和橙色, 所以在診斷的時候常常被統稱為“紅綠色盲”,他們對藍色和紫色以及多種顏色的組合也常常難以區分。

藍色弱很難分辨藍色VS黃色,紫羅蘭VS紅色,藍色VS綠色. 藍色弱眼中是紅粉色,黑白色和青綠色的世界。

1)紅色色弱

2)綠色色弱

3)藍色色弱

2. 雙色色盲

雙色色盲只有兩種顏色的錐形細胞,第三種類型的細胞完全缺失. 所以,紅色盲完全無法感知到紅色,綠色盲完全無法感知到綠色,藍色盲完全無法感知到藍色。

同時喪失了紅色和綠色感知力的人生活在暗綠色的世界,所以藍色和黃色會非常突出。

大約1/2的三色色盲看到的世界與雙色色盲看到的很相似,但是三色色盲色彩感知力受光照影響較大,在良好的光照下,他們對色彩的感知力就更好,反之久更糟糕??偟膩碚f, 雙色色盲在辨別色彩方面比三色色盲更容易些。

為了讓大家更清晰的了解不同色盲眼中的世界,這里做一些展示:

1)紅色色盲

2)綠色色盲

3)藍色色盲

3. 全色盲

全色盲完全沒有任何一種顏色細胞,他們眼中世界是完全的黑白色,就像是黑白電視機那樣.但是我們在做產品無障礙時,基本不會考慮這一類人群,因為全色盲發生的概率實在是太低了,33000人中僅有1人,他們的生活因此有很多阻礙,在正常的光照條件下,也需要戴深色墨鏡。

02 WCAG 2.1指南是什么?

1. 什么是WCAG

WAI制定了幾項W3C建議,包括:

  • Web內容可訪問性指南(Web Content Accessibility Guidelines), 即 WCAG(2.1)
  • 創作工具輔助功能指南(Authoring Tool Accessibility Guidelines), 即ATAG(2.0)
  • 用戶代理輔助功能指南(User Agent Accessibility Guidelines),即UAAG(2.0)
  • 可訪問的豐富互聯網應用程序(the Accessible Rich Internet Applications suite of web standards),即WAI-ARIA

WCAG有三種評級: A、AA和AAA,標準從低到高:

  1. A是最低等級的需求:這是所有的網站、軟件和數字內容都應該做到的,可以被認為是及格線。
  2. AA:補償20/40(通常被報告為大約80歲老年人的典型視力)視力喪失的用戶的對比度敏感性損失,也是大多數網站可以接受的標準,電腦端和手機端的輔助技術都可以運行良好。
  3. AAA:補償視力損失為20/80(通常使用輔助技術來訪問他們的內容, 輔助技術通常具有對比度增強, 以及內置放大能力)或以上的低視力用戶的對比度敏感性損失,這個等級是無障礙的黃金級別,幾乎一切都能夠達到無障礙,包括一些很細小的環節。

2. WCAG傳送門

WCAG2.1詳細指南完整版可查看: https://www.w3.org/TR/WCAG21/

快速參考WCAG標準: https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_overview#use-of-color

WCAG關于顏色的要求描述:https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

03 色彩無障礙的八個要點

1. 對比度達到AA評級

WCAG中將字體分為一般字體和大字體。

大字體是這樣定義的:“大于等于18點常規體或者大于等于14點的粗體,如果是中日韓的語言,就要換算成同等大小”,除卻大字體之外的就是一般文字。

AA評級對于一般文字來說,文字和背景的顏色對比度不少于4.5:1的對比度;對于大字體和(如圖標、表格等等)組件的要求就沒那么嚴格,只要顏色對比不低于3:1即可。

如果帶有文本的按鈕也有彩色邊框,因為邊框沒有提供輔助信息,所以對邊框沒有對比度要求,只要該文字符合AA評級即可。

2. 不要只依賴顏色來區分不同含義

顏色在特定的語境中,會被賦予特殊的含義,如常見的紅色代表警告,綠色代表合格通過的意思等等,而患有色彩缺陷、視力衰退的老齡化群體、還有使用單色閱讀器(如kindle紙墨水)的人都可能會因此遺漏了顏色所傳達出的重要信息。

同時在用顏色表達某種信息時,為了確保所有的用戶都能接受到信息,需要添加另一種視覺形式,下面給大家舉例說明:

1)文字

文字是最容易讓色盲用戶了解到顏色含義的元素,也是我們首先會考慮到的。

一個典型例子是表單字段上的錯誤狀態, 紅色通常用于表示文本字段中的錯誤, 但是標紅不足以引起色盲用戶的注意,因為從他們的視角看, 紅色的字體在一群黑色的字體中顯得很暗, 很難分辨出來。因此,你需要一個額外的提示,例如文本或圖標,來指示錯誤狀態。

2)圖標

圖標是使用頻率很高的組件, 一些通用圖標的含義甚至不需要Tooltip來解釋,用戶就能一眼識別, 比如設置、警告、成功等等圖標,舉個例子:許多B端界面會通過不同的語義顏色,告知用戶某個流程的狀態,但是對于色盲用戶來說,識別顏色對應的狀態圖例是一件很艱難的事情,但是如果添加圖標輔助信息,一切就變得容易多了!

3)明暗對比

這一點常常被大家忽略.如果兩種顏色的色調不同,但是擁有強烈的明暗對比,那么在這里, 明暗對比也算是另一種視覺輔助形式,只要這兩種顏色的對比不低于3:1(AA)。

只有一種情況例外, 就是用戶需要準確地識別一種特定的顏色,這個時候對比度就不能算在內。

4)符號

舉個例子,標注紅色的文字標簽是必填項,出于無障礙的需要,我們可以在紅色標簽上打一個星號,這樣即使注意不到顏色差異,看到星號也會意識到此項必填。

但是!大多數情況下,星號的尺寸很?。ㄎ挥谧笊辖牵?,不容易被屏幕閱讀器捕捉到,為了改善這樣的情況,設計者可以增大星號的尺寸,以及為星號添加注釋(Tooltip), 這個注釋是由開發者完成的, 不借助屏幕閱讀器是無法捕捉這個信息。

5)數字

這是一個丙烯結構式,三個碳原子被標上了三種顏色(化學老師會教我們標記碳原子序號的規律,不過就假設這是老師在給一群初學者的課件吧),那么老師提問“黃色的碳原子和紫色的碳原子中間用的是什么鍵”,色盲學生可能就沒辦法辨別顏色所對應的碳原子了,但是如果標上序號,這樣提問:“1號碳原子和2號碳原子中間用的是什么鍵?”,是不是所有的學生就一目了然了?

6)圖形

減少使用顏色的數量,增加圖形樣式,這樣盲人用戶能夠花費更少的力氣在辨別顏色上。

7)圖案

在顯示圖形或者圖表時,可以提供一些圖案供用戶填充,色盲雖然對顏色不敏感,但是對于圖案卻非常容易察覺區別。

這里推薦幾個提供大量圖案樣式的網站:Http://pattern.monster

交互式地圖(付費使用):https://www.arcgis.com/index.html

Figma圖案填充插件:Hero Pattern for Image https://www.figma.com/community/plugin/743134103711120154

3. 圖表中要注意的點

以折線圖舉例:

  • 避免使用圖例,盡量在圖形旁邊注釋,因為盲人在距離拉遠的時候,就更難去識別并且對應名字
  • 避免使用細線條,建議組合不同的虛線/實線,虛線的間距差異化
  • 關鍵數據點可以采用不同的幾何圖形標記,更便于識別

再以堆疊條形圖為例:

  • 使用飽和度高的顏色,避免使用飽和度低且相近的顏色
  • 盲人盡管不能識別有些顏色,但他們對明暗和圖案非常敏感,嘗試用不同的圖案代替顏色
  • 在不同的圖案之間,創造明暗對比

再舉個倫敦地鐵圖和上海地鐵圖的例子:

4. 白色字體還是黑色字體

WCAG的標準被許多人奉為無障礙法則,但是有些情況下,并不適用。舉個例子:你覺得黑色字體和白色字體在橙色的背景上,哪一種看起來更清晰?

相信有不少人覺得白色字體看起來更舒服,更清晰,但是WCAG的顏色標準卻告訴我們,黑色達到了AAA的級別,而白色卻連AA級別都沒有達到:

不僅僅是我們,在很早之前,就有設計師對此產生疑惑,并做了用戶調研。

Ericka Seastrand 曾在2019年做過一項用戶調研,調研對象是20名色盲用戶,測試問題是: 黑色還是白色的字體在該背景下更突出? 最后的結果顯示: 61%的用戶認為白色字體更清晰。

這些用戶也給出了具體的原因:

所以謹記:盡信書,則不如無書。WCAG的標準僅供參考,但是實際運用中,應當以用戶的感受為參考,質疑精神是很可貴的!

5. 按鈕二三事

1)灰色按鈕

有些人認為不能夠使用灰色的按鈕,因為灰色給人以不可用的暗示,但是其實并沒有領悟不可用狀態的本質. 視覺深度才是幫助用戶判斷按鈕狀態的核心.活動狀態是通過顏色對比度而不是色調傳達的。

正常狀態的按鈕的文字與背景對比起來,看上去更接近和占主導地位,而不可用狀態缺乏對比度,文字看起來在更遠的地方。不過灰色按鈕經常被用作二級按鈕,主按鈕都是需要使用彩色。

同樣地,按鈕的各種交互狀態,只要對比度有差異性,能夠傳達視覺深度變化,就是符合無障礙的標準的,以Ant Design舉例:

2)讓你的主按鈕最顯眼

在大多數情況下,設計師們都是通過賦予主按鈕顏色,吸引用戶注意,但是在色盲用戶眼中,主按鈕的顏色差異很難被捕捉到,甚至在有些色盲眼中無法分辨顏色:

為了增加主按鈕和次按鈕的對比, 這個時候我們可以嘗試:

  • 增加主按鈕尺寸的大小
  • 把主按鈕和次按鈕放在不同的位置
  • 描邊、圖標、字重差異化

6. 色彩組合黑榜

當你在為你的產品或者品牌選擇色彩時,一定要避免下面的色彩組合:

7. 超鏈接文字

網頁中超鏈接文本很常見,比如百度百科,如果只是用顏色區別超鏈接,對于有些色盲很難注意到這是一個超鏈接,他需要將鼠標滑過時,發現變成一只手,才能知道。

所以對于超鏈接文本,添加下劃線是一個很好的方式:

8. 解決色盲買衣服難題

曾經看過一個色盲講述自己買衣服的難題, 他來到商場,看到一件衣服,但是不確定這個衣服是什么顏色,可是衣服上的標簽也沒有寫顏色,所以他只好硬著頭皮去問商店里其他的人,承受著一些不解和懷疑的目光,如果這件衣服有清晰的顏色標簽的話,就能輕松解決這個問題了。這一點對于購物網站來說,尤其重要。

04 如何制作色盲友好的PPT

1. PPT本身注意

1. 避免文本和對象被背景遮擋的情況。 例如,文本/對象和背景之間的亮度和飽和度應該有足夠的對比度。避免組合亮度相同但色調不同的顏色。例如,綠色背景上的紅色字符對色盲來說是不可讀的。在深色背景上使用明亮的文本/對象,反之亦然。

2. 文本和對象盡可能粗或大,色盲人很難區分細線和小符號的顏色, 對于彩色文本,一定要使用粗體字體。

3. 小心使用紅色和綠色,對于視覺正常的人來說,純紅色是明亮生動的顏色。但對于色盲來說,它就像藍色或深綠色一樣暗淡。特別是對于紅色盲來說,深紅色看起來幾乎是黑色的。因此,避免在黑色背景上使用紅色字符,包括黑板。但是有一些紅色對色盲來說是鮮活的, 比如:

避免使用純綠色,使用偏藍一點的綠色。

4. 在深藍色背景上無法看清:深紅色、明亮的紫紅色、細線條。

5. 在一堆黑色字體中,很難看到深紅色強調的字體。

6. 盡量減少顏色的數量,可以使用不同的外形和少量容易識別的顏色的組合。

7. 保持顏色色調的對比的同時,也可以添加亮度的對比。

8. 使用種類少且容易識別的字體。

2. 演講者要注意

盡量不要使用顏色的名字交流信息. 在演講時,去指代ppt上的某個東西時,不要說“那個紅色的細胞”,嘗試描述除了顏色信息之外的,比如“那個紅色的方形的位于PPT左上角的細胞”。

3. 設備和環境的選擇

  • 選擇綠色激光筆,由于紅色激光筆使用長波長的光, 色盲通常很難看到指向哪里最近, 綠色激光筆可用, 色盲和非色盲都很容易看到。
  • 1兆瓦的光線適合普通研討室,如果是很大很大的禮堂,可以使用5兆瓦的燈光。

05 色彩無障礙工具推薦

1. 色盲模擬工具

Stark: 色盲模擬器和顏色對比度檢查器網站, sketch/figma/XD插件 https://www.getstark.co

Color Oracle: 一款免費的色盲模擬軟件,支持Windows,Mac 和 Linux. https://colororacle.org

Sim Daltonism: 一款色盲模擬軟件,可以選擇不同類型的色盲.只有mac版本. https://michelf.ca/projects/mac/sim-daltonism/

Toptal:一款在線模擬色盲工具. https://www.toptal.com/designers/colorfilter

2. 顏色對比度工具

Color-contrast-checker: 顏色對比度檢查器,提供快速調節, figma插件 https://www.figma.com/community/plugin/733159460536249875/A11y—Color-Contrast-Checker

Tanaguru Contrast Finder: 檢測顏色對比度,如果你的顏色沒有達到要求,還會提供新顏色建議. https://contrast-finder.tanaguru.com

Color Review: 提供兩種顏色組合在一起的預覽,檢測結果失敗還會提供顏色建議https://color.review

color contrast checker from polypane: 提供顏色對比和修改建議. https://polypane.app/color-contrast

Accessible colors: 提供顏色對比、修改建議、還可以輸入字體大小和字重. https://accessible-colors.com

3. 為你的產品搭建無障礙色板

Accessible color palette builder: 選擇5個顏色,網站會通過分析這些的顏色的排列組合,判斷你的色板是否符合無障礙標準https://toolness.github.io/accessible-color-matrix

contrast grid: 通過在左側邊欄手動添加/刪減行列、編輯行列的色值,為您提供這些顏色排列組合的對比度結果,非常高效而且一目了然https://contrast-grid.eightshapes.com

Cloudflare color tool:當你不知道選擇什么顏色毫無頭緒時,你可以嘗試這個網站!它會幫你提取來自某個鏈接、某個圖片的顏色色板,當然你也能輸入色值.然后把這些顏色拖到對應的功能(底色、主色、背景色、描邊色),你就可以預覽下你的產品用了這個色板大概是什么樣子了.它同時也提供這些顏色的排列組合分析https://color.cloudflare.design

06 結語

少數群體如色盲、老齡化群體、殘障群體等等,在近些年來,他們對無障礙使用互聯網的需求,越來越受到關注,也許你在現在不需要無障礙技術的幫助,但是隨著你變老,在未來的某個階段也許無障礙技術就會大大的幫助你。

色彩無障礙只是無障礙的一小步,但是卻是證明無障礙普及進步的一大步。

參考文章:

https://medium.com/inside-design/a-guide-to-color-accessibility-in-product-design-516e734c160c

https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness

https://modus.medium.com/the-myths-of-color-contrast-accessibility-4b7fcba77317

https://jfly.uni-koeln.de/color

https://www.bounteous.com/insights/2019/03/22/orange-you-accessible-mini-case-study-color-ratio

本文由郝小七指導http://www.aharts.cn/u/917803

 

本文由 @自來卷夏憶 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝作者分享的色盲設計,學到了很多實際運用層面上的設計,色彩無障礙只是無障礙的一小步,但是卻是證明無障礙普及進步的一大步。

    來自廣東 回復
    1. ??

      來自上海 回復
  2. 全色盲的世界看起來好陰暗,希望照顧這類人群的產品越來越多吧

    回復
    1. 未來科技越來越發達了,相信全色盲的世界會變得更美好的

      來自上海 回復
  3. mark,收藏??

    回復
    1. ??

      來自上海 回復
  4. 部分app對色盲用戶的關愛和尊重,既體現了其人文關懷,在用戶量上也更勝一籌

    來自廣東 回復
    1. 是的沒錯,以人為本才能贏得用戶

      來自上海 回復
  5. 發現藍色色弱看起來的很好看,像是加了濾鏡感覺

    回復
    1. 因為藍色弱眼中是紅粉色、黑白色和青綠色的世界,賽博朋克的配色能不好看嘛哈哈

      來自上海 回復