[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思

前陣子有讀者在「Blogger 文章標題最佳化」留言表示："建議WFU大，文章的字顏色對比可以強一點，或標個線?這樣對色弱色盲人土比較友善，我完全找不到紅字在哪"。這才發現過去接觸網頁設計的主題時，很少碰到這一塊，因此沒想過要研究這部分的設計。

經查詢資料後，發現色盲、色弱者的比例，比想像中還多不少，站在 "營造友善的使用體驗"這樣的立場，的確應該改善網頁設計，讓這個族群閱讀文章時沒有障礙。

本篇會大致列出協助色盲使用者的網頁設計要點，同時也提出個人的設計構想。

(圖片出處: commons.wikimedia.org)

一、色盲比例

根據維基百科「色盲」的介紹頁面，色盲的程度與分類遠比想像還多，有最常見的紅綠色盲(例如臉書創辦人 Mark Zuckerberg)、藍黃色盲、以及(紅、藍、綠)色弱等。

色盲通常發生在男性，而女性的比例很低，把維基百科頁面各種色盲、色弱的男女比例相加，再除以二後，得到的比例大約是全部人口的 8% 左右，這個數量不可謂不小。




上圖是今日拜訪本站的訪客，所使用的瀏覽器比例。色盲使用者的人數超越了 Safari、IE 使用者，達到第 3 高的族群。雖然只是小樣本，不過這樣的訪客比例，是否該得到我們的重視呢？

二、友善的網頁設計要點

這篇「為色盲用戶提升網頁可用性的實用設計技巧」整理了不少值得參考的設計要點，將有助於色盲使用者閱覽網頁：

1. 圖片中使用文字時，需要增加對比，讓文字更容易閱讀，例如文字使用陰影。

2. 頁面標示顏色時，最好加註顏色的名稱，因為色盲者可能無法辨識。

3. 有圖片的產品描述，最好加上顏色標示。

4. 網頁的連結最好加上底線→ 這一點很重要，我們的網頁常常為了美觀，將連結的底線去除。雖然我們可以看出連結的文字顏色與一般文字不同，但無論使用何種顏色，都可能讓一部份的色盲、色弱者分辨不出來，因此最好的方法，就是為連結加上底線。

5. 網頁配色：這一點 WFU 不是專家，請直接參考原文來瞭解如何做。

6. 某些用顏色來強調的文字或說明，必須設計出一套機制，讓色盲使用者能理解。

三、是否需要做出妥協？

不可諱言的，部分針對色盲、色弱者的網頁設計，可能會讓頁面看起來不美觀；同時，網頁的配色是很主觀的，如果為了特殊族群而必須改變站長自己喜歡的色系，這也會很難割捨。

那麼對於這樣的網頁設計，有沒有辦法取得折衷點呢？我想這會是更需要思考的一件事。

想了很久，覺得用以下兩個例子來解釋，其實還滿貼切的。

1. 素食者

例如喜宴、聚會的場合，幾乎都有少數素食的賓客與會，當然不會為了顧全大局叫素食者吃葷、或是大家一起吃素。

處理的方法很簡單，將素食者湊成 1~2 桌供餐，或是不足一桌的話，請餐廳個別幫忙上素食套餐即可。


2. 同志

還有最近關注度很高的同性戀婚姻修法問題，根據維基百科「同性戀」的介紹頁面，同志的比例大約是 5%~10%，與色盲佔總人口比例相當。

由於現行的法律制度，無法保障或解決同性戀者結婚後，對於財產、醫療、能否收養等等的問題。那麼最不影響多數人、最節省社會成本的方式，就是針對同性戀者結婚後，會產生的問題，另外制訂相關的法律來解決。

有寫過程式的話應該就能理解，一個架構龐大的程式、或是別人寫好的程式，已經運作很長一段時間後，忽然想要針對其中多處(例如 5~10 處)進行修改，可能沒幾個工程師願意這麼做，因為改了之後會產生的 bug 可能修都修不完，也不知道何時會再冒出來。以工程師的立場可能寧願打掉重寫，或是主體不動、另外寫個補丁來達到修改的目的。

四、本站的設計規劃

因此我認為兩全其美的設計方式，就是針對不同的族群，規劃不同的功能或版面，就像是另外寫個小補丁的作法。

例如有的站長看網頁不需要大字，因此網頁的字體設定得很小；但對於某些族群，例如銀髮族、眼力比較差的讀者，就很需要看到大字。那麼最簡單的方法，就是參考「讓訪客能自行放大網頁文字，提升友善閱讀體驗」，在網頁提供可放大、縮小字體的按鈕，讓不同族群各取所需。

同樣的，為色盲、色弱的使用者，另外規劃一套版面 CSS 出來，在網頁明顯處提供按鈕來切換，就能解決這個問題了。

根據「二、友善的網頁設計要點」，本站的設計方針大致有：

• 原本文章區塊為黃底黑字，另一套 CSS 將會使用白底黑字，用來增加對比。
• 原本文章區塊的連結無底線，另一套 CSS 將會使用底線。
• 本站文章常用紅字標示重點，同時教學程式碼中包含了大量的紅、藍、綠字串，為了幫助辨識，另一套 CSS 會將常用顏色特別標示出來。

原理說明完畢後，下一篇會進行實作，並附上本站使用的程式碼範例，供讀者設計上的參考。

• 有助於色盲使用者的友善體驗 (2)實作範例