UI/UX 設計師該關注的色盲、色弱族群

色弱人口很少嗎?

如果你是一個辨色能力正常的人,可能會覺得色弱是很稀有的族群,不太需要去關注。但是根據統計,全世界有8%的男性和0.5%的女性,有色弱的情形。以台灣來說就有約102萬人有色弱的困擾。

如果要做一個購物平台,應該會在意有上百萬的人因為你的配色,讓他們困擾而無法完成下單;如果在做一個政府網站,更不應該讓所弱的使用者因為設計不良而錯過一些重要訊息。

 

色盲和色弱有麼分別

色弱指的是辨色能力低於一般人,最常見的是紅/綠色色弱。色弱對於單一顏色的辨識能力通常還不至於混淆,比如說紅色、綠色、橘色等,但如果將不同的顏色搭配再一起,則很容易產生混淆,最常見的像是紅色/綠色、紫色/藍色、淺綠色/黃色這樣的組合就很容易讓色弱者感到難以辨識。而紅/綠色色盲是完全無法辨識該顏色,全色盲則是完全無法辨識顏色,只看到深淺不一的單一顏色(全色盲每100萬人裡面不到一個)。

 

色弱對明度的敏感度更強

如果你了解這是一個 UX 設計師該注意的問題,在我們抱怨許多政府網站的醜陋時,會開始反思,為什麼這些政府網站這麼沒氣質,難道不能用一些比較柔和、古典的顏色嗎?是不是因為有辨識度的考量。

或許是補償作用的關係,色弱對於辨色雖有困難,但是對於明度卻有較敏銳的分辨能力。因此提高明度對是其中一個解決方案。但我們有時候就是想用一些,向日本傳統色那樣,有氣質又低調的顏色。這時候我們可能需要一些工具來檢視我們設計出來的畫面是不是會讓色弱的使用者感到困擾。

 

用 Photoshop 檢視色弱看到的畫面

如果想確認設計稿的配色是否會造成色弱者的辨識困難,可以先把它放在 photoshop 或 Illustrator 裡開啟,從「檢視 > 校樣設定 > 選擇綠色色盲或紅色色盲」來檢視。

▼這是綠色色盲看到的首頁畫面,還好看起來沒有太大的問題,因為我在可點擊的文字部分,都盡量採用明度對比。

 

用形狀、圖示來輔助辨識

應避免只依靠顏色來區分訊息,就像我們的紅綠燈,全部都是圓的,只能靠辨別顏色來判斷不一樣的訊息。不過還好紅綠燈一次只亮一個純色燈,前面有提到獨立的單一色彩對色弱者比較不會產生辨識上的困擾。

▼印度的食品用紅色(葷)和綠色(素)的點來表示是否為素食。對紅色或綠色色盲會造成辨識上的困擾。

▼在綠色色盲眼裡看到的是這樣

▼UX 設計師都會知道運用色彩來引導,比如說紅色有「警示」意味、綠色暗示「安全」、黃色有「提醒」的訊息。色彩暗示對於色弱者或許不是那麼管用,這時可以選擇加上一些圖示來輔助辨識。

 

正常視覺使用者也會感到困擾的配色

除了色弱使用者以外,有些配色也會讓正常視覺使用者感到困擾,比如說直接使用互補色來當背景和文字(互補色就是色環圖上180度相對的顏色),文字邊界會產生類似發光的視覺感受,會給人一種眼花撩亂的感覺,造成辨識不易。如果不是刻意讓人感受頭暈噁心的效果,盡量避免這樣搭配。

 

選擇符合 WCAG 規範的配色

WCAG(Web Content Accessibility Guidelines)網頁內容可及性指引,包含文字、內容、色彩、圖像、聲音,是否能讓所有人都可以接收得到,包含色弱、視覺障礙、聽覺障礙等等。

介紹一個 Chrome 的擴充功能 WCAG Color contrast checker 可以用它來即時確認正在瀏覽的網頁是否符合 WCAG 的規範,包含字體的大小、元件大小、顏色等,在「color-bindness」選項,可以選擇各種色弱/色盲模式,讓你檢視各種色弱/色盲眼中看到的畫面是如何。

如果你想要做一份報告,研究別人的網站是否符合 WCAG 規範、研究它的 UX 設計有麼問題,這是一個很好的工具,但請不要研究我的網站 >_< ” 去研究各政府機關的網站吧。

▼那些打叉的部分就是未符合 WCAG 規範的元素,可能是字太小或是其他問題,你可以點選那個項目,他將會在網頁上用紅框標出該元素位置。
protanopia / protanomaly :紅色盲/色弱
deuteranopia / deuteranomaly :綠色盲/色弱
Tritanopia / Tritanomaly  :黃/藍色色盲/色弱

 

另外提供一個線上工具 Colorable 可以自動產生符合WCAG 規範的配色,用法相當簡單,進去後直接點「Random」他就會隨機產生可供色弱/色盲辨識的「文字/背景」配色。當然你也可以自己調整滑桿,看看色彩搭配的效果,如果控制區域的滑鈕和文字顏色呈現反白或反黑,就是你調整的顏色已經不符合WCAG了。

不可避免的每個設計師都會有慣用的配色傾向,比如說我在做這個網站之前很喜歡用日本傳統色,或是稱為自然色、三次色,要不然就是冰淇淋色。但最近開始覺得純色有它的力量,而這個 Colorable  隨機產生的顏色,總會出現我想都沒想過的配色,會覺得這個配色也太大膽了吧,也常常會帶有工業風,滿有意思的,之後應該也會試試看這種不按牌理出牌的配色。

*如果你想要能協助配出好顏色的工具請參考這篇:配色輔助工具 Adobe Capture, Adobe Color, Colorable

 

色弱者輔助 chrome 外掛

如果你本身有色弱,你可以安裝 Colorblind – Dalton for Google Chrome 這個 Chrome 擴充功能,它可以幫助你檢視那些因為配色而讓你使用上有困難的網站,另外你也可以寫 email 過去告知網站管理者你的使用者體驗,讓他們知道網站可以做怎樣的調整。

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…