為顏色障礙者（色盲）設計，其實就是遵循以人為本的設計原則。顏色障礙者（色盲）是一群特殊的群體，他們對某一種或多種顏色有視覺障礙，但很多設計中卻沒有考慮到顏色障礙者（色盲）的需求和困難。通過閱讀這篇文章，了解設計應如何考慮顏色障礙（色盲）用戶體驗。

我們觀察顏色的方式是一樣的嗎？

請看上面這張圖，如果你看到了數字21，或者沒看到任何數字，那么你可能有某種顏色識別障礙（色盲）（如果你有全彩視力，你應該看到數字“74”）。

色盲色弱測試圖

據估計，每 12 名男性中有 1 名（8%）患有某種形式的色盲，而女性每 200 名中只有 1 名。在英國，這意味著有大約 270 萬人受影響，這是相當大的一部分人口，但我們在設計網站和用戶界面時經常遺忘他們。

在我們團隊（Si digital）所做的項目中，我們會考慮每個項目的用戶體驗和可訪問性。

我們使用各種工具和技巧來幫助我們理解視覺障礙，并使用這些知識讓我們的網站更加實用，而且考慮色盲用戶的感受使其不會沮喪。

什么是顏色識別障礙（色盲）？

顏色識別障礙（色盲）的類型很多，嚴重程度各不相同。

大眾普遍誤以為顏色識別障礙（色盲）的人只能看見黑色和白色。即使這可能是真的，單色性（也稱全色盲）是非常罕見的，預估每 3.3 萬人人中有1名受影響。這種嚴重的視覺障礙使人們看東西都呈灰色調。

要記住一個重要的因素，對于大多數顏色識別障礙（色盲）患者來說，區分不同顏色并不困難，真正會導致問題的是分辨出相似顏色的明暗程度之間的差異。

正常視力與單色盲、紅色盲、綠色盲

而更常見的情況是紅綠色識別障礙（色盲），分為兩組。

1. 患有紅色弱視（Protanomaly）的人對紅光的敏感度較低，紅色、橙色和黃色色調會趨向于綠色，并且看起來不那么飽和。
2. 患有綠色弱視（Deuteranomaly）的人對綠光的敏感度較低，并且很難區分藍色、黃色、紫色，以及紅色系、藍色系和綠色系。

野外的顏色

長期以來，顏色識別障礙（色盲）所帶來的困難不僅在網站設計中被忽略，而且在電視、電影，特別是電子游戲中也常常被忽略了。有很多用戶無法玩游戲，或者因為患有顏色識別障礙（色盲）的人無法辨認重要的UI元素而導致游戲難以繼續。

以游戲《巫師3》為例：

當切換成紅綠色盲視角的時候，地面上的紅色標記幾乎看不見了

這款游戲的特點，是能夠使用增強感官的功能來追蹤氣味、追蹤腳印和尋找線索。然而，游戲開發者選擇深紅色作為標記，所以有很多用戶抱怨他們看不清楚這些標記（或者根本看不到）。

簡單的顏色更改或更改顏色的選項，可能會讓游戲變得更加容易上手。

由于視覺障礙人口比例很高，顏色識別障礙（色盲）用戶是一個需要認真對待的問題。如果您的網頁或應用程序沒有經過特別的優化，您可能會失去大量用戶。

例如，如果用戶由于色彩沖突和缺乏對比而不能區分一系列的圖標，用戶就會感到沮喪并找其他網頁或應用服務來取代您的網頁。如果這成為每一個患顏色識別障礙（色盲）的潛在客戶的經歷，您將會失去 8% 的潛在銷售額——對于擁有1千萬英鎊收入的公司而言，該公司會損失 80 萬英鎊的巨額銷售額。

如何在設計時考慮顏色識別障礙者（色盲）

即使顏色識別障礙（色盲）會給使用者造成很大的困擾，但其實很容易克服。如果你意識到了這個問題，那么你就成功了一半。

1. 使用對比色

對比色的應用

即使是患有單色識別障礙（色盲）的人仍然擁有對比感——明暗之間的比例差異。

為確保您的網站使有視覺障礙的人更有可讀性的，您必須確保您的內容和背景形成鮮明對比。例如，白色背景上的黑色文本具有較高的對比度和可讀性，而白色背景上的黃色文本則對比度較低，即使是對有全彩視力的人來說也一樣幾乎不可讀。

2. 使用不同的明度而不是多種顏色

同一色彩不同明度的應用

單色配色方案（不要與全色盲、單色盲混淆）使用一種顏色的不同明度效果，好過使用多種不同顏色。這將有效地減少用戶與色相相關的挫敗感，也是在設計中體現色彩對比的好方法。

單色配色方案不一定是黑色和白色，而是使用不同明度的藍色，我們在完成可讀性的前提下，也實現了視覺上的愉悅感。

3. 在設計中親身體驗色盲

使用設計軟件切換不同類型的色盲模式

Adobe Photoshop 中的色盲模擬

很多免費工具可以模擬色盲的所處環境，讓您了解顏色識別障礙（色盲）的人將如何看待外部環境，以確保您的用戶界面按您的預期工作。Photoshop 有自己的（稍微隱藏起來的）校驗設置功能，只需進入查看>校驗設置，并且您可以選擇紅色盲和綠色盲兩種情況。完成測試后，只需要切換回監測 RGB 即可。

Sketch 中的顏色識別障礙者（色盲）模擬

不幸的是，Sketch 色彩測試沒有原生支持，但各種插件能也能讓您進行色彩校驗。

我們推薦 Color Oracle，這是一個免費插件，可以實時顯示具有常見色覺障礙的人看到的事物。

Color Oracle，圖片來源：http://colororacle.org/index.html

瀏覽器中的色盲模擬

我們用谷歌瀏覽器添加一個被稱為“I want to see like the colour blind”（我希望看到顏色識別障礙者（色盲）模式）的插件，這會讓您在實時網站或測試環境下模擬色盲。這對于色彩和對比度測試是一個便利的工具，因為它提供包含完整的多視覺模式，包括單顏色識別障礙者（色盲）等。

4. 仔細選擇色彩組合

不幸的是，作為設計師，我們在設計中使用的顏色并不總由我們自己決定，有時候我們受到品牌規范的限制。但在可能的情況下，明智的做法是在建立品牌之前選擇和測試你的主色和次色。

下面的圖表列出了您應該避免使用的色彩組合。

避免使用色彩組合圖

如果有疑問，請避免使用這些配色，去選擇簡單的黑色/白色，強色彩對比的配色方案。

5. 用紋理代替顏色

在設計圖形和圖表等內容時，可以考慮使用紋理或視覺圖案來幫助區分兩種顏色。

例如，下面的餅狀圖。

紅色盲用戶很可能由于顏色相似而難以區分不同區域。然而，如果我們添加一些簡單的紋理或圖案，圖表的可閱讀性會提高 100%。

添加紋理和圖案，可提高圖表閱讀性

6. 避免單獨使用顏色作為提示

在設計表單和復雜界面等元素時，不應僅使用顏色作為提示。

以下面的圖表為例，左邊的圖表僅使用顏色作為提示導致錯誤操作。全彩視力的人能看到郵箱字段已變成紅色，表示存在某種錯誤。而對于綠色識別障礙者（色盲）來說，正確字段的綠色和錯誤字段的紅色就無法區分。

解決此問題的最好的方法是使用某種圖標、符號或標簽去提示錯誤，就如同下圖所示。

是否使用符號作為提示標志

結論

在這學到的最重要的一堂課是：除非你確保顏色識別障礙者（色盲）能夠區分你所選擇的顏色，否則你不應使用單獨的顏色提示表示重要的東西。如果可以，使用圖標、文本、形狀、紋理或者其他視覺提示以及強對比色來向用戶傳遞信息。

有許多方法可以測試可訪問性，然而這些工具并不總是完全準確、最終看設計是否適合的最佳方法，是執行真正的用戶體驗測試。

你可能知道某人是顏色識別障礙者（色盲），為什么不讓他們來檢查你的設計呢？

原文作者：Jack Innes

原文地址：https://sidigital.co/blog/designing-for-colour-blindness

本文由 @三分設 翻譯發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議