如何為色盲用戶設計更易用UI界面?

色彩在UI設計中扮演著不可或缺的角色。如果操作得當,它將改善用戶體驗,影響購買決策,并反映品牌的聲音。

那么,您如何為色盲用戶設計有效、可訪問和美觀的界面呢?

盡管色盲中暗含的科學是相當復雜的,而解決它的要旨是色盲的人很難看清顏色或區(qū)分一些顏色??紤]到這一點,在本文中,我們將分享一些關于如何提高站點的可訪問性以及它為色盲人士提供的體驗的技巧。

數據世界中的色盲

根據研究,大約每12名男性中就有1名(每200名女性中就有1名)是色盲。雖然色盲的人和其他人一樣能看得很清楚,但他們不能完全分辨紅、綠或藍。還會有不同類型的色盲,其中紅綠色盲是最常見的。

紅綠色盲的人很難區(qū)分紅色和綠色。同樣的,對于紅色盲的人來說,所有的紅色看起來都很暗淡。

從設計的角度來看,這意味著僅依靠顏色來提高可讀性和可承受性將使你的網站難以為色盲用戶所用。

您可以使用Coblis色盲模擬器來查看您的站點對色盲用戶的體驗。

 

7種方法可以改善色盲用戶的顏色可訪問性

對于色盲用戶來說,提高色彩可及性的設計元素和技術通常被認為是很好的設計實踐。雖然你可能會認為如果你的網站設計為可訪問性,你的網站的審美吸引力可能會受損,但事實并非如此。

在這里,我們將看看一些方法,您可以設計一個更容易訪問的UI,使色盲用戶記住。

第一條:使用模式與紋理

顏色差異在數據可視化中非常重要,例如,圖形和餅圖。選擇對比度低的顏色會讓色盲用戶難以理解你的圖表。

以下是你應該做的:

使用模式和紋理,讓用戶更容易區(qū)分不同的片段。

將文本標簽添加到段中,使其更容易理解。

 

讓我們來看看一個色盲的tritanopia患者是如何看到藍綠色條形圖的而他們是如何看到同樣的條形圖的。

如果你給每個片段貼上標簽而不是使用模式,你會看到這樣的效果:

第二條:使用顏色和符號

您不應該僅僅依賴顏色來傳遞錯誤或通過UI傳遞信息。

讓我們看看Facebook的注冊表單。如果表單僅僅依靠顏色來讓用戶知道他們在某個特定領域犯了錯誤,那么對于紅盲(原生視)用戶來說,它可能是這樣的:

下面是Facebook的注冊表單,上面有一些符號和錯誤信息:

在表單中使用圖標和符號,讓用戶知道他們犯了錯誤,從而提高了可訪問性,并幫助他們更快地糾正錯誤。

 

第三條:使用文本標簽

使用顏色過濾器和色樣添加文本標簽可以提高色盲用戶的可訪問性。根據色盲的類型不同,如果沒有某種描述性文本,用戶可能很難區(qū)分不同顏色(或深淺)。

例如,如果沒有亞馬遜上的描述性文字標簽,色盲用戶就無法區(qū)分紅色襯衫和橙色或綠色襯衫。

向顏色過濾器中添加文本標簽也可以提高視力正常的人的可訪問性。例如,在顯示器上,白色、灰白色和淺灰色通常很難區(qū)分。

第四條:下劃線的鏈接

很多時候我們使用字體顏色或字體權重來表示鏈接。雖然對于有申異癥、精斜視或三斜視的人來說,區(qū)分固定文本和常規(guī)文本是可能的,但由于對比度低,這肯定不是理想的。

具有單色性的人根本無法區(qū)分文本和錨文本,他們必須將鼠標懸停在文本上,看看光標是否會變成指針。

因此,最好在文本鏈接中添加下劃線。這樣就很容易區(qū)分普通文本和錨文本。下面是Engadget網站上的一個例子:

第五條: 避免顏色組合

某些顏色組合并不適合色盲用戶,要么是因為它們的對比度低,要么是因為它們很難區(qū)分。

下面是一些你應該盡量避免在界面設計中使用的顏色組合:

綠紅

藍綠

綠棕

綠黑

灰綠

藍灰

熒綠和黃色

藍紫色

下面是一對綠紅色和藍紫色的顏色組合,對一個有色盲的用戶來說是什么樣的:

 

第六條:使主按鈕突出

很多時候,設計師依靠顏色來突出主按鈕。問題是你使用的顏色可能會讓色盲用戶難以察覺。

以下是你應該做的:

增加主按鈕的大小。

嘗試不同的布局組合。

增加主按鈕和輔助按鈕之間的對比度。

使用邊框、圖標或字體權重來區(qū)分主按鈕和輔助按鈕。

 

例如,改造用大小和顏色強調主要按鈕。

Firebox在右下角顯示主按鈕,在左下角顯示二級按鈕。

第七條:標記需要的表單字段

如果僅使用顏色在窗體上表示所需字段,色盲用戶可能難以區(qū)分必需字段和可選字段。

相反,你會:

用星號(*)標記需要的字段。

標簽字段與單詞必需或可選。

從窗體中刪除可選字段。

 

結論

為色盲用戶設計UI將幫助您改善網站的可訪問性,同時這也是為了視力正常的用戶使用做出改善。雖然說到網頁可訪問性,并沒有一種萬能的解決方案,但是這里有一些你應該記住的建議:

1,使用圖形和圖表中的圖案和紋理來顯示對比度。

2,使用顏色和符號來傳達錯誤消息。

3,向顏色過濾器和色板添加文本標簽。

4,下劃線鏈接區(qū)分常規(guī)文本和錨文本。

5,避免使用糟糕的顏色組合,如紅綠色和藍紫色。

6,使用大小、位置或字體權重使主按鈕突出。

7,用符號(如星號)或標記所需的表單字段。

 

 

原文地址:https://www.secretstache.com/blog/designing-for-color-blind-users/

每天更新,
全站高品質素材免費下載!