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

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