如何為色盲做設計?

Hannah Tsou
Feb 10, 2017 · 5 min read
此文翻譯自提供 UX 服務的 Usabilla,他們的客戶包括 HP、Phillips 跟 Bookin.com 等等。除封面圖片之外的內文及圖片,版權皆為作者 Robyn Collinge 所有。 原文連結

全世界大約有 1/12 的男性 1/200 的女性受色盲或色缺影響,這表示每 100 個造訪你的網站或 app 的使用者,就有 8 個人實際體驗到的內容,跟你想的不一樣。如何確保你的網站 UX 讓每個使用者使用起來都相同呢?讓我們來助你一臂之力吧!因此,在你開始恐慌之前,看看我們對設計色盲無障礙 UX 所考慮的重點整理吧。

首先,到底什麼是色盲呢?

大部分的色盲跟大家所看到的東西其實一樣清楚,差別在於他們不能分辨紅、綠或是藍光。這種缺陷是 X 染色體基因突變所致 —— 意思是女性更可能是帶有缺陷的染色體的帶原者,但本身不是色盲患者 —— 它分成三種主要的表現方式。

最常見的是紅綠色盲,他們把紅色跟綠色混在一起,視為同一種顏色。紅色盲( Protanopia )的人對紅光較不敏感,而綠色盲(Deuteranopia)對綠光也有一樣的問題。舉例來說,有紅色盲的人無法分辨藍色跟紫色,因為他們沒辦法辨認紫色裡含有的紅光。第三種藍黃色盲(Tritanopia)這是最少見一種,他們無法分辨藍光跟黃光。下面的圖表是各種色盲視覺上所看到的顏色區別。

所以,要怎麼做出色盲無障礙的設計呢?

你也許會想:「為什麼我要這麼麻煩的為這一小群人做設計呢?」不過一般來說,對色盲有利的元素,也廣泛的被視為是一個好設計。所以如果你想做一個設計良好的網站,它應該是能被所有人使用的。

無障礙設計並不代表您的設計美感完整性會受損。以下是五個設計色盲友好 UX 的重點:

1. 同時使用顏色跟符號

你不應該只依賴顏色去傳達訊息;舉例來說,有些色盲可能很難、甚至是無法辨認紅色的錯誤訊息。一種方法是在使用者需要注意的地方,同時使用顏色跟符號,臉書這個表單的錯誤訊息是一個很好的例子。

有趣的事實:眾所皆知臉書 logo 的藍色,是特別為紅綠色盲的 Mark Zuckerberg 挑選的,因為他最能清楚辨認的顏色是藍色。

2. 保持在最簡單的狀態

你應該限制你的網站使用的色盤顏色;設計中使用的顏色越少,混淆的狀況越少。

極簡設計不僅不受趨勢影響,在美感上也很讓人愉快,這點在做色盲無障礙設計時很實用。

3. 用圖案跟紋理表現對比

試著用不同的紋理而不是多種顏色,來設計需要強調的元素吧。舉例來說,色盲可能很難辨認圖表,在這種狀況下最好用一些對比的圖案,如果可能的話儘可能用文字標示。

4. 注意對比色彩跟色調

試著在你的設計使用一系列清晰而且對比的顏色跟色調,而不要只依賴黑白來做對比。例如:Word Feud 這個遊戲裡的磚,使用了四個讓一般人及色盲都可以輕鬆辨識的顏色。

5. 避免不良顏色的組合

你一定要聰明的挑選顏色的組合。
色盲對每個人的影響不太一樣,很難分辨哪些顏色用在網頁設計是安全的。話雖如此,以下是一些最好避免的顏色組合,因為他們很可能是色盲使用者的惡夢:

  • 紅+綠

補充筆記:你怎麼知道你是不是色盲呢?

呃⋯⋯有些人從來不知道自己是色盲,因為有些影響相對的可能被忽視,除非有人指正他們。下圖是測試色盲的圖片——試一下吧!(你可以在文章最後找到完整的測試連結)

還不確定嗎?

  1. Ishihara Color Blindness Test: 你可以做 38 個版本的測試,然後獲得測試結果。

總結

一般來說,UX 設計師應該創造讓每個人都無障礙使用的友好網站。但很不幸的,沒有一個能夠適合所有人的解決方式,特別是為色盲做設計的時候。但這邊有些基本的 UX 設計準則必須要牢記在心裡,一定會有幫助的:

  1. 別只依賴顏色去傳達訊息

你在為色盲做設計時,特別關注哪些元素呢?請在下方留言分享你的看法,或是推特給 @usabilla 吧!


在翻譯上有任何錯誤及建議,也歡迎留言與我分享。

Digital Sunday

一個 UX 設計師的 murmur

Hannah Tsou

Written by

Digital designer & Illustrator based in Melbourne.

Digital Sunday

一個 UX 設計師的 murmur

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade