根據 Colour Blind Awareness 的資料，4.5% 的多使用者是色盲，如果您的網站受眾是以男性為主，那麼這個資料可能高達 8% 。在進行網頁和 UI 設計的過程中，色盲人群的實際狀況很容易被設計師所忽略，畢竟絕大多數的設計師本身並非色盲。所以，應當如何在設計上兼顧到色盲以及色弱的多使用者群體呢?
1 、文字的可讀性
為了確保文字的可讀性，應當根據可訪問原則來選擇背景的配色和文字的配色以及尺寸：
“WCAG 2.0 AA 要求正文文字的對比度達到 4.5:1，而標題文字達到 3:1 。 (正文粗體 14pt+，標題 18pt+)——WebAim color contrast checker ”
下面的案例展示了哪些搭配能透過，而哪些無法達到標準 (passes=透過，fails=不透過)：
2 、文字和圖片的疊加
圖文混排中，文字和圖片的疊加通常會相對更加棘手一些，因為在很多情況下，要保證文字和圖片之間有明顯的對比度並不是那麼容易。
降低背景的透明度，或者增加蒙板，讓文字更易於識別。
當然，您還可以給文字換個更醒目的色彩，或者增加陰影來提升對比度。
3 、取色與說明
下面的截圖是亞馬遜的購買頁面中不同衣服的顏色分類，對於紅綠色盲多使用者而言，他們看到頁面可能是右邊那樣的。在這種情況下，不同的色彩沒有文字標籤分辨，紅綠色盲多使用者無法分辨其中的差異。
不過，在桌面瀏覽器上，多使用者滑鼠懸停在色彩上面的時候，能夠看到相應的文字標籤，但是移動端上則無法實現這樣的功能。
Gap 則透過給每個色彩加文字標籤來解決這一困局：
其實這樣的設計對於普通多使用者而言也是非常實用而貼心的，比如黑色和海軍藍即使是普通多使用者在螢幕上並不是那麼好分辨的，加個標籤能更好的分辨。
4 、給圖片附上有用的描述
下面的截圖是一個 SuperDry 系列的 T 恤，網站對這款 T 恤描述為 “Leaf Jaspe”，也就是說它的配色靈感來自於樹葉，而它的實際色彩包含了綠色、黃色和棕色等。
問題來了，色盲多使用者先分辨不出它的實際色彩，需要依靠描述來了解，但是描述中的 Leaf 意為樹葉，而 Jaspe 則為斑駁的意思，實際上也不夠直觀。所以，合理的描述應當為 “Gray Green Leaf Jaspe”(灰綠色斑駁樹葉) 。
5 、連結識別
網頁連結知名是能夠不透過色彩就可以識別出來。如果一個全色盲多使用者 (完全無法分辨色彩) 開啟 UK GDS (英國政府數字服務) 網站，那麼他會看到下面的介面。這個情況下，網站中用色彩來區分的連結他們就全然看不到了。
為了找到連結，這些多使用者需要用滑鼠遊標來探路，遊標沿著文字移動，直到看到箭頭變成指標，他們才能意識到這是一個可點選的連結。如果是在移動端上，他們就不得不用手指一點一點嘗試，來查詢每一個連結可能存在的地方了。
加上圖示說明的連結更容易被發現，而如果沒有圖示的話，加上下劃線也可以帶來不錯的效果。
6 、配色
現實世界中，色彩往往是不可控的：紅色的蘋果旁邊，可能會有一堆綠色的樹葉。但是在網頁中則不然，設計師通常都有著足夠的許可權來控制好這些問題。下面的配色就應當儘量規避：
·綠色/紅色
·綠色/棕色
·藍色/紫色
·綠色/藍色
·淺綠色/黃色
·藍色/灰色
·綠色/灰色
·綠色/黑色