如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來(lái)源：優(yōu)設(shè)網(wǎng)

編者按：對(duì)于色盲癥患者而言，我們?cè)O(shè)計(jì)師精心搭配的色彩很可能毫無(wú)用處，甚至?xí)m得其反。該如何同時(shí)兼顧色盲患者的需求呢？今天這篇文章總結(jié)了5個(gè)巧妙的方法。想成為一個(gè)能解決問(wèn)題而不是視覺(jué)驅(qū)動(dòng)的設(shè)計(jì)師，這篇就不要放過(guò)了。

如果你的網(wǎng)站有色彩或?qū)Ρ榷壬系膯?wèn)題，可能會(huì)直接影響用戶的訪問(wèn)。如果是商業(yè)網(wǎng)站，那么可能會(huì)直接影響用戶的消費(fèi)。幸運(yùn)的是，這里有幾點(diǎn)可以幫助你避免這些問(wèn)題，提升網(wǎng)站的可用性，特別是對(duì)于色盲癥的患者。

什么是色盲呢？

色盲并不完全指的是看不見顏色或者全部看成灰色。通常指的是色弱，或者對(duì)顏色的分辨能力較差。人有三種視錐分別感受紅、藍(lán)、綠色，當(dāng)這其中一個(gè)視錐出問(wèn)題的時(shí)候，就會(huì)造成色盲。

圖中四個(gè)色輪 分別是 正常、紅色盲、綠色盲以及藍(lán)色盲 看到的色輪的表現(xiàn)。

最常見的兩種色盲是 綠色盲和紅色盲，男性患者要比女性多一些。其中綠色盲最常見，男性患病率為7%，女性則為0.5%。所以總共會(huì)有8%左右的人群會(huì)有色盲的表現(xiàn)，而這些是商業(yè)網(wǎng)站絕對(duì)不可能忽略的人群。

這里有5個(gè)簡(jiǎn)單的辦法，幫助你提升網(wǎng)站的色彩可用性。

方法一：使用清晰的色彩名稱

由于男性的色盲癥患者較多，所以如果你的網(wǎng)站需要用戶挑選顏色，特別是出售男性的服裝的時(shí)候，要著重考慮這個(gè)問(wèn)題。

對(duì)色盲癥患者來(lái)說(shuō)，他們可能很難理解衣服的真正顏色是什么。如果是實(shí)體店，他們可以問(wèn)問(wèn)自己的朋友；但是如果是網(wǎng)店，可能就會(huì)比較麻煩。

下圖是一個(gè)粉色的T恤，綠色盲看起來(lái)就是第二種樣子，而紅色盲看起來(lái)則是第三種，區(qū)別真的很大。

這個(gè)問(wèn)題解決起來(lái)其實(shí)也比較簡(jiǎn)單，就是文字標(biāo)注上清晰的顏色名稱。在使用顏色的名稱的時(shí)候，盡量不要用那些奇怪的名字，而是要用簡(jiǎn)單的“淺藍(lán)色”、“深綠色”等等。

如下圖的名稱標(biāo)注分別為“淺藍(lán)色斜紋T恤”和“粉紅斜紋T恤”，任何人都會(huì)知道這些顏色到底什么樣子。

方法二，使用的顏色標(biāo)簽

另一個(gè)常見的問(wèn)題是，有些網(wǎng)站會(huì)使用色塊作為篩選按鈕。如果只有色塊的話，那么對(duì)色盲癥來(lái)說(shuō)非常不友好。（參見第一個(gè)色輪圖）

有一些網(wǎng)站使用了純文字來(lái)表示顏色，這個(gè)方法雖然對(duì)色盲癥患者來(lái)說(shuō)比較友好，但是對(duì)于普通人來(lái)說(shuō)卻稍顯枯燥。

這個(gè)案例就會(huì)更好一些。以色塊作為普通的篩選按鈕，當(dāng)需要看到顏色名稱的時(shí)候，可以在鼠標(biāo)浮動(dòng)在上的時(shí)候顯示顏色標(biāo)簽。

最好的解決方法應(yīng)該是這樣的，同時(shí)顯示色塊和顏色標(biāo)簽。

方法三，避免使用顏色作為單一的提示

比如在設(shè)計(jì)表格的時(shí)候，不要這樣設(shè)計(jì)。（“紅色為必填項(xiàng)”）

而是要這樣：

另外的相似的例子是這樣的，右面的設(shè)計(jì)要比左面的好。

因?yàn)樵谏ぐY患者眼里，這個(gè)網(wǎng)頁(yè)會(huì)是這個(gè)樣子：

所以不要用簡(jiǎn)單的顏色作為指向性的文案描述。

方法四，不要用低對(duì)比度設(shè)計(jì)

適當(dāng)運(yùn)用對(duì)比度是形成視覺(jué)引導(dǎo)、建立視覺(jué)焦點(diǎn)的有效方法；合適的對(duì)比度更是將內(nèi)容和鏈接清晰的展現(xiàn)給用戶的唯一方法。

有一些設(shè)計(jì)師常常使用低對(duì)比度以達(dá)到“優(yōu)雅”的效果，但是對(duì)于可用性來(lái) 說(shuō)得不償失。根據(jù)網(wǎng)頁(yè)可讀指導(dǎo)原則（Web Content Accessibility Guidelines ，WCAG）將對(duì)比度分成了三個(gè)等級(jí)分別為A、AA、AAA。網(wǎng)頁(yè)中可讀文字至少要達(dá)到AA級(jí)別，即4.5：1，最佳的對(duì)比度要達(dá)到7：1。 下面這個(gè)案例中對(duì)比度僅僅為2.36:1, 正常人看上去都有些吃力，對(duì)于色盲患者來(lái)講更是噩夢(mèng)。

可能你并不清楚這些數(shù)字意味著什么，幸運(yùn)的是，已經(jīng)有很多工具幫助我們檢查對(duì)比度。比如這個(gè)Contrast Ratio checker。

通過(guò)修改文字或背景的顏色可以看到對(duì)比度的評(píng)分。

方法五，測(cè)試你的設(shè)計(jì)

有很多工具能夠模擬色盲的效果，利用這些工具可以幫助我們?cè)谠O(shè)計(jì)的時(shí)候避免出現(xiàn)問(wèn)題。

Colour Oracle  有windows和mac的版本，能夠全局模擬色盲效果。

你也可以利用Ohotoshop來(lái)檢查你的設(shè)計(jì)。通過(guò)  視圖-校樣設(shè)置-色盲  來(lái)查看色盲效果。

如果你喜歡Sketch的話，這個(gè)插件也能幫到你：Colour Contrast Analyser

當(dāng)然如果你的網(wǎng)站已經(jīng)上線，也可以通過(guò) WAVE 來(lái)檢查網(wǎng)頁(yè)的可及性問(wèn)題。

顏色可及性設(shè)計(jì)（Colour accessible design）

確保你的網(wǎng)站對(duì)所有人，包括色盲患者有良好的用戶體驗(yàn)。對(duì)以上的一些原則越熟悉，你就越可能避免一些錯(cuò)誤的設(shè)計(jì)，而這些可能對(duì)你的網(wǎng)站，尤其是商業(yè)網(wǎng)站的效益帶來(lái)極大的提升。

藍(lán)藍(lán)設(shè)計(jì)( m.payeee.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。