如何為色盲做設計？

此文翻譯自提供 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 個版本的測試，然後獲得測試結果。
2. Color Blind Check: 一個由 Colorblindor 做的 Android app ，你可以在±60秒內測試你是否為色盲。
3. Coblis: Color Blindness Simulator: 在這裡你可以上傳圖像，看看通過不同類型色盲的眼睛它會是什麼樣子。
4. Mobile Apps: 這裡有 3 個專門開發來幫助色盲用戶的 Android 和 iOS app。

總結

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

1. 別只依賴顏色去傳達訊息
2. 讓你的色票控制在 2–3 個顏色
3. 使用材質跟圖案去表現對比
4. 小心挑選對比色跟陰影
5. 避免使用不良的顏色組合

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

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