本文中，海淘科技提出13條主張來改進(jìn)色盲用戶的體會——這些對視覺正常的用戶同樣有利。
有很多品種的色盲，但終究都能分紅這幾類：無法明晰辨認(rèn)色彩、色彩稠濁、無法差異特定色彩。
這些疑問在特定環(huán)境中愈發(fā)嚴(yán)峻，比方閱覽網(wǎng)站。這包含低分辨率顯現(xiàn)器、差勁的光線、小移動端屏幕、遠(yuǎn)離大屏幕電視而坐。
只是依托色彩樹立可讀性和可見性，會讓網(wǎng)站難以運用，終究影響了閱覽和出售。
雖然下面這些主張并不全部，它們的確涵蓋了色盲用戶閱覽網(wǎng)站時遇到的首要疑問。
要保證文字簡單閱覽，它就應(yīng)當(dāng)遵從可讀性規(guī)范，結(jié)合字色、布景色和字號：
“WCAG 2.0的AA級規(guī)范懇求，一般字號的比照率要到達(dá)4.5:1，大字號的比照率要到達(dá)3:1(大字號是指14磅的加粗或加大文字，或許18磅及以上字號)”
——WebAim色彩比照查看器
下面列舉了一些色彩和字號組合，有的到達(dá)規(guī)范，有的沒有：
這表明了色彩和字號的組合構(gòu)成了如何的反差比照。(查看大圖)
布景圖上的文字處理起來很奇妙，由于圖像局部或整張圖都也許無法與文字構(gòu)成滿足的反差。
文字沒有蒙層，直接掩蓋在圖像上。(圖像來歷：Jay Wennington) (View large version)
下降布景透明度能夠增強反差，讓文字更簡單閱覽。
文字掩蓋在帶有蒙層的圖像上。(查看大圖)
或許，你能夠給文字挑選一個可靠的色彩，或許加上投影，別的任何契合品牌規(guī)范的辦法都行。
下圖展現(xiàn)了Amazon的色彩過濾器，能夠看到一般人與紅綠色盲(分不清赤色與綠色)的視覺效果。假如沒有描繪文字，就不也許從這么多選項中作出差異。
不帶標(biāo)簽的色彩過濾器，在紅綠色盲看來是徹底沒法用的。(查看大圖)
在用戶鼠標(biāo)懸停時，Amazon展現(xiàn)了描繪文字，但移動端上沒有這一操作。
鄙人圖中，Gap在每個色彩周圍加上了文字標(biāo)簽，疑問得以處理。
帶有標(biāo)簽的色彩挑選器，紅綠色盲運用起來很輕松。(查看大圖)
這剛好也對正常視覺的人有利。例如，黑色與藏藍(lán)在屏幕上很難差異。文字標(biāo)簽?zāi)茏屓嗣庥诓孪搿?
下圖展現(xiàn)了SuperDry網(wǎng)站上售賣的一件T恤。它的描繪是“樹葉紋路”，這太模棱兩可了，由于樹葉能夠有很多色彩(綠色、黃色、棕色等等)。
色盲難以了解這件SuperDry T恤是什么色彩。(查看大圖)
Jaspe(本來應(yīng)當(dāng)是“jaspé”)是指隨機的斑駁或紋路，所以應(yīng)當(dāng)加上這么的特別闡明：“灰綠色樹葉紋路”。
連接應(yīng)當(dāng)簡單被發(fā)現(xiàn)，不用依靠色彩。下圖模擬了全色色盲(看不到色彩)閱覽UK Government Digital Service (GDS)網(wǎng)站所見到的畫面。很多連接都難以發(fā)覺。例如你有沒有注意到“GDS team, User research”(標(biāo)題下方)是連接?
GDS博客在全色色盲眼里的姿態(tài)。(查看大圖)
要發(fā)現(xiàn)一個連接，用戶只能鼠標(biāo)懸停，等候指針成為一個手形。在移動端，他們只能點按文字，期望它觸發(fā)頁面懇求。
上面帶有圖標(biāo)的連接更簡單發(fā)覺。而那些沒有圖標(biāo)的，加一條下劃線是個好辦法，GDS在文章正文有些恰是這么做的：
帶下劃線的連接更簡單被全色色盲發(fā)覺。(查看大圖)
在實際國際，你無法操控色彩的組合排列：赤色的蘋果也許掉進(jìn)綠色的草叢里?？墒?，咱們能夠操控頁面規(guī)劃中運用的色彩。下面這些色彩組合應(yīng)當(dāng)盡量防止：
綠色/赤色
綠色/棕色
藍(lán)色/紫色
綠色/藍(lán)色
淺綠色/黃色
藍(lán)色/灰色
綠色/灰色
綠色/黑色
色盲眼里的色彩組合。(查看大圖)
沒有標(biāo)簽，只用框內(nèi)的默許文字提示，這是個疑問，由于默許文字一般缺少滿足的比照度。Apple的注冊表單就有這么的疑問，請看下圖：
Apple的注冊表單運用了不帶標(biāo)簽的文字提示。(查看大圖)
不主張增強比照度，由于那樣就難以差異默許提示和用戶輸入的文字。
最佳仍是運用標(biāo)簽——畢竟是最佳實習(xí)——比照要明顯，下圖中的Made.com恰是這么做的：
Made.com運用了比照度激烈的標(biāo)簽。(查看大圖)
一般狀況下，只有主按鈕運用色彩來體現(xiàn)，Argos在它的登錄頁面即是這么做的：
Argos的登錄界面依托色彩來著重主按鈕。(查看大圖)
本來應(yīng)當(dāng)思考經(jīng)過尺度、方位、粗細(xì)、比照度、邊框、圖標(biāo)和任何別的手法來輔佐——只要在品牌指南的領(lǐng)域內(nèi)。例如，Kidly就運用了尺度、色彩和圖標(biāo)來凸顯：
Kidly用了尺度、色彩和圖標(biāo)來著重主按鈕。(查看大圖)
成功和過錯的音訊一般各自選用綠色和赤色。大都色盲沒有全色色盲的煩惱，自然能夠把不一樣的信息與不一樣色彩聯(lián)系起來?？墒?，運用比方“成功”這么的前置案牘，或許用我喜愛的圖標(biāo)方式，就能更快更輕松地閱覽，就像下圖這么：
帶有前置案牘和圖標(biāo)的正告音訊。(查看大圖)
Denoting這種用色彩表明的必填項有疑問，由于有些人也許看不出差異。
Denoting的必填項用色彩表明。(查看大圖)
本來應(yīng)當(dāng)思考這些辦法：
給必填項加上星號
非常好的辦法，給必填項加上“必填”
假如也許的話，把一切選填項都去掉
色彩經(jīng)常用來差異圖表中不一樣的目標(biāo)。下圖顯現(xiàn)了不一樣視覺才干的人看到的姿態(tài)。右邊的圖表對色盲做了優(yōu)化。
正常視覺者眼里的圖表(查看大圖)
紅綠色盲眼里的圖表(查看大圖)
全色色盲眼里的圖表(查看大圖)
運用紋路，并且盡也許加上每個目標(biāo)的文字，能讓圖表更易了解。假如文字不合適——一般是小尺度餅狀圖的狀況——用一個字母就滿足了。
閱覽器有一項易用功用，讓人根據(jù)需求盡也許擴大頁面。這點能提高易讀性，在移動設(shè)備上特別有協(xié)助。
意外的是，Viewport Meta標(biāo)簽?zāi)軌蚪每s放，這也是個疑問。比方，關(guān)于色彩比照度而言，字號也許過小了——擴大則能有用增大字號，讓文字更易閱覽。所以不要禁用網(wǎng)站的縮放。
和前一點類似，閱覽器供給了擴大字號的功用(并不是擴大全部頁面)，也是為了提高可讀性?？墒?，假如字號被指定為絕對單位時，例如像素，有些閱覽器會禁用這個功用。應(yīng)當(dāng)運用相對字號單位，例如em，保證一切閱覽器都能供給這個功用。
有很多東西能協(xié)助你為色盲群體規(guī)劃：
Check My Colours：假如你有現(xiàn)成的網(wǎng)站，能夠輸入URL取得反應(yīng)，通知你哪里需求改進(jìn)。
WebAim的色彩比照度查看器：供給兩種色彩，看它們是不是契合易用性規(guī)范。
I Want To See Like The ColorBlind：在Chrome中對頁面使用色盲形式濾鏡。
Color Oracle：Windows、Mac和Linux平臺的一款色盲模擬器，展現(xiàn)多見的視覺妨礙人士看到的畫面。
本文中的主張并不全部，它們并非要使用到每個場合中?？墒?，它們的確涵蓋了色盲用戶閱覽網(wǎng)站時遇到的首要疑問。
更重要的是要消化這些準(zhǔn)則，這么才干將它們?nèi)谌氲侥愕囊?guī)劃中。終究，網(wǎng)站設(shè)計頁面并不是只是為了好看——而是要易于每個人運用，包含色盲人士。
