顏色，是個(gè)強(qiáng)有力的工具，特別是對(duì)于設(shè)計(jì)領(lǐng)域來(lái)說(shuō)。
它能夠傳遞情緒和感情，給設(shè)計(jì)增添存在感并提高品牌認(rèn)知度。但是我們經(jīng)常看到，存在色覺(jué)障礙的用戶會(huì)在五顏六色的界面上因?yàn)閷?dǎo)航而痛苦不堪?？紤]到這部分人，我經(jīng)常建議設(shè)計(jì)師要時(shí)時(shí)牢記無(wú)障礙性這個(gè)問(wèn)題，并在灰度格式下對(duì)網(wǎng)頁(yè)進(jìn)行測(cè)試，保證在顏色無(wú)法正常表現(xiàn)的情況下也能達(dá)到完善的實(shí)用性。
存在色覺(jué)缺失的用戶可能會(huì)難以分辨某些顏色之間的區(qū)別。最常見(jiàn)的色覺(jué)缺失就是紅綠色盲，這個(gè)人群看紅色和綠色感覺(jué)是一樣的。
下面是一張來(lái)自Color Matters的常見(jiàn)色盲表格圖示。
IMAGE:COLOR MATTERS
通過(guò)這張表格我們發(fā)現(xiàn)，要填寫這張?jiān)诰€表單，就必須靠考慮到存在這種色盲問(wèn)題的用戶能不能看到紅色的錯(cuò)誤信息。
再來(lái)看看Avis給我們的主頁(yè)預(yù)訂表單。我在沒(méi)有填寫任何東西的時(shí)候點(diǎn)擊了“繼續(xù)”按鈕，所顯示的“請(qǐng)輸入接取位置”信息是以純紅色文字顯示的。
IMAGE:AVIS
下面我們使用Colblindor這款色盲模擬器看看透過(guò)紅色色盲用戶的眼睛看待同一布局時(shí)的情形。
IMAGE:COLBLINDOR
我們發(fā)現(xiàn)紅色錯(cuò)誤信息的高亮對(duì)比效果沒(méi)有了，取而代之的是綠色的文字，這些文字和頁(yè)面上黑色的內(nèi)容幾乎完全融合，非常容易看不到。
再看一個(gè)來(lái)自Budget主頁(yè)預(yù)訂表單的示例，這里我點(diǎn)擊了“以客人身份繼續(xù)”的按鈕，收到了錯(cuò)誤信息。在這種情況下，紅色的錯(cuò)誤信息表現(xiàn)為紅色文案遮蓋住了輸入框的標(biāo)簽，同時(shí)實(shí)際輸入框外面有一圈紅色邊框。
IMAGE:BUDGET
下面我們使用色盲模擬器看看透過(guò)綠色色盲用戶的眼睛看是什么效果。
IMAGE:COLBLINDER
我們發(fā)現(xiàn)紅色看不見(jiàn)了，取而代之的是淡綠色。綠色的文案沒(méi)有足夠的對(duì)比效果，無(wú)法引起人的注意，同時(shí)輸入框的邊界也沒(méi)有了高亮效果。
結(jié)束語(yǔ)
不要單純依靠顏色來(lái)傳遞網(wǎng)上的信息。相反，要結(jié)合文字、形狀、網(wǎng)格和空間等多種設(shè)計(jì)基本要素，并給重要的元素分配較多的重量。
The Home Depot的賬戶注冊(cè)表單就在顏色的基礎(chǔ)上采用了形狀來(lái)指示問(wèn)題。其會(huì)在方形的框內(nèi)，錯(cuò)誤信息文案之前顯示感嘆號(hào)，同時(shí)會(huì)在相關(guān)輸入框旁邊顯示“x”來(lái)指示發(fā)生錯(cuò)誤的地方。
IMAGE:HOME DEPOT
通過(guò)Colblindor的模擬器看，我們也會(huì)發(fā)現(xiàn)紅色和綠色色調(diào)沒(méi)有了，但是用戶仍然可以通過(guò)形狀來(lái)分辨操作是否有問(wèn)題。
IMAGE:COLBLINDER
所以建議大家借助Colblindor對(duì)頁(yè)面進(jìn)行測(cè)試，或者簡(jiǎn)單地把設(shè)置改成灰色來(lái)確保實(shí)用性不會(huì)因顏色問(wèn)題而受到影響。
原文地址：mashable
