網(wǎng)站建設提升色盲用戶(hù)的體驗發(fā)布者：本站     時(shí)間：2022-05-09 11:05:01

色盲是什么？
有許多種類(lèi)的色盲，但最終都能分成這幾類(lèi)：無(wú)法清晰辨認顏色、色彩混雜、無(wú)法區分特定顏色。

這些問(wèn)題在特定環(huán)境中愈發(fā)嚴重，比如瀏覽網(wǎng)站。這包括低分辨率顯示器、糟糕的光線(xiàn)、小移動(dòng)端屏幕、遠離大屏幕電視而坐。

僅僅依靠色彩建立可讀性和可見(jiàn)性，會(huì )讓網(wǎng)站難以使用，最終影響了閱讀和銷(xiāo)售。

盡管下面這些建議并不全面，它們確實(shí)涵蓋了色盲用戶(hù)瀏覽網(wǎng)站時(shí)遇到的主要問(wèn)題。

1. 文字可讀性
要確保文字容易閱讀，它就應該遵循可讀性規范，結合字色、背景色和字號：

“WCAG 2.0的AA級標準要求，普通字號的對比率要達到4.5:1，大字號的對比率要達到3:1（大字號是指14磅的加粗或加大文字，或者18磅及以上字號）”
——WebAim色彩對比檢查器

下面列舉了一些顏色和字號組合，有的達到標準，有的沒(méi)有：

提升色盲用戶(hù)的體驗

這表明了顏色和字號的組合形成了怎樣的反差對比。(查看大圖)

2. 背景圖上的文字
背景圖上的文字處理起來(lái)很微妙，因為圖片局部或整張圖都可能無(wú)法與文字形成足夠的反差。

提升色盲用戶(hù)的體驗

文字沒(méi)有蒙層，直接覆蓋在圖片上。(圖片來(lái)源：Jay Wennington) (View large version)

降低背景透明度能夠增強反差，讓文字更容易閱讀。

提升色盲用戶(hù)的體驗

文字覆蓋在帶有蒙層的圖片上。(查看大圖)

或者，你可以給文字選擇一個(gè)可靠的顏色，或者加上投影，其他任何符合品牌規范的方法都行。

3. 顏色過(guò)濾器、選擇器和色盤(pán)
下圖展示了Amazon的顏色過(guò)濾器，可以看到普通人與紅綠色盲（分不清紅色與綠色）的視覺(jué)效果。如果沒(méi)有描述文字，就不可能從這么多選項中作出區分。

提升色盲用戶(hù)的體驗

不帶標簽的顏色過(guò)濾器，在紅綠色盲看來(lái)是完全沒(méi)法用的。(查看大圖)

在用戶(hù)鼠標懸停時(shí)，Amazon展示了描述文字，但移動(dòng)端上沒(méi)有這一操作。

在下圖中，Gap在每個(gè)色彩旁邊加上了文字標簽，問(wèn)題得以解決。

提升色盲用戶(hù)的體驗

帶有標簽的色彩選擇器，紅綠色盲使用起來(lái)很輕松。(查看大圖)

這剛好也對正常視覺(jué)的人有益。例如，黑色與藏藍在屏幕上很難區分。文字標簽能讓人免于猜測。

4. 缺乏有效描述的照片
下圖展示了SuperDry網(wǎng)站上售賣(mài)的一件T恤。它的描述是“樹(shù)葉紋理”，這太模棱兩可了，因為樹(shù)葉可以有許多顏色（綠色、黃色、棕色等等）。

提升色盲用戶(hù)的體驗

色盲難以了解這件SuperDry T恤是什么顏色。(查看大圖)

Jaspe（其實(shí)應該是“jaspé”）是指隨機的斑點(diǎn)或紋理，所以應該加上這樣的特殊說(shuō)明：“灰綠色樹(shù)葉紋理”。

5. 鏈接的辨識度
鏈接應該容易被發(fā)現，不必依賴(lài)顏色。下圖模擬了全色色盲（看不到顏色）瀏覽UK Government Digital Service (GDS)網(wǎng)站所見(jiàn)到的畫(huà)面。許多鏈接都難以察覺(jué)。例如你有沒(méi)有注意到“GDS team, User research”（標題下方）是鏈接？

提升色盲用戶(hù)的體驗

GDS博客在全色色盲眼中的樣子。(查看大圖)

要發(fā)現一個(gè)鏈接，用戶(hù)只能鼠標懸停，等待指針變成一個(gè)手形。在移動(dòng)端，他們只能點(diǎn)按文字，希望它觸發(fā)頁(yè)面請求。

上面帶有圖標的鏈接更容易察覺(jué)。而那些沒(méi)有圖標的，加一條下劃線(xiàn)是個(gè)好方法，GDS在文章正文部分正是這么做的：

提升色盲用戶(hù)的體驗

帶下劃線(xiàn)的鏈接更容易被全色色盲察覺(jué)。(查看大圖)

6. 色彩組合
在現實(shí)世界，你無(wú)法控制色彩的組合排列：紅色的蘋(píng)果可能掉進(jìn)綠色的草叢里。但是，我們可以控制網(wǎng)頁(yè)設計中使用的顏色。下面這些色彩組合應當盡量避免：

綠色/紅色
綠色/棕色
藍色/紫色
綠色/藍色
淺綠色/黃色
藍色/灰色
綠色/灰色
綠色/黑色
提升色盲用戶(hù)的體驗

色盲眼中的色彩組合。(查看大圖)

7. 表單的默認文字
沒(méi)有標簽，只用框內的默認文字提示，這是個(gè)問(wèn)題，因為默認文字通常缺乏足夠的對比度。Apple的注冊表單就有這樣的問(wèn)題，請看下圖：

提升色盲用戶(hù)的體驗

Apple的注冊表單使用了不帶標簽的文字提示。(查看大圖)

不建議增強對比度，因為那樣就難以區分默認提示和用戶(hù)輸入的文字。

最好還是使用標簽——畢竟是最佳實(shí)踐——對比要鮮明，下圖中的Made.com正是這么做的：

提升色盲用戶(hù)的體驗

Made.com使用了對比度強烈的標簽。(查看大圖)

8. 主按鈕
通常情況下，只有主按鈕使用顏色來(lái)表現，Argos在它的登錄頁(yè)面就是這么做的：

提升色盲用戶(hù)的體驗

Argos的登錄界面依靠顏色來(lái)強調主按鈕。(查看大圖)

其實(shí)應該考慮通過(guò)尺寸、位置、粗細、對比度、邊框、圖標和任何其他手段來(lái)輔助——只要在品牌指南的范疇內。例如，Kidly就運用了尺寸、顏色和圖標來(lái)凸顯：

提升色盲用戶(hù)的體驗

Kidly用了尺寸、顏色和圖標來(lái)強調主按鈕。(查看大圖)

9. 警告消息
成功和錯誤的消息通常各自選用綠色和紅色。多數色盲沒(méi)有全色色盲的煩惱，自然能夠把不同的信息與不同顏色聯(lián)系起來(lái)。但是，使用比如“成功”這樣的前置文案，或者用我喜歡的圖標形式，就能更快更輕松地閱讀，就像下圖這樣：

提升色盲用戶(hù)的體驗

帶有前置文案和圖標的警告消息。(查看大圖)

10. 表單必填項
Denoting這種用顏色表示的必填項有問(wèn)題，因為有些人可能看不出區別。

提升色盲用戶(hù)的體驗

Denoting的必填項用顏色表示。(查看大圖)

其實(shí)應該考慮這些方法：

給必填項加上星號
更好的方法，給必填項加上“必填”
如果可能的話(huà)，把所有選填項都去掉
11. 圖表
顏色經(jīng)常用來(lái)區分圖表中不同的指標。下圖顯示了不同視覺(jué)能力的人看到的樣子。右邊的圖表對色盲做了優(yōu)化。

提升色盲用戶(hù)的體驗

正常視覺(jué)者眼中的圖表(查看大圖)

提升色盲用戶(hù)的體驗

紅綠色盲眼中的圖表(查看大圖)

提升色盲用戶(hù)的體驗

全色色盲眼中的圖表(查看大圖)

使用紋理，并且盡可能加上每個(gè)指標的文字，能讓圖表更易理解。如果文字不合適——通常是小尺寸餅狀圖的情況——用一個(gè)字母就足夠了。

12. 縮放
瀏覽器有一項易用功能，讓人根據需要盡可能放大頁(yè)面。這點(diǎn)能提升易讀性，在移動(dòng)設備上尤其有幫助。

不幸的是，Viewport Meta標簽可以禁用縮放，這也是個(gè)問(wèn)題。比如，對于色彩對比度而言，字號可能過(guò)小了——放大則能有效增大字號，讓文字更易閱讀。所以不要禁用網(wǎng)站的縮放。

13. 相對字號
和前一點(diǎn)類(lèi)似，瀏覽器提供了放大字號的功能（并不是放大整個(gè)頁(yè)面），也是為了提升可讀性。但是，如果字號被指定為絕對單位時(shí)，例如像素，有些瀏覽器會(huì )禁用這個(gè)功能。應該使用相對字號單位，例如em，確保所有瀏覽器都能提供這個(gè)功能。

工具
有許多工具能幫助你為色盲群體設計：

Check My Colours：如果你有現成的網(wǎng)站，可以輸入URL獲得反饋，告訴你哪里需要改善。
WebAim的色彩對比度檢查器：提供兩種顏色，看它們是否符合易用性規范。
I Want To See Like The ColorBlind：在Chrome中對網(wǎng)頁(yè)應用色盲模式濾鏡。
Color Oracle：Windows、Mac和Linux平臺的一款色盲模擬器，展示常見(jiàn)的視覺(jué)障礙人士看到的畫(huà)面。