無障礙設計：為色盲用戶多走一步

有這麼一個人群，他們不是用戶的大多數，卻也有不小的佔比，這個人群就是視覺辨認障礙人群，即我們常說的「色盲(Color Blindness)」。據數據統計，世界上大約有8%~10%的男性以及0.5%的女性患有不同程度的色盲。也就是說，大約每10個用戶中可能就有1個是色盲用戶。

什麼是色盲？

提到色盲，從字面上看，我們常有一個誤解，認為色盲看不到顏色。事實上，色盲並不是色覺的完全喪失，而是無法正常感知和分辨某些顏色（其中以紅綠色盲佔大多數）。相反，色盲可以分辯出很多的顏色，且在特定情形下，色盲者甚至要比正常辨色力者更有優勢。

不少研究證明，色盲擁有極強的夜視能力，並且更擅長識別特定顏色的偽裝。因為顏色信號總是容易吸引注意力，使人專註於色彩而忽略了圖形。而色盲者沒有「顏色過載」這個負擔，他們往往能避過色彩的「噪音」發現隱藏的圖形。據說第二次世界大戰期間，軍方就僱傭色盲者識破用迷彩偽裝的敵方部署來確定轟炸目標。

如下圖，你找到圖中的隱藏目標蛇了嗎？相信你的色盲朋友會比你更快找到。

目前色盲主要分為三種類型：

紅綠色盲：難以辨認紅、綠色調。包括紅色盲、綠色盲、紅色弱、綠色弱，且男性多於女性，因為紅綠色盲是X染色體隱性遺傳病。紅綠色盲占色盲中的大多數。

藍黃色盲：難以辨認藍色和黃色，容易將藍色與綠色、黃色與紫色混淆。包括藍色盲、藍色弱。藍黃色盲占色盲中的很小一部分。

全色盲：只可見灰度的色階分布，其眼睛對亮度非常敏感，在白天的室外需戴上深色的太陽鏡保護眼睛。世界上只有極少數的人是全色盲。

TA們眼中的樣子

也許了解了背景但仍然無法感同身受，日常中的所見在TA們眼中究竟是什麼樣子？TA們又有著怎樣的困擾？

我們看看常用的APP圖標在不同色盲用戶眼中的呈現。

從上圖可以看出常用的APP圖標在不同的色盲視圖中均不同程度的丟失了顏色，紅色和綠色、綠色和藍色、黃色和綠色等變得難以區分，顏色的辨認變得困難。

我們以淘寶日活為6000萬用戶來計算，就有大概600萬的用戶看到的是如下的界面呈現。

在商品詳情頁面中，顏色的選項呈現對於色盲用戶來說要快速而準確的分辨好像並不是那麼容易的一件事。

淘票票的選擇座位界面，座位狀態使用紅綠配色對於紅綠色盲及全色盲來說基本無法區分。所以除了顏色上的區分，還需要使用圖形或文字等輔助形式來幫助TA們從另一個維度來識別狀態。

眾所周知，股票軟體一般都使用紅綠配色，在色盲用戶眼中呈現的是下圖的樣子。在這樣的使用場景中，無障礙設計是非常必要的。

無障礙設計案例

接下來我們需要思考的是：在設計工作中如何保證所有用戶在視覺上的良好體驗，消除色盲人群在色彩感知上的偏差，保障產品的可用性和易用性，無障礙設計應該如何著手？我們先來看幾個案例。

高德地圖，在正常模式之外，支持色盲模式。其原理是將基準色進行換色，避開色盲或色弱的不敏感區，換成其較容易感知的配色方案，來保證這部分用戶同樣能準確的了解路況。

UNO 卡牌，號稱只用顏色和數字就能和全世界的人一起玩。然而有人提出了質疑，因為色盲用戶無法準確的區分顏色。所以美泰公司今年重新設計並推出了UNO色盲特別版，採用ColorADD 標準（一個用圖像去識別顏色的設計系統），每個顏色的卡牌上都加上了被設定好的特定形狀，幫助色盲辨認顏色。

簡單介紹一下ColorADD標準，這是由葡萄牙的一個非公益組織創立，其對顏色設定了各自的代表圖形，幫助色盲辨認顏色，且能直觀的說明其色彩生成的邏輯。比如三原色紅、黃、藍分別由上三角形、斜線、下三角形來標識，紅+藍=紫，即上三角形+下三角形=上下三角形；紅+黃=橙，即上三角形+斜線=斜線上三角形，依此類推。

Two Dots，一款顏色消消樂遊戲，同樣支持色盲模式。通過在顏色上疊加圖形標識，使色盲人群無須依賴於顏色，而是通過識別圖形無障礙的玩遊戲。

無障礙設計思路

結合案例，在設計實施過程中如何進行實際操作，可以遵循以下幾個思路來尋找解決方案：

1、使用安全色譜。

「色彩理論實際上涵蓋了很多東西，但其本質是通過顏色的互補、對比和活力體現在設計中的相互作用。」--Thomas Cannon

好的配色除了美觀以外必須具備其實用性，而對於色盲用戶來說，那些丟失的顏色將讓他們迷茫不已，所以安全色譜對於色盲和非色盲人群都是易辨識的，它有著較高對比度，顏色名稱容易定義，且屏顯與印刷差別小。

例如，紅色由硃紅色代替；避免黃綠之間的顏色，因為和黃色、橙色無法區分；綠色由藍綠色代替，避免與紅色、棕色混淆……

除此之外，還可以參考以下建議：

使用單色；

冷暖色交替使用；

當使用兩種或以上冷色或暖色時，需要在亮度及飽和度上有明顯區別；

避免使用低飽和度和低明度的配色；

使用盡量少的顏色搭配；

在配色時，避免使用紅&綠、綠&棕、藍&紫、藍&綠等對於色盲用戶來說難以區分的配色組合。

2、顏色與圖形結合

在設計中應盡量避免單獨使用顏色來表示特定的意義，嘗試在顏色基礎上疊加形狀或紋理的形式。例如前面提到的UNO和Two Dots，例如下圖中圖表的應用。

在股票軟體中，除了用紅色和綠色表示漲和跌，對於色盲用戶來說，則是通過不同的柱狀圖形來區分，空心柱表示漲，實心術表示跌。

更好的思路是以圖形為主顏色為輔，顏色與圖形搭配，為用戶提供多維度的識別性和記憶點。

通常圖形的識別更利於用戶記憶，例如AE APP首頁的快速入口區，AE web首頁的分類導航，通過圖標與顏色的結合，將記憶點更多轉移至圖形記憶而非顏色記憶，能很好的解決此類問題。

3、 顏色與文字結合

使用文字予以輔助說明，當無法正確分辨顏色時通過文字說明幫助色盲用戶能順利完成操作。淘寶的商品詳情頁面中，為了讓這類用戶可以正常挑選商品，滑鼠在選項上移動會顯示對應SKU選項的文字說明，移動端則直接顯示文字選項。

AliExpress的商品詳情頁支持滑鼠移動顯示對應SKU選項的文字注釋，移動端則根據用戶的選擇同步顯示其對應的文字。

4、提供色盲模式

為用戶提供多種模式，在正常設計方案之外支持色盲模式，甚至是自定義模式。這樣我們在設計中可以恣意盡情的發揮而不用局限在安全色的範圍里畏手畏腳，又能通過色盲模式來保障這小部分群體同樣可以無障礙的使用我們的產品，保證TA們的體驗。

Trello，一款協同管理應用，支持設置色盲模式，通過在色塊上疊加不同的紋理使色盲用戶能快速區分不同的標籤。

5、利用工具檢驗

「工欲善其事，必先利其器。」合理的利用工具，檢驗設計方案可行性，可以達到事半功備的效果。

Coblis — Color Blindness Simulator

在線色盲模擬器，上傳效果圖後可以很方便的切換正常、三色視覺（色弱）、二色視覺（色盲）及單色視覺（全色盲）模式，模擬出不同色盲用戶眼中呈現的視圖。

Photoshop也支持通過校樣設置來切換色彩模式，主要支持紅色盲和綠色盲模式。

Colorblind Web Page Filter

輸入網址快速檢驗線上頁面在不同色盲用戶眼中的呈現。

利用移動設備檢驗

我們在設計移動端產品中，往往需要實時查看設計呈現在設備上的模擬效果，在這個過程中，利用移動設備自身的設置來查看色盲模式的視圖，能非常直觀的知道是否存在色盲用戶的色彩盲區，並靈活的調整設計方案。

具體操作方法如下：

iPhone設備，進入「設置-通用-輔助功能-顯示調節-色彩濾鏡」，打開色彩濾鏡開關，即可切換灰度、紅色盲、綠色盲、藍色盲等模式。

Android設備，進入「設置-無障礙-色彩校正」，打開色彩校正開關，即可以選擇綠色弱視、紅色弱視、藍色弱視模式。

最後，無障礙設計（barrierfreedesign）是聯合國組織在1974年提出的設計新主張，其強調在科學技術高度發展的現代社會，一切有關人類衣食住行的公共空間環境以及各類建築設施、設備的規劃設計，都必須充分考慮具有不同程度生理傷殘缺陷者和正常活動能力衰退者（如殘疾人、老年人）的使用需求。

無障礙設計首先在城市建築、交通、公共環境設施設備以及指示系統中得以體現，進而擴展到工作、生活和娛樂。

而互聯網產品的目標一直圍繞以用戶為中心，強調可用性、易用性以及情感化設計。作為設計師的我們，應該更好的發揮設計的價值推動商業化設計的發展與進步，為特殊人群多走一步，讓設計更感人。

參考文獻：

wikipedia

Color Universal Design (CUD)- How to make figures and presentations that are friendly to Colorblind people -

ColorADD

Designing For (and With) Color Blindness

A quick introduction to colorblindness

風靡 40 多年的紙牌遊戲 UNO，推出了特別色盲版

An Introduction to Color Theory for Web Designers

--------- 招聘分割線 ---------

國際 UED 是阿里唯一一支國際化設計團隊， 為集團的國際及國內業務提供設計支持。我們在杭州、深圳、北京、香港、美國、俄羅斯都有 Office，如果你對我們的工作感興趣歡迎加入我們。

目前團隊開放職位：

資深前端開發工程師

資深交互設計師

用戶研究專家

資深視覺設計師

Content Manager

簡歷投遞郵箱：mengya.xdh@taobao.com

如果你是無線開發工程師，我們這裡也同樣非常歡迎。來郵件吧！