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

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

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

色盲色弱測(cè)試圖

據(jù)估計(jì)，每 12 名男性中有 1 名（8%）患有某種形式的色盲，而女性每 200 名中只有 1 名。在英國，這意味著有大約 270 萬人受影響，這是相當(dāng)大的一部分人口，但我們?cè)谠O(shè)計(jì)網(wǎng)站和用戶界面時(shí)經(jīng)常遺忘他們。

在我們團(tuán)隊(duì)（Si digital）所做的項(xiàng)目中，我們會(huì)考慮每個(gè)項(xiàng)目的用戶體驗(yàn)和可訪問性。

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

什么是顏色識(shí)別障礙（色盲）？

顏色識(shí)別障礙（色盲）的類型很多，嚴(yán)重程度各不相同。

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

要記住一個(gè)重要的因素，對(duì)于大多數(shù)顏色識(shí)別障礙（色盲）患者來說，區(qū)分不同顏色并不困難，真正會(huì)導(dǎo)致問題的是分辨出相似顏色的明暗程度之間的差異。

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

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

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

野外的顏色

長(zhǎng)期以來，顏色識(shí)別障礙（色盲）所帶來的困難不僅在網(wǎng)站設(shè)計(jì)中被忽略，而且在電視、電影，特別是電子游戲中也常常被忽略了。有很多用戶無法玩游戲，或者因?yàn)榛加蓄伾R(shí)別障礙（色盲）的人無法辨認(rèn)重要的UI元素而導(dǎo)致游戲難以繼續(xù)。

以游戲《巫師3》為例：

當(dāng)切換成紅綠色盲視角的時(shí)候，地面上的紅色標(biāo)記幾乎看不見了

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

簡(jiǎn)單的顏色更改或更改顏色的選項(xiàng)，可能會(huì)讓游戲變得更加容易上手。

由于視覺障礙人口比例很高，顏色識(shí)別障礙（色盲）用戶是一個(gè)需要認(rèn)真對(duì)待的問題。如果您的網(wǎng)頁或應(yīng)用程序沒有經(jīng)過特別的優(yōu)化，您可能會(huì)失去大量用戶。

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

如何在設(shè)計(jì)時(shí)考慮顏色識(shí)別障礙者（色盲）

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

1. 使用對(duì)比色

對(duì)比色的應(yīng)用

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

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

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

同一色彩不同明度的應(yīng)用

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

單色配色方案不一定是黑色和白色，而是使用不同明度的藍(lán)色，我們?cè)谕瓿煽勺x性的前提下，也實(shí)現(xiàn)了視覺上的愉悅感。

3. 在設(shè)計(jì)中親身體驗(yàn)色盲

使用設(shè)計(jì)軟件切換不同類型的色盲模式

Adobe Photoshop 中的色盲模擬

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

Sketch 中的顏色識(shí)別障礙者（色盲）模擬

不幸的是，Sketch 色彩測(cè)試沒有原生支持，但各種插件能也能讓您進(jìn)行色彩校驗(yàn)。

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

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

瀏覽器中的色盲模擬

我們用谷歌瀏覽器添加一個(gè)被稱為“I want to see like the colour blind”（我希望看到顏色識(shí)別障礙者（色盲）模式）的插件，這會(huì)讓您在實(shí)時(shí)網(wǎng)站或測(cè)試環(huán)境下模擬色盲。這對(duì)于色彩和對(duì)比度測(cè)試是一個(gè)便利的工具，因?yàn)樗峁┌暾亩嘁曈X模式，包括單顏色識(shí)別障礙者（色盲）等。

4. 仔細(xì)選擇色彩組合

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

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

避免使用色彩組合圖

如果有疑問，請(qǐng)避免使用這些配色，去選擇簡(jiǎn)單的黑色/白色，強(qiáng)色彩對(duì)比的配色方案。

5. 用紋理代替顏色

在設(shè)計(jì)圖形和圖表等內(nèi)容時(shí)，可以考慮使用紋理或視覺圖案來幫助區(qū)分兩種顏色。

例如，下面的餅狀圖。

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

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

6. 避免單獨(dú)使用顏色作為提示

在設(shè)計(jì)表單和復(fù)雜界面等元素時(shí)，不應(yīng)僅使用顏色作為提示。

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

解決此問題的最好的方法是使用某種圖標(biāo)、符號(hào)或標(biāo)簽去提示錯(cuò)誤，就如同下圖所示。

是否使用符號(hào)作為提示標(biāo)志

結(jié)論

在這學(xué)到的最重要的一堂課是：除非你確保顏色識(shí)別障礙者（色盲）能夠區(qū)分你所選擇的顏色，否則你不應(yīng)使用單獨(dú)的顏色提示表示重要的東西。如果可以，使用圖標(biāo)、文本、形狀、紋理或者其他視覺提示以及強(qiáng)對(duì)比色來向用戶傳遞信息。

有許多方法可以測(cè)試可訪問性，然而這些工具并不總是完全準(zhǔn)確、最終看設(shè)計(jì)是否適合的最佳方法，是執(zhí)行真正的用戶體驗(yàn)測(cè)試。

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

原文作者：Jack Innes

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

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

題圖來自 Unsplash，基于 CC0 協(xié)議