Zi 字媒體

如何為色盲用戶設計網站？本文作者與大家分享了5點小技巧。色盲影響世界7%的人口。在瀏覽網頁時，這種情況讓色盲用戶無法了解不斷湧入的視頻、圖像和圖表。什麼是色盲？色盲不並意味著人們根本看不到任何顏色，或人們看到的一切都是灰色。它實際上是降低了人們辨別顏色的能力。色盲科學視維細胞是人眼中負責感知顏色的一種感光細胞。視維細胞有三種類型——視維細胞分別負責檢測光譜中的紅色，藍色和綠色波長。當這些細胞有缺陷或完全不存在時，就會出現色覺問題。通常情況下，這些病症是從父母身上遺傳，但也可以通過外傷，長時間接觸紫外線，隨著年齡的自然變性，糖尿病等因素的影響獲得。常見類型的色盲兩種最常見的色盲類型，綠色盲和紅色盲是性別相關的特徵，在男性中比女性更常見。綠色盲是最常見的，7％發生在男性中，只有0.5％的女性。色盲占整個人口的8％，這是巨大的且不能忽視的。作為設計師，我們的責任是確保我們的設計為更廣泛的受眾提供色彩的可訪問性和用戶友好性。如何為色盲用戶設計網站1. 使用常用的顏色名稱對於有色覺缺陷的人來說，最令人討厭的經歷之一就是與產品顏色不相關的顏色。在這種情況下，說明書中提到的顏色名稱常常有幫助。 但是，如果所提到的顏色是「黑紫色」、「淡紅色」、「橄欖色」，這些詞有多少人了解呢？實際上，在幾個電子商務應用程序中我找到了這些顏色的名稱。通過對產品的描述，明確說明顏色名稱，可以讓色盲用戶更容易做出決定。話雖如此，好的網站和應用程序儘可能的普遍地保持顏色描述。「淺粉色」或「深藍色」襯衫是描述產品顏色的更好方法。2. 使用色板和標籤的組合另一個常見的問題是濾色鏡未標記！以下是一個眾所周知的電子商務網站的示例，其中包含了為標記的彩色濾鏡。另一方面，我也反映了一個有紅色弱視問題的用戶體驗網站的方式。這個問題的另一種方法是列出過濾器中顏色的名稱。儘管這似乎是一個好主意，但重要的是要記住，不是所有訪問該網站/應用程序的人都是同一類別。對於具有正常視力的用戶，當他們看到過濾器中的顏色時，這是一個很好的體驗。當客戶只想儘可能快速順利地查看搜索結果時，去除色板可能會減慢選擇顏色的相互作用。最佳解決方案包括色板和常用顏色標籤的組合。WarbyParker網站的眼鏡就是一個很好的例子。3. 避免在顏色的基礎上傳達信息設計表單時的常見做法是以不同的顏色標記強制輸入欄位。如果用戶嘗試提交沒有填寫的必填欄位，輸入欄位的邊框將更改為紅色，表示錯誤。但是，我們必須知道不是所有的用戶都以同樣的方式來體驗顏色。因此，在這種情況下顯示一個錯誤符號，或者有一個支持錯誤調用的標籤是非常重要的。下面是幾種表示形式的強制欄位的方法將所需欄位標記為星號。更好的是，標記必填欄位，標籤為「必需」。儘可能地刪除可選欄位。不僅僅是表單，提醒消息也是。我們往往傾向於將成功和失敗的消息分別顯示為綠色和紅色。但使用諸如「成功」之類的前綴文本或圖標可以快速輕鬆地閱讀，如下所示：4. 低對比度的設計正在困擾網路低對比度的文本可能是時尚的，但它也是難以辨認且不可發現的，不僅是對顏色有偏差的用戶，對於正常的視力用戶而言都是不可接近的。相反，我們應該考慮更多可用的替代品。低對比度的網頁WCAG 2.0級AA要求正常文本的對比度為4.5：1，大文本的對比度為3：1（14點和大於或大於18點或更大）。——WebAim顏色對比檢查器在低對比度項目中使用粗體文本增加可讀性，避免使用非常薄的字體。阻止用戶使用滑鼠突出顯示頁面元素或更改默認高亮行為，不要使用任何JavaScript或CSS技術。許多視障人士利用突出顯示作為增加對比度和輔助視覺焦點的快速技巧。5. 讓色盲用戶體驗你的設計這是真的，如果你沒有色覺缺陷，很難想象它是怎樣開起來像色盲。這就是為我們自己構建內部工具的原因——CanvasFlip colourblind simulator。幾個星期後，我們為全球設計師發布了它。這個想法是彌合設計師與色盲用戶的經驗之間的差距。這是值得你檢查自己的設計，抓住任何潛在的問題，並在設計開發之前進行最後檢查。嘗試工具——CanvasFlip colourblind simulator模擬器結論實際上很容易讓色盲用戶訪問我們的網站。我們只需要有意識地努力去思考和遵守指導方針。使用色盲模擬（colorblindness simulator ）器來幫助決定頁面上的顏色如何影響整體體驗通常會有所幫助。 譯者：SKYUI本文由 @SKYUI 翻譯發佈於人人都是產品經理。未經許可，禁止轉載。題圖來自 攝圖網，基於 CC0 協議