根據(jù)ColourBlindAwareness的數(shù)據(jù)，4.5%的用戶是色盲，如果你的網(wǎng)站受眾主要是男性，這個(gè)數(shù)據(jù)可能高達(dá)8%。網(wǎng)頁(yè)和UI在設(shè)計(jì)過(guò)程中，色盲人的實(shí)際情況很容易被設(shè)計(jì)師忽視，畢竟絕大多數(shù)設(shè)計(jì)師本身并非色盲。因此，如何在設(shè)計(jì)中兼顧色盲和色弱的用戶群？文本的可讀性為保證文本的可讀性，應(yīng)根據(jù)可訪問(wèn)原則選擇背景色、文本色和尺寸：“WCAG2.0AA文本對(duì)比度要求達(dá)到4.5:1，標(biāo)題文本達(dá)到3:1。(正文粗體14pt，標(biāo)題18pt)——WebAimcolorcontrastchecker”下面的案例顯示了哪些搭配可以通過(guò)，哪些不能達(dá)到標(biāo)準(zhǔn)(passes=通過(guò)，fails=不通過(guò))： 2.文字和圖片的疊加圖文混排，文字和圖片的疊加通常比較困難，因?yàn)樵谠S多情況下，要確保文本和圖片之間的明顯對(duì)比并不那么容易。 降低背景的透明度，或增加蒙板，使文本更容易識(shí)別。 降低背景的透明度，或增加蒙板，使文本更容易識(shí)別。 當(dāng)然，你也可以用更引人注目的顏色來(lái)改變文本，或者增加陰影來(lái)提高對(duì)比度。三、取色及說(shuō)明下面的截圖是亞馬遜購(gòu)買(mǎi)頁(yè)面中不同衣服的顏色分類(lèi)。對(duì)于紅綠盲用戶，他們可能會(huì)看到右邊的頁(yè)面。在這種情況下，沒(méi)有文本標(biāo)簽來(lái)區(qū)分不同的顏色，紅綠盲用戶無(wú)法區(qū)分差異。 然而，當(dāng)用戶的鼠標(biāo)懸掛在桌面瀏覽器的顏色上時(shí)，他們可以看到相應(yīng)的文本標(biāo)簽，但這種功能無(wú)法在移動(dòng)終端上實(shí)現(xiàn)。Gap將文本標(biāo)簽添加到每種顏色以解決這一困境： 事實(shí)上，這種設(shè)計(jì)對(duì)普通用戶來(lái)說(shuō)也非常實(shí)用和親密。例如，黑色和海軍藍(lán)，即使是普通用戶在屏幕上也不容易區(qū)分，添加標(biāo)簽可以更好地區(qū)分。4.在圖片上附上有用的描述下面的截圖是一個(gè)SuperDry該系列t恤被網(wǎng)站描述為L(zhǎng)eafJaspe也就是說(shuō)，它的配色靈感來(lái)自葉子，它的實(shí)際顏色包括綠色、黃色和棕色。 問(wèn)題來(lái)了，色盲用戶先分辨不出它的實(shí)際色彩，需要依靠描述來(lái)了解，但是描述中的Leaf和Jaspe斑駁的意思其實(shí)不夠直觀。因此，合理的描述應(yīng)該是GrayGreenLeafJaspe(灰綠色斑駁的葉子)。5、鏈接識(shí)別知名的網(wǎng)頁(yè)鏈接可以不用顏色來(lái)識(shí)別。打開(kāi)全色盲用戶(完全無(wú)法區(qū)分顏色)UKGDS(英國(guó)政府?dāng)?shù)字服務(wù))網(wǎng)站，然后他會(huì)看到下面的界面。在這種情況下，他們根本看不到網(wǎng)站上用顏色區(qū)分的鏈接。 為了找到鏈接，這些用戶需要用鼠標(biāo)光標(biāo)來(lái)探索道路，光標(biāo)沿著文本移動(dòng)，直到他們看到箭頭變成指針，他們才意識(shí)到這是一個(gè)可點(diǎn)擊的鏈接。如果是在移動(dòng)端，他們必須用手指一點(diǎn)一點(diǎn)地找到每個(gè)鏈接可能存在的地方。 圖標(biāo)描述的鏈接更容易找到，如果沒(méi)有圖標(biāo)，下劃線也會(huì)帶來(lái)很好的效果。6、配色在現(xiàn)實(shí)世界中，顏色往往是無(wú)法控制的：紅蘋(píng)果旁邊可能有一堆綠葉。但在網(wǎng)頁(yè)上，設(shè)計(jì)師通常有足夠的權(quán)限來(lái)控制這些問(wèn)題。盡量避免以下配色： ·綠色/紅色·綠色/棕色·藍(lán)色/紫色·綠色/藍(lán)色·淺綠色/黃色·藍(lán)色/灰色·綠色/灰色·綠色/黑色

網(wǎng)站建設(shè)公司" />