如何為色盲用戶設(shè)計網(wǎng)站？本文作者與大家分享了5點小技巧。

色盲影響世界7%的人口。在瀏覽網(wǎng)頁時，這種情況讓色盲用戶無法了解不斷涌入的視頻、圖像和圖表。

什么是色盲？

色盲不并意味著人們根本看不到任何顏色，或人們看到的一切都是灰色。它實際上是降低了人們辨別顏色的能力。

色盲科學(xué)

視維細胞是人眼中負責感知顏色的一種感光細胞。視維細胞有三種類型——視維細胞分別負責檢測光譜中的紅色，藍色和綠色波長。當這些細胞有缺陷或完全不存在時，就會出現(xiàn)色覺問題。通常情況下，這些病癥是從父母身上遺傳，但也可以通過外傷，長時間接觸紫外線，隨著年齡的自然變性，糖尿病等因素的影響獲得。

常見類型的色盲

兩種最常見的色盲類型，綠色盲和紅色盲是性別相關(guān)的特征，在男性中比女性更常見。綠色盲是最常見的，7％發(fā)生在男性中，只有0.5％的女性。色盲占整個人口的8％，這是巨大的且不能忽視的。

作為設(shè)計師，我們的責任是確保我們的設(shè)計為更廣泛的受眾提供色彩的可訪問性和用戶友好性。

如何為色盲用戶設(shè)計網(wǎng)站

1. 使用常用的顏色名稱

對于有色覺缺陷的人來說，最令人討厭的經(jīng)歷之一就是與產(chǎn)品顏色不相關(guān)的顏色。

在這種情況下，說明書中提到的顏色名稱常常有幫助。 但是，如果所提到的顏色是“黑紫色”、“淡紅色”、“橄欖色”，這些詞有多少人了解呢？

實際上，在幾個電子商務(wù)應(yīng)用程序中我找到了這些顏色的名稱。

通過對產(chǎn)品的描述，明確說明顏色名稱，可以讓色盲用戶更容易做出決定。

話雖如此，好的網(wǎng)站和應(yīng)用程序盡可能的普遍地保持顏色描述?！皽\粉色”或“深藍色”襯衫是描述產(chǎn)品顏色的更好方法。

2. 使用色板和標簽的組合

另一個常見的問題是濾色鏡未標記！以下是一個眾所周知的電子商務(wù)網(wǎng)站的示例，其中包含了為標記的彩色濾鏡。另一方面，我也反映了一個有紅色弱視問題的用戶體驗網(wǎng)站的方式。

這個問題的另一種方法是列出過濾器中顏色的名稱。

盡管這似乎是一個好主意，但重要的是要記住，不是所有訪問該網(wǎng)站/應(yīng)用程序的人都是同一類別。對于具有正常視力的用戶，當他們看到過濾器中的顏色時，這是一個很好的體驗。當客戶只想盡可能快速順利地查看搜索結(jié)果時，去除色板可能會減慢選擇顏色的相互作用。

最佳解決方案包括色板和常用顏色標簽的組合。WarbyParker網(wǎng)站的眼鏡就是一個很好的例子。

3. 避免在顏色的基礎(chǔ)上傳達信息

設(shè)計表單時的常見做法是以不同的顏色標記強制輸入字段。如果用戶嘗試提交沒有填寫的必填字段，輸入字段的邊框?qū)⒏臑榧t色，表示錯誤。但是，我們必須知道不是所有的用戶都以同樣的方式來體驗顏色。

因此，在這種情況下顯示一個錯誤符號，或者有一個支持錯誤調(diào)用的標簽是非常重要的。

下面是幾種表示形式的強制字段的方法

• 將所需字段標記為星號。
• 更好的是，標記必填字段，標簽為“必需”。
• 盡可能地刪除可選字段。

不僅僅是表單，提醒消息也是。我們往往傾向于將成功和失敗的消息分別顯示為綠色和紅色。但使用諸如“成功”之類的前綴文本或圖標可以快速輕松地閱讀，如下所示：

4. 低對比度的設(shè)計正在困擾網(wǎng)絡(luò)

低對比度的文本可能是時尚的，但它也是難以辨認且不可發(fā)現(xiàn)的，不僅是對顏色有偏差的用戶，對于正常的視力用戶而言都是不可接近的。相反，我們應(yīng)該考慮更多可用的替代品。

低對比度的網(wǎng)頁

WCAG 2.0級AA要求正常文本的對比度為4.5：1，大文本的對比度為3：1（14點和大于或大于18點或更大）。——WebAim顏色對比檢查器

在低對比度項目中使用粗體文本增加可讀性，避免使用非常薄的字體。阻止用戶使用鼠標突出顯示頁面元素或更改默認高亮行為，不要使用任何JavaScript或CSS技術(shù)。許多視障人士利用突出顯示作為增加對比度和輔助視覺焦點的快速技巧。

5. 讓色盲用戶體驗?zāi)愕脑O(shè)計

這是真的，如果你沒有色覺缺陷，很難想象它是怎樣開起來像色盲。這就是為我們自己構(gòu)建內(nèi)部工具的原因——CanvasFlip colourblind simulator。幾個星期后，我們?yōu)槿蛟O(shè)計師發(fā)布了它。這個想法是彌合設(shè)計師與色盲用戶的經(jīng)驗之間的差距。

這是值得你檢查自己的設(shè)計，抓住任何潛在的問題，并在設(shè)計開發(fā)之前進行最后檢查。

嘗試工具——CanvasFlip colourblind simulator模擬器

結(jié)論

實際上很容易讓色盲用戶訪問我們的網(wǎng)站。我們只需要有意識地努力去思考和遵守指導(dǎo)方針。使用色盲模擬（colorblindness simulator?）器來幫助決定頁面上的顏色如何影響整體體驗通常會有所幫助。

原文地址：https://uxplanet.org/designing-ecommerce-for-colourblind-users-1ffd648c9f91

原文作者：CanvasFlip

譯者：SKYUI

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 攝圖網(wǎng)，基于 CC0 協(xié)議