我和你有點不一樣:對色盲者的體貼設計

世界上大約有 8% 的男性人口擁有某種形式的色盲,女性約 0.5%。以這比例去推算,臺灣的色盲者將近 116 萬人。可以說是一個相當龐大的族群。

這些人不只在網路上、光是在日常生活上就常遭到不公平的待遇;就拿考取駕照來說好了,色盲者通常都是不被允許駕車上路的,雖然是基於交通安全的考量,但這卻是是相當不公平的待遇。其實,真正的原因在於我們日常生活中的設計缺乏同理心,未曾貼近這個族群的角度去思考與看待事情。

為了輔助色盲所設計的交通信號燈(來源):

uni_signal2

 

實際上在加拿大 Halifax 的確有這個燈號設計存在(資料來源

 

 

讓我們感受一下色盲者眼中所見的世界

色盲者可分為:紅色盲、綠色盲、藍色盲以及多色色盲等其他色盲者,其中以紅綠色色盲最為普遍(參考 Wiki-色盲),我們來看看色盲者的眼中的世界有什麼不一樣:

如何檢查自己的圖片在色盲者眼中的模樣

對於設計師來說,在 Photoshop 跟 Illustrator 中使用校樣設定是最快速直覺的方式了。

使用[檢視]>[校樣設定]即可模擬色盲族群所看到的色彩:

在其他狀況下,使用 Color Oracle 這個軟體,就可以輕鬆的在目前的螢幕顯示中預覽色盲族群所看到的狀況:

剪貼簿-3

Deuteranopia (Common):綠色色盲(常見)。

Protanopia (Rare):紅色色盲(稀有)。

Tritanopia (Very Rare):藍色色盲(非常稀有)。

 

針對色盲者的設計解決方案

1. 色彩的選用

以最常見的紅色與綠色色盲者所看見的光譜如下:

我們可以發現色盲者對於顏色的辨識度不高,但是對於明度的表現則相對敏感,因此在設計主要資訊的選擇上,最好是選用明度對比高的色彩組合來顯示重要資訊:例如黑色以及白色,可以說是最安全容易閱讀的色彩配色,如下圖:

根據研究,白底黑字的辨識度最高,而黑底白字較為不傷眼。因此重要的文字訊息都應該使用黑白兩色來標示,並且可以透過字體的大小、粗體、斜體等來區分訊息的重要程度。當如果真的有使用色彩的必要時,請使用藍色、黃色或其混合色(綠色),但是要注意對於藍色色盲者反而會誤判這兩種顏色。

 

2. 從造型輔助著手

對於色彩相當講究的圖形設計師而言,即使是最小化的色彩選用限制也會令他們頭痛不已,因此在這種狀況下我們可以選擇適當的配合方案來解決問題:

A. 避免只使用色彩作為資訊的辨別依據。例如上面舉例的紅綠燈設計,紅綠燈的設計加上了造型的區別,讓色盲者也可以輕易的分辨出其不同之處

colorreacle03

B. 圖表、線條圖使用不同的線條造型,提高色盲者的辨識度

colorreacle10

 

C. 為色塊加上材質:遇到使用到色塊的圖形資訊顯示時,除了顏色以外,為色塊加上材質並且加上適當的線框,也可以有效的提高資訊的辨識度:

colorreacle08

 

幾個好的與不好的設計範例

We Are Color Blind 這個網站中除了闡述了色盲者的處境、也收集了一些關於色盲者的設計範例:

iChat:這個 Mac 系統內建的聊天軟體提供了 User shapes to indicate status 選項,將三種不同線上狀況的燈號加上圖形造型區別以三角形代表黃色的暫離、正方型代表了紅色的離開。colorreacle05

Wordfeud:這個手持裝置上的遊戲在遊戲物件的配色上使用了無障礙配色以外,也加上了字母 來加強辨識度:(AppStoreGooglePlay

colorreacle06

 

參考文獻:

Wiki百科:色盲條目

We Are Color Blind

Designing For, and As, a Color-Blind Person

信息图形中的颜色探讨—面向色盲人士友好的设计解决方案

 

延伸閱讀:《先選擇對的顏色,而不是喜歡的顏色》

2000 年,現任哥倫比亞大學商學院的教授 Iyengar 和他的研究生們做了個名聞遐邇的果醬實驗。她們在知名的德爾格超市擺了兩個果醬試吃攤,其中一個總共擺了 ...
在圖形化使用者介面中常常可以看到許多各種不同的圖示,即使是我們平常每天瀏覽的網頁中,除了文字、圖片以外,最常見的就是各種標示功能與美觀效果的圖示了。這些圖示的功...
在現在的網站上,多媒體資料佔了許許多多的資訊空間,許多時候我們都會需要製作縮圖(Thumbnail)來增加可以容納圖片的空間,或是減少圖片的檔案大小,以增加網站...
透過瀏覽器直接拖放(Drag & Drop)圖片上傳早已不是新鮮事,網路上也有許多 JQuery 的插件可以直接套用(例:Blueimp、 Dropar...
很久以前有一個邪惡的國王,他會將他的每個死刑犯都關在陰暗的地窖中。直到行刑的那天,國王的劊子手會將死刑犯帶到刑場中,國王會給他兩個選擇:「你可以馬上就死在劊子手...
在影像處理以及繪圖軟體中,我們常常會遇到這兩個名詞: sRGB 與 AdobeRGB,許多數位相機也提供這兩種選項讓使用者選擇,在繼續講這兩個名詞之前,我們得先...
© 2013 Desiring Clicks. All Rights Reserved.
Top