色彩報告 ❘ 如何為色盲做設計？
- 2018.07.13
- / 3794 Views
全世界12名男性中就有1名色盲或色覺缺陷（CVD），女性則是200名中會有1名。
這意味著，每 100 個造訪你的網站或 app 的使用者，就有 8 個人實際體驗到的內容，跟你想的不一樣。
如何確保每個使用者體驗到的內容都相同呢？
在你開始恐慌之前，請先看看我們對設計色盲無障礙 UX 所考慮的重點整理吧。
首先，色盲究竟是什麼？
大多數色盲都能夠像其他人一樣清楚地看到事物，不同於他們無法區分紅色，綠色或藍色光。
這種缺陷是 X 染色體基因突變所致，意思是女性更可能是帶有缺陷的染色體的帶原者，但本身不是色盲患者。
它可以分成三種主要的表現方式，以下簡介：
這種缺陷是 X 染色體基因突變所致，意思是女性更可能是帶有缺陷的染色體的帶原者，但本身不是色盲患者。
它可以分成三種主要的表現方式，以下簡介：
最常見的是紅 / 綠色盲，他們將紅色綠色視為同一種顏色。
紅色盲（ Protanopia ）的人對紅光較不敏感，
綠色盲（Deuteranopia）對綠光也有一樣的問題。
例如：有紅色盲的人無法分辨藍色跟紫色，因為他們沒辦法辨認紫色裡含有的紅光。
第三種藍黃色盲（Tritanopia）這是最少見的一種，他們無法分辨藍光跟黃光。
下面的圖表是各種色盲視覺上所看到的顏色狀態：
綠色盲（Deuteranopia）對綠光也有一樣的問題。
例如：有紅色盲的人無法分辨藍色跟紫色，因為他們沒辦法辨認紫色裡含有的紅光。
第三種藍黃色盲（Tritanopia）這是最少見的一種，他們無法分辨藍光跟黃光。
下面的圖表是各種色盲視覺上所看到的顏色狀態：
所以，要怎麼做出色盲無障礙的設計呢？
你可能會想：「我為什麼要為這一小群人做設計呢？」
不過一般來說，對色盲有利的元素，也廣泛的被視為是一個好設計。
所以如果你想做一個「好的設計」的網站，它應該要是能被所有人使用的。
不過一般來說，對色盲有利的元素，也廣泛的被視為是一個好設計。
所以如果你想做一個「好的設計」的網站，它應該要是能被所有人使用的。
無障礙設計並不代表您的設計美感完整性會受損。
以下是五個設計色盲友好 UX 的重點：
以下是五個設計色盲友好 UX 的重點：
1. 同時使用顏色跟符號
你不應該只依賴顏色去傳達訊息。
例如：某種類型的色盲可能很難、甚至是無法辨認紅色的錯誤訊息。
一種方法是在使用者需要注意的地方，同時使用顏色跟符號，臉書這個表單的錯誤訊息表現即是一個很好的例子。
例如：某種類型的色盲可能很難、甚至是無法辨認紅色的錯誤訊息。
一種方法是在使用者需要注意的地方，同時使用顏色跟符號，臉書這個表單的錯誤訊息表現即是一個很好的例子。
有趣的事實 ：
臉書 logo 的藍色，是特別為紅綠色盲的 Mark Zuckerberg 所挑選的，
因為他最能清楚辨認的顏色就是藍色了！
2. 保持在最簡單的狀態
你應該限制你的網站使用的用色；設計中使用的顏色越少，混淆的狀況越少。
極簡設計不僅不受趨勢影響，也十分有設計感。
極簡設計不僅不受趨勢影響，也十分有設計感。
3. 用圖案跟紋理表現對比
試著使用不同的紋理，而不是直觀的使用多種顏色。
例如：色盲可能很難辨認圖表，在這種狀況下最好用一些對比的圖案，並且搭配文字。
例如：色盲可能很難辨認圖表，在這種狀況下最好用一些對比的圖案，並且搭配文字。
4. 注意對比色彩跟色調
試著在你的設計使用清晰而且對比的顏色跟色調，而不要只依賴黑白來做對比。
例如：Word Feud 這個遊戲裡的磚，使用了四個讓一般人及色盲都可以輕鬆辨識的顏色。
例如：Word Feud 這個遊戲裡的磚，使用了四個讓一般人及色盲都可以輕鬆辨識的顏色。
5. 避免不良顏色的組合
設計時，所思考的顏色組合也是非常重要的。
以下是一些最好避免的顏色組合，因為他們很可能是色盲使用者的惡夢：
• 紅+綠
• 綠＋棕
• 藍＋紫
• 綠＋藍
• 淺綠＋黃
• 藍＋灰
• 綠＋灰
• 綠＋黑
補充筆記：你怎麼知道你是不是色盲呢？
有些人從來不知道自己是色盲，因為有些效果可以相對不被注意，除非有人指正他們。
下圖是測試色盲的圖片，試試看吧！
下圖是測試色盲的圖片，試試看吧！
還不確定嗎？
你可以做 38 個版本的測試，然後獲得測試結果。
02.. Color Blind Check ( APP )
一個由 Colorblindor 做的 Android app ，你可以在±60秒內測試你是否為色盲。
在這裡你可以上傳圖像，看看通過不同類型色盲的眼睛它會是什麼樣子。
總結
一般來說，UX 設計師應該設計讓每個人都無障礙使用的網站。
的確，沒有一個能夠適合所有人的解決方式。
但這邊有些基本的 UX 設計準則，需要在設計思考時被牢記在心：
的確，沒有一個能夠適合所有人的解決方式。
但這邊有些基本的 UX 設計準則，需要在設計思考時被牢記在心：
1. 別只依賴顏色去傳達訊息
2. 讓你的色票控制在 2–3 個顏色
3. 使用材質跟圖案去表現對比
4. 小心挑選對比色跟陰影
5. 避免使用不良的顏色組合
|
此文翻譯自提供 UX 服務的 Usabilla，
除封面圖片之外的內文及圖片，版權皆為作者 Robyn Collinge 所有。