close
企業趨勢市場營銷

13 個照顧色盲人士需要的 UX 設計方法

「不要只想到自己」是使用者體驗(UX)設計的金科玉律,不過有多少人會注意到色盲用戶的需要?其實只要參考內文 13 個小方法,除了可解決色盲用戶的困難,更可提升網頁整體的 UX ,人人受惠。

ux

 

色盲的種類有很多種,有的無法辨認某種顏色(如紅綠色盲),有的更是全色盲。假如網頁的設計過份依賴顏色來表達某些功能,對色盲人士而言是難以使用。縱使設計師牢記著「不要只想到自己」,但他們大多數不是色盲,往往忽略了色盲人士的需要。

外國網站 Smash Magazine 羅列了 13 種簡單方法改善網頁設計,讓色盲人士也可無障礙地使用網站。使用這些方法不但可照顧色盲人士的需要,更可改善網頁整體 UX,值得各位參考。

 

1. 文字可閱性

文字的大小和顏色應與背景有足夠對比,使文字易於閱讀,但怎樣才稱為充夠?無障礙網頁內容指引(WCAG)AA 級規定,一般字的對比比例要有4.5:1,較大的字(14 pt 粗體或 18 pt 以上)就要 3:1 。

數字是怎樣得來?只要利用網上的 Contrast checker 便可。

text-contrast-preview-opt

 

2. 於背景圖像上的文字

如果背景圖像上有文字,文字的對比度可能不夠。更重要的是,背景圖像不是純色背景,難以修改文字顏色來改善對比度。因此,較可取的做法是降低背景圖像的不透明度(opacity),從而增加對比,使文字易於閱讀。

text-overlay-bad-preview-opt

 

text-overlay-good-preview-opt

 

3. 顏色選擇器

在一些網上商店,貨物會有多種顏色以選擇器展示,但對於色盲人士而言,沒有文字描述使他們無法辨認顏色。以下是紅綠色盲人士瀏覽 Amazon 某網頁時的影像。雖然把滑鼠移至選擇器上會有文字顯示,但在手機就不能了。

amazon-preview-opt

 

相反 GAP 就解決上述問題。

gap-preview-opt

 

4. 照片描述

一些網站會用文字描述照片,但用字不夠仔細,對色盲人士而言仍易於混淆。例如「Leaf Jaspe」,葉可以是綠、黃、啡,如果改為「Gray Green Leaf Jaspe」就易懂得多。

superdry-preview-opt

 

5. 超連結

超連結不應依賴顏色來呈視。以下是全色盲的人瀏覽英國 GDS 網站的情況,可見連結根本無法辨認。他們使用電腦時要用滑逐一移動看看指標有沒有改變,在手機亦要逐個逐個按來試。

gds-screenshot-preview-opt

改用底線效果是否較好?

gds2-preview-opt

 

6. 顏色組合

由於色盲多數是某組顏色無法辨認,所以以下的用色組合應避免。

  • 紅和綠
  • 綠和啡
  • 藍和紫
  • 綠和藍
  • 淺綠和黃
  • 藍和灰
  • 綠和灰
  • 綠和黑

如果用了上述組合,在色盲人士的視角中就會變成右邊的樣子,所以請不要使用。

combinations-preview-opt

 

7. 表單輸入

表單輸入的預留文字(Placeholder)的對比度往往不足,如果沒有標籤(label)會影響色盲人士的理解(如以下蘋果註冊頁示)。apple-preview-opt

雖然以上我們建議加大文字對比,但在這情況反而不要,因為人們會把預留的文字和輸入的文字混淆。所以最好還是加入標籤。

label-preview-opt

8. 主按鈕

網站通常只會透過顏色來突出主按鈕(如下圖的 Continue),但照顧色盲人士需要,不妨配合大小、位置、粗幼度、對比、邊框、標誌等,像下圖的 Checkout。

argos-preview-opt

 

kidly-preview-opt

9. 警告訊息

紅色代表警示,綠色代表安全,所以我們會把這些顏色應用在各種訊息上。但對色盲人士而言紅和綠根本無法辨別,所以最好加入標誌或文字助他們分辨。

messaging-preview-opt

 

10. 必須輸入的提示

在標示「必須輸入的欄目」時,有些網站只會把字轉做紅色。對於色盲人士而言有沒有轉其實沒有分別。如要改善,最好在這些欄目標示 * ,或者用文字說明。

required-preview-opt

 

11. 圖表

我們會用顏色來標示圖表中不同的數值,但如果加入圖案和文字對色盲人士就更方便閱讀。第二和第三張圖就是不同程度的色盲人士看到的結果。

graphs_normal-preview-opt  graphs_protan-preview-opt
graphs_achrom-preview-opt

 

12. 放大

一些網站會利用 meta viewport 使訪客在手機無法放大網頁,這會造成問題。例如文字可能會太細,而且對比度不足,只有放大才可方便閱讀。

 

13. 相對字形大小

用戶可在瀏覽器增加文字大小來提升可閱度,但在某些瀏覽器,如果文字以是 px 等絕對大小來展示的話,該功能便無法使用。因此開發者而考慮用相對字形大小如 em。

Source : Smash Magazine

 

Tags :User Experienceux
Dennis Ma

The authorDennis Ma

為香港讀者分享各種 IT 新聞及趨勢,如企業動態、保安消息(勒索軟件、程式漏洞等)、未來科技(AR、VR、3D打印等。)、電子商貿;亦專門分享 SEO、網頁設計、社交平台推廣等心得。