顏色可以很耀眼！可以充滿活力！它可以為圖像和網(wǎng)站頁(yè)面增添豐富性、色調(diào)和深度，讓您的訪問(wèn)者驚嘆不已，甚至令人驚嘆不已。

但是，如果您無(wú)法像世界其他地方那樣看到顏色怎么辦？它會(huì)使您的用戶體驗(yàn)變得不那么有趣，甚至導(dǎo)致您誤解消息和含義。

在全球范圍內(nèi)，每 200 名女性中就有 1 名女性和每 12 名男性中就有 1 名患有色盲，也稱為色覺(jué)缺陷 (CVD)。這意味著，在使用您的網(wǎng)站或應(yīng)用程序的每 100 名訪問(wèn)者中，多達(dá)八到九人可能會(huì)以與您計(jì)劃或預(yù)期完全不同的方式查看材料并與之互動(dòng)。

色盲人士在日常生活中面臨著許多視力正常的人根本沒(méi)有意識(shí)到的挑戰(zhàn)。即使是最簡(jiǎn)單的活動(dòng)，例如選擇和烹飪食物、園藝、運(yùn)動(dòng)、駕駛機(jī)動(dòng)車輛以及決定穿什么，也可能會(huì)帶來(lái)挑戰(zhàn)。色盲者還可能在接受教育、考試成績(jī)、職業(yè)選擇和職業(yè)發(fā)展方面遇到困難，這些都可能受到色盲的影響。

通過(guò)創(chuàng)建色盲人士可以訪問(wèn)的網(wǎng)頁(yè)設(shè)計(jì)，您和您的組織可以幫助使互聯(lián)網(wǎng)更具包容性。它就像理解并遵守色盲網(wǎng)頁(yè)設(shè)計(jì)的一些最佳實(shí)踐一樣簡(jiǎn)單，這樣設(shè)計(jì)師就可以創(chuàng)建一個(gè)對(duì)每個(gè)人來(lái)說(shuō)都愉快且可用的網(wǎng)站體驗(yàn)，無(wú)論他們辨別顏色的能力如何。

色盲用戶的網(wǎng)頁(yè)設(shè)計(jì)重要嗎？

是的?！睹绹?guó)殘疾人法案》(ADA) 控制與美國(guó)殘疾人網(wǎng)站可訪問(wèn)性相關(guān)的所有事宜。根據(jù) ADA 的規(guī)定，任何希望公眾使用其網(wǎng)站的個(gè)人或組織都必須使其易于殘疾人士訪問(wèn)和使用。違規(guī)行為的代價(jià)可能很高，首次違規(guī)最高可達(dá) 75,000 美元，后續(xù)所有問(wèn)題最高可達(dá) 150,000 美元。

此外，萬(wàn)維網(wǎng)聯(lián)盟 (W3C)（位于w3.org）是一個(gè)由成員組織組成的國(guó)際集團(tuán)，負(fù)責(zé)監(jiān)督商定協(xié)議和開(kāi)放標(biāo)準(zhǔn)原則的制定，已發(fā)布了 Web 內(nèi)容可訪問(wèn)性指南 2.1 (WCAG 2.1)，其中概述和定義了標(biāo)準(zhǔn)用于網(wǎng)站可訪問(wèn)性設(shè)計(jì)和開(kāi)發(fā)的各個(gè)方面。

色盲影響日常任務(wù)

大多數(shù)色盲用戶的視力與普通人群相當(dāng)。盡管如此，他們無(wú)法辨別藍(lán)光、紅光和綠光。女性比患者更有可能成為該缺陷的攜帶者，因?yàn)樵撊毕菔怯?X 染色體突變引起的。

色盲主要分為三種類型：

1. 紅/綠色盲是最常見(jiàn)的類型。這是當(dāng)人們混淆包含紅色或綠色作為整個(gè)色調(diào)的組成部分的所有顏色時(shí)。

紅色弱色盲患者對(duì)紅光不太敏感，而綠色盲患者對(duì)綠光不太敏感。例如，原色者會(huì)將藍(lán)色誤認(rèn)為紫色，因?yàn)樗麄儫o(wú)法區(qū)分紫色的紅色成分。

2. 藍(lán)/黃色色盲不太常見(jiàn)，使人無(wú)法區(qū)分藍(lán)色和綠色以及黃色和紅色。

3. 完全色盲，也稱為單色盲，非常罕見(jiàn)，但確實(shí)存在。這是人們只能看到黑白的地方。

如果您想了解不同類型的色盲如何影響您的視力/站點(diǎn)，請(qǐng)嘗試色盲模擬器?；蛘呤褂?Chrome 擴(kuò)展 Colorblindly 來(lái)查看任何網(wǎng)頁(yè)上的效果。

為色盲設(shè)計(jì)網(wǎng)頁(yè)

在考慮針對(duì)色盲的網(wǎng)頁(yè)設(shè)計(jì)時(shí)，請(qǐng)務(wù)必聘請(qǐng)?jiān)谠O(shè)計(jì)具有最大可訪問(wèn)性的網(wǎng)站方面擁有豐富經(jīng)驗(yàn)的專業(yè)團(tuán)隊(duì)。針對(duì)色盲的網(wǎng)頁(yè)設(shè)計(jì)可用性指南涉及用戶界面 (UI) 和用戶體驗(yàn) (UX) 的各個(gè)方面，因此必須獲取這些專業(yè)知識(shí)而不是重新發(fā)明輪子。

以下是在考慮網(wǎng)頁(yè)設(shè)計(jì)和色盲時(shí)需要評(píng)估的一些想法：

增加網(wǎng)站的顏色對(duì)比度

增加網(wǎng)站上顏色組合之間的對(duì)比度有助于提高色盲用戶的可見(jiàn)性和可讀性。

為此，盡量避免使用強(qiáng)度相似或色調(diào)接近的顏色。如果可能，在選擇文本和背景元素的顏色時(shí)至少使用 4:1 的對(duì)比度，以便任何用戶都可以清楚地看到它們。這將確保顏色不會(huì)成為網(wǎng)站理解或易讀性的主要因素。

避免在深色背景上使用淺色文本

一般來(lái)說(shuō)，在為色盲人士設(shè)計(jì)時(shí)，請(qǐng)?jiān)跍\色背景上使用深色或強(qiáng)烈、鮮艷的文本。通過(guò)這樣做，您將降低色盲者無(wú)法區(qū)分單詞和重要信息的風(fēng)險(xiǎn)。

此外，如果可能的話，嘗試盡可能多地利用其他設(shè)計(jì)元素，例如紋理、大小、形狀和流程，以便色盲觀眾可以輕松發(fā)現(xiàn)網(wǎng)站的關(guān)鍵部分或元素。

使用圖案和紋理

使用圖表和餅圖顯示數(shù)據(jù)時(shí)，顏色對(duì)比至關(guān)重要。如果您使用對(duì)比度較低的顏色，色盲觀眾可能會(huì)發(fā)現(xiàn)很難理解您的圖表。

以下是您應(yīng)該在其位置上執(zhí)行的操作：

• 通過(guò)使用圖案和紋理，讓用戶可以輕松區(qū)分不同的部分。

• 為了使各部分更容易理解，請(qǐng)為其添加文本標(biāo)簽。

使用彩色文本標(biāo)簽

想象一下想要購(gòu)買一件紅色 T 恤，但無(wú)法看出哪個(gè)樣品的顏色是正確的？

在許多網(wǎng)站（例如亞馬遜）上購(gòu)物時(shí)，您可能已經(jīng)看到顏色選擇是通過(guò)顏色或圖案的小圖標(biāo)完成的。但它們上方始終附有一行文本，該文本行在文本上表示確切的顏色。

使用圖標(biāo)和其他非顏色提示

視力正常的人通常依靠顏色來(lái)區(qū)分導(dǎo)航項(xiàng)和設(shè)計(jì)的其他元素。這就是為什么當(dāng)您為視力障礙者創(chuàng)建網(wǎng)站時(shí)，超越顏色的思考尤為重要，因?yàn)轭伾珶o(wú)法有效幫助他們區(qū)分物體或理解某些事物的含義。

嘗試使用圖標(biāo)、符號(hào)和其他非顏色提示在元素之間創(chuàng)建清晰的關(guān)系，以便所有用戶都能識(shí)別您的網(wǎng)頁(yè)的組織方式。

不要僅僅依靠顏色來(lái)傳達(dá)意義

為了確保色盲人士可以使用并享受您的網(wǎng)站，您應(yīng)該避免僅僅依靠顏色來(lái)傳達(dá)含義。避免使用不同顏色的文本來(lái)顯示重要性，或使用需要觀看者感知微妙色調(diào)的按鈕顏色。

相反，除了使用尺寸和紋理等非顏色提示之外，還應(yīng)使用清晰的符號(hào)和其他視覺(jué)元素進(jìn)行設(shè)計(jì)，以便所有用戶都能理解您試圖傳達(dá)的信息。

選擇調(diào)色板時(shí)選擇易于使用的顏色

為您的網(wǎng)站選擇調(diào)色板時(shí)，請(qǐng)務(wù)必考慮色盲人士的需求。使用具有高對(duì)比度和良好可見(jiàn)性的顏色，這樣即使一個(gè)人是色盲，他們?nèi)匀豢梢岳斫庑畔⒁约皩?duì)他們的期望。

例如，最好避免天藍(lán)色或檸檬綠等顏色，因?yàn)轭伾毕莸娜烁y察覺(jué)它們。為色盲人士設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可以從多種可用的調(diào)色板中進(jìn)行選擇，例如灰色、大地色調(diào)和寶石色調(diào)。

避免這些顏色組合：

• 綠-紅

• 綠，藍(lán)

• 綠色-黑色

• 綠色-棕色

• 綠色-灰色

• 淺綠色或石灰綠色 – 黃色

• 藍(lán)色-紫色

• 藍(lán)-灰

使用字符定義必填字段

如果您僅使用顏色來(lái)指示表單上的必填字段，色盲用戶可能會(huì)發(fā)現(xiàn)很難區(qū)分必填條目和可選條目。

相反，其他解決方案可能是：

• 使用星號(hào) (*) 來(lái)指示所需的字段。

• 以文本方式指示字段是必填還是可選。

• 刪除任何可選字段。

下劃線鏈接

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常使用字體粗細(xì)或顏色來(lái)指示鏈接。盡管患有綠色盲、紅色盲或藍(lán)色盲的人可能能夠區(qū)分錨文本和普通文本，但低對(duì)比度使其遠(yuǎn)非最佳。

單色將使人們無(wú)法區(qū)分文本和錨文本，因此他們必須在文本上徘徊以檢查光標(biāo)是否變成指針。

通過(guò)在網(wǎng)站頁(yè)面上的鏈接下劃線，色盲人士將能夠更輕松地瀏覽您的網(wǎng)站、查找他們正在尋找的信息或進(jìn)行購(gòu)買。

確保主按鈕彈出

設(shè)計(jì)師經(jīng)常使用顏色來(lái)突出顯示主要按鈕。這樣做的問(wèn)題是色盲用戶可能很難看清您使用的顏色。

嘗試以下想法：

• 可以增加主按鈕的大小，使其易于識(shí)別。

• 嘗試嘗試不同的位置或位置組合。

• 使主要按鈕和次要按鈕形成更強(qiáng)的對(duì)比。

如果您想?yún)^(qū)分主按鈕和輔助按鈕，請(qǐng)嘗試使用邊框、圖標(biāo)或字體粗細(xì)。

總結(jié)色盲網(wǎng)站設(shè)計(jì)過(guò)程

有了這些建議，您就可以在與設(shè)計(jì)師、開(kāi)發(fā)人員、數(shù)字營(yíng)銷專業(yè)人員和內(nèi)容創(chuàng)建者合作構(gòu)建無(wú)障礙網(wǎng)站時(shí)獲得成功的路線圖。使用這些示例，您的網(wǎng)站及其內(nèi)容對(duì)于所有類型和能力的用戶來(lái)說(shuō)都是可感知的、可操作的和可理解的，并且根據(jù) ADA 指南和 WCAG 2.1 也將被視為可訪問(wèn)。

如果您正在設(shè)計(jì)一個(gè)新網(wǎng)站或?qū)ΜF(xiàn)有網(wǎng)站進(jìn)行必要的改版，請(qǐng)務(wù)必與經(jīng)驗(yàn)豐富的網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)機(jī)構(gòu)討論色盲和網(wǎng)頁(yè)設(shè)計(jì)，他們對(duì)可訪問(wèn)性設(shè)計(jì)原則有透徹的了解。

Lounge Lizard 在網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)以及使用適合所有受眾的圖像和顏色的數(shù)字營(yíng)銷方面擁有 20 多年的經(jīng)驗(yàn)。這包括色盲者以及其他類型的殘疾人，這些都包含在 ADA 中，包括：

• 其他形式的視力障礙

• 聽(tīng)覺(jué)

• 認(rèn)知的

• 演講

• 身體的

• 神經(jīng)病學(xué)