通用設計 – 針對色盲色弱的設計要點

色盲又稱色覺辨認障礙,患者無法辨別顏色,而色弱則辨色能力低於正常。雖然色覺障礙不影響肢體活動,但它確實影響生活,甚至置患者於危險之中。產品設計通常只顧及主要、視力正常的使用者,我們如何在網頁或平面設計上運用通用設計,藉此同時照顧色盲色弱患者及健全人士的需要?

根據統計,全球約有 8% 男性及 0.5% 女性患有色盲和色弱,即每 12 位男士就有 1 位患者,普遍得人生漫漫總會遇上幾個。色覺障礙可分為紅綠色盲、黃藍色盲和全色盲(包括色弱),近九成的患者都屬於紅綠色盲,他們會將紅色和綠色看成褐色。我們日常多用紅色和綠色表達相反的意思,例如危險和安全,但對患者而言,單靠顏色判斷事物可以十分危險

無障礙設計及通用設計

隨著社會日益文明,為了讓殘疾人士*都享有一樣的權利和生活質素,全球開始提倡無障礙概念 (accessibility),而無障礙設計及通用設計也應運而生。雖然兩者在定義上有少許分別,但都是秉承為各人締造理想環境的設計原則。

* 殘疾並非只限永久性障礙、身體殘疾和視障,還包括情緒精神障礙、認知障礙、智力發展遲緩、學習困難等及暫時性的障礙。

無障礙設計 (accessible design):從無障礙 (accessibility) 一詞衍生,指顧及殘疾人士需要的設計。網頁的無障礙設計包括調整字體大小、顏色對比、輔助功能、螢幕報讀機的支援、鍵盤輸入、替代文字等等。

通用設計 (universal design):運用應用設計不但令殘疾人士受惠,還適用於不同人種、性別、年紀、社會階層、文化、國家、語言、財富、體型的人,是人人適用的設計原則。

現今的網絡產品需要顧及不同地區、語言文化,甚至是身體活動能力的使用者,因此通用設計愈來愈受到重視。雖然一般的產品都不要求設有方便視障人士的設計,但運用通用設計原則,便可以用同一份設計稿一石二鳥讓視障人士使用產品,讓健全及跨地區的使用者更快理解資訊,這不就是良好用戶介面設計 (UI design) 的指標嗎?

補充】無障礙相關的法規

各國政府為了保護殘疾人士的公民權利,逐漸規定公共服務須加入無障礙設計。美國國會早於 1990 年頒佈《美國殘疾人法案》(Americans with Disabilities Act,簡稱 ADA),規定公共機構的服務必須能夠讓殘疾人士流暢地使用,其後的修正案也追加對軟硬件、網站、影片等媒體的規範,因此若大學、銀行、網購平台或航空公司等公共網站無法達到指定的 WCAG* 標準,該機構便需要面對訴訟及繳納罰鍰,知名品牌如 Target、Domino 和 Amazon 也曾面對相關訴訟。2018 年,歐盟亦相繼頒佈 EU Web Accessibility Directive,將無障礙的法規擴展到歐盟成員國。

*WCAG (Web Content Accessibility Guidelines):由全球資訊網協會 (W3C) 資訊網可及性推動組織 (WAI) 制定之國際公認的無障礙網頁指引。

色盲色弱設計對策

如前文所言,通用設計適用於所有人,要是色盲色弱患者覺得介面合用,那麼它對視力正常和老年人而言就更加清晰。在設計網頁或印刷品時,可以留意以下幾點:

1. 使用高對比的配色

色盲色弱患者會混淆彩度相近的顏色,但通常比一般人更能夠察覺明度和飽和度的些微差異,因此配色不能倚賴顏色的彩度,明暗對比強烈才能令物件主次分明。如要為彩度選色,鑑於多數患者都是紅綠色盲,設計應避免使用正紅色和正綠色,以免患者視作同一顏色,可改選用偏黃的紅色及偏綠的藍色。

調整色彩配搭的步驟

  1. 設計先從黑白開始,不要被顏色的彩度影響
  2. 先把色彩空間由 RGB 轉為 HSL 或 HSB
  3. 首先調整最影響顏色對比度的明度(L 或 B 值)
  4. 然後加強色相或冷暖色對比(H 值)
  5. 色彩對比工具檢查主體和背景的對比度(對比度請參考下面表格
【誤】相鄰暖色,低明度對比
【正】對比色,高明度對比
明度對比於正常色覺及全色盲下的分別

採用 W3C 對比度標準的設計系統

W3C 的無障礙設計指引 Web Content Accessibility Guidelines (WCAG) 以明度及文字大小衡量圖文對比度,介面元件均在此限。通常介面設計達到 AA 級標準已經十分足夠,AAA 級則需要犧牲更多美感才能達標。調整文字對比度並不困難,但要讓整個設計系統 (design system) 所有元件達至 AA 級絕不容易。例如文字欄位和表格的淺色外框,色覺正常的人或許覺得是裝飾,但對視障患者而言那外框很重要。如要達到相關標準就需要協調外框、背景顏色和文字多種元素的對比度,你說容易不容易?

AA 級 (基本)AAA 級 (嚴格)
標準對比度(14pt 粗體或少於 18pt)不少於 4.5不少於 7
大型文字對比度(18pt 或以上)不少於 3不少於 4.5

2. 使用視障安全色版

除了透過檢查色彩的對比度,你亦可以使用色覺障礙人士都合用的安全色版。東京大學分子細胞生物學研究所針對色盲、色弱、綠內障和白內障等疾病研究出視障安全色版,分為螢幕、印刷及塗裝色版。它的原理是以橙紅色代替紅色、藍綠色代替綠色,令紅綠色盲患者更容易分辨顏色。除此之外,日本的非牟利機構 CUDO 更將色彩通用設計(簡稱 CUD)推廣至全世界。安全顏色不但能用在防災資料和路標上,還可以用於兒童玩具、教科書、電器及企業報告等日常用品,連紙牌遊戲 UNO 也有色覺障礙人士版本,體現通用設計的精神。

3. 加入顏色以外的視覺輔助

除了使用高對比的顏色組合,設計亦應該善用顏色以外的視覺輔助,例如改變線條、形狀和花紋幫助區分各種內容。在色塊間加入分隔線和外框也能增加對比,避免明度相近的顏色混在一起。

4. 加入 ALT 替代文字

WCAG 也提倡為所有非文字內容加入文字式提示。簡單而言,圖片須附有 alt 替代文字,Image Map 要另加文字式連結,以文字式內容取代文字式圖片等等。在必須用顏色傳達的情況下,如產品選色、在線狀態,除了標上色彩還需附文字描述或改變圖示形狀來表達。

5. 勿倚賴顏色對應的感覺

正常色覺的人對紅色很敏感,但紅綠色盲患者的眼中是不起眼的啡色,粉紅色會看成土黃色。對患者而言很多顏色看起來也差不多,也會出現變為另一顏色的情況,因此色彩心理學-色彩引起心理變化的理論並不適用於此。在做重要或限時的決策時,正常視力和視障人士也不能僅靠顏色作精準的判斷。

例如患者可能會將警示牌的紅色看成深啡色,這樣便失去「警示」的效用了,因此警示牌多設計成不常見的三角形。

三角形警告指示牌
使用不常見的三角形指示牌作視覺輔助

以前的交通燈只用顏色提示,色盲患者根本無法分辨「去」和「停」;現在加上表意的人像和動畫就形成「三重保障」,對視障和正常視力者都有幫助。

嚴格對應方案

以上建議為綜合參考資料所得,W3G 發佈的無障礙設計指引 WCAG 有更詳細的要點,主要針對網絡和數碼內容。指引分為三級,分別是最基本的 A 級,一般 AA 級及嚴格 AAA 級。其中有些嚴格級別內的指引也值得留意:

  • 文字不可左右對齊
  • 行寬不多於 80 個字符,中日韓 40 個字符
  • 段落行距不少於 1.5 倍
  • 避免使用容易引起癲癇症發作的內容,最多只能在 1 秒內閃燈 3 次
  • 良好的內容架構,轉為語音後文句仍通順

應用

嚴格遵守以上規則必定犧牲美感,要兩全其美也不是容易,但其實很多內容也不需特地使用無障礙設計,使用與否完全視乎需要。在公共設計的領域,不管規模大至醫院路標,小至座臺月曆,多從視障人士角度考慮也無妨,重要的公共設施更是不可或缺。具體例子可參考 Color Universal Design 分別應用於圖表、地圖、日曆和路線圖的精采範例。

參考資料

One thought on “通用設計 – 針對色盲色弱的設計要點

Comments are closed.