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

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

什么是色盲？

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

色盲科學(xué)

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

常見類型的色盲

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

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

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

1. 使用常用的顏色名稱

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

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

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

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

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

2. 使用色板和標(biāo)簽的組合

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

這個(gè)問(wèn)題的另一種方法是列出過(guò)濾器中顏色的名稱。

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

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

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

設(shè)計(jì)表單時(shí)的常見做法是以不同的顏色標(biāo)記強(qiáng)制輸入字段。如果用戶嘗試提交沒(méi)有填寫的必填字段，輸入字段的邊框?qū)⒏臑榧t色，表示錯(cuò)誤。但是，我們必須知道不是所有的用戶都以同樣的方式來(lái)體驗(yàn)顏色。

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

下面是幾種表示形式的強(qiáng)制字段的方法

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

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

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

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

低對(duì)比度的網(wǎng)頁(yè)

WCAG 2.0級(jí)AA要求正常文本的對(duì)比度為4.5：1，大文本的對(duì)比度為3：1（14點(diǎn)和大于或大于18點(diǎn)或更大）?！猈ebAim顏色對(duì)比檢查器

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

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

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

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

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

結(jié)論

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

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

原文作者：CanvasFlip

譯者：SKYUI

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

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