色盲用戶的 UI 設計

色盲者佔人口的很大一部分——確切地說，大約每 12 名男性中就有 1 人，每 200 名女性中就有 1 人。 然而，色盲用戶是 UI 設計中經常被忽視的受眾。

許多人將色盲誤認為是黑白，雖然這是一種類型，但也有較少見和不太極端的版本。

大多數人都是三原色的，這意味著他們將顏色視為三種顏色的組合：綠色、紅色和藍色。 不同類型的色盲或色覺缺陷（CVD）來自無法清楚地感知這些顏色中的一種或多種。 最常見的 CVD 類型是紅綠色盲，很難區分紅色和綠色，以及紅色盲，紅色顯得暗淡。

我們相信每個人都應該擁有公平和平等的互聯網訪問權限，因此 UI 設計師在設計時必須考慮到色盲用戶。 美國殘疾人法案 (ADA) 甚至要求某些組織符合 WCAG 2.0 AA 級指南。

使您的網站符合 ADA 標準並不難，但這確實意味著要考慮顏色的可訪問性。 除了法律後果之外，為色盲用戶設計對於您提供的用戶體驗至關重要。

為什麼針對色盲進行設計很重要

顏色理論在 UI 設計中扮演著重要角色，因為顏色能夠影響用戶的購買決定、情緒反應和整體用戶體驗。 想想選擇正確的品牌顏色對企業來說有多重要。 現在想像一下，由於您選擇的顏色，超過 8% 的人無法閱讀您的徽標或網站。 這是很多失去的機會。

由於色盲用戶無法區分某些顏色，因此設計師不能僅依靠顏色來獲得設計的可讀性或情感影響。 當您使用顏色時，您需要考慮用戶如何與之交互並創建一個吸引目標受眾的交互式設計 - 包括色盲成員。 設計師的工作是同情用戶的痛點，以便他們能夠預防和解決它們。

如今，有像 Visolve 這樣的工具可以針對某些類型的色盲調整計算機顯示，但並不是所有的色盲人都使用這些工具——甚至不是所有的色盲人都知道他們是色盲。

請務必注意，您的網站並不是唯一考慮顏色可訪問性的地方。 甚至您的社交媒體也可供盲人和視障人士使用。

要知道的顏色術語

在我們為色盲用戶介紹 UI 設計最佳實踐之前，最好為非設計專家複習色彩的基礎知識。 選擇配色方案時需要考慮四個主要組成部分：

色調：這是“顏色”的同義詞，由顏色的光譜波長決定。

飽和度：也稱為色度，這是一種顏色的強度或純度，由存在的灰色量決定。 灰色越少，顏色越亮。

亮度：亮度取決於添加到顏色中的白色或黑色的量，分別產生色調和陰影。

溫度：這是您感知顏色的溫暖或涼爽程度。 計算機顯示器會影響顏色的感知溫度。

如何為色盲用戶設計

為色盲設計並不意味著讓你的產品不那麼有吸引力。 它僅僅意味著在設計過程中遵循某些最佳實踐。 從長遠來看，實施良好的 UX 和 UI 設計原則只會提高您網站的可用性。

不要只用顏色來定義

在為色盲用戶設計時，您不能完全依賴顏色來傳達任何信息。

這樣做是數據可視化中的一個常見錯誤，因為圖形、圖表和地圖經常採用顏色編碼。 通過顏色編碼顯示可用預約時段或可用音樂會座位的預訂表格也很常見。 其他示例包括通過用顏色概述它們或用顏色指示錯誤來表示必需或遺漏的表單字段。

您應該遠離以彩色文本和圖像來傳達關鍵信息，或者至少以其他可訪問的方式提供該信息。

了解對比度和顏色選擇

對於色盲用戶來說，顏色之間的對比往往比顏色本身更重要。 關注對比度對設計師來說是有益的，因為不同類型的色盲使得僅僅避免特定顏色效率低下。 要提高色盲友好調色板中的對比度，請調亮淺色並調暗深色。

以下是提高設計知名度的其他一些方法：

• 強調前景色和背景色之間的區別
• 不要在色輪上選擇相鄰的色調，除非亮度差異很大
• 避免使用亮度相似的顏色，無論色調或飽和度如何
• 在使用中增加色調的飽和度

考慮到這一點，對於不同類型的色盲用戶來說，仍然存在可能更具挑戰性的顏色組合。 當對比度不顯著時，您的色盲友好調色板應該遠離這些顏色組合：

• 紅色和綠色
• 綠色和藍色
• 綠色和棕色
• 綠色和灰色
• 綠色和黑色
• 藍色和灰色
• 藍色和紫色
• 黃色和淺綠色

實現模式和紋理

在不單獨依賴調色板的情況下為色盲用戶更新視覺設計的一種方法是使用圖案和紋理。 這在顏色通常有助於區分信息的情況下效果很好，例如在圖形或圖表中。 添加圖案或紋理元素將有助於元素脫穎而出。

使用符號和標記一切

清晰的標籤是指導任何用戶完成客戶旅程的最佳實踐，包括色盲用戶。 標籤可以幫助區分通常用顏色傳達的信息。 這適用於數據可視化，例如圖表，或用於在網頁上引導用戶。 問問自己用戶是否可以在沒有您提供的顏色提示的情況下找到自己的方式。

從電子商務的角度來看，您還應該用清晰的描述性信息標記您的產品。 不要依靠產品照片來講述整個故事； 標記產品的顏色。

重新考慮您的 CTA 按鈕

號召性用語 (CTA) 是交互式設計不可或缺的一部分。 如果用戶找不到或不理解它，他們將不會在旅程中取得進展，並且您將無法實現目標。 您需要引起對您的 CTA 的注意，許多設計師依靠顏色來做到這一點。

良好的 UI 設計實現了顏色，但也為 CTA 按鈕使用了以下一種或多種其他出色技術：

• 尺寸
• 放置
• 強烈的對比
• 加權邊框
• 加權字體
• 符號圖標
• 懸停效果

這些技術適用於色盲和非色盲用戶，您可以將它們用於您想要引起注意的其他頁面元素。

在這些鏈接下劃線

如果您閱讀任何博客（包括此博客），您會注意到鏈接被突出顯示以通知用戶他們的存在。 強調鏈接的最常見方法是使用顏色。 為此，請使用藍色，因為大多數有色覺缺陷的人都能看到它。

它適用於全色盲或單色盲的用戶，儘管色盲的形式較為罕見，但強調顏色是不夠的。 對於這些人，彩色鏈接顯示為灰色，與其他文本無法區分。 您可以通過在錨文本下劃線來快速解決此問題。

考慮極簡主義

極簡主義遠非新鮮事物。 幾十年來，美學一直在流行，貫穿建築、藝術、室內裝飾，當然還有設計。

而現在，極簡主義在顏色可及性方面發揮了作用，因為顏色越少，混淆的可能性就越小。 它在風格上也很吸引人，而且不那麼分散注意力，使其成為所有觀眾的可靠選擇。

您不需要遵守極簡設計即可訪問，但這是一種可行的方法。

使用色盲模擬器

隨著設計社區致力於提供可訪問的用戶體驗，出現了許多出色的工具來提供幫助。 例如，色盲模擬器允許設計師以色盲用戶的方式查看他們的設計。 一個這樣的模擬器，Oracle，可用於 Mac、Windows 和 Linux。 使用色盲模擬器在整個設計過程中測試您的工作，並了解用戶如何與您的選擇進行交互。

在開始階段決定您的調色板時，我們建議使用顏色選擇器工具，根據 AA 指南評估您的選擇。 這個對比度檢查器可以告訴你你的對比度，這個易於使用的顏色生成器會建議效果更好的顏色組合。

使您的網站易於訪問

針對色盲進行設計可確保您的網站為您的所有受眾提供可以瀏覽和享受的用戶體驗。 對他們來說，這意味著他們可以信賴的品牌； 對您來說，這意味著成功的轉換。 根據您公司的規模，這也可能意味著遵守法律。 無論如何，這是建立一個公平和平等的在線環境的一部分。

顏色可訪問性只是建立一個受歡迎的網站的一個要素。 請務必查看我們的指南，讓聾人和 HOH 社區可以訪問您的內容。