設計師最熟悉的顏色，在某些人眼中可能是灰霧。

根據統計，全球約有 8% 的男性及 0.5% 的女性患有不同程度的色覺障礙。這表示平均每 12 位男性，就有 1 位無法準確分辨紅與綠。這並非少數現象，而是一個龐大的使用者群體。在他們眼中，「安全綠」與「警示紅」幾乎沒有分別，這不僅妨礙理解資訊，在某些情況下甚至有安全隱患。

編按：2025 年 10 月更新

1. 色覺障礙的類型
2. 無障礙設計與通用設計的差異
3. 色盲色弱的設計對策
4. 設計系統：讓無障礙成為系統的一部份
5. 設計是為了所有人的眼睛

色覺障礙的類型

色覺障礙主要分為三大類：

1. 紅綠色盲：最常見的類型，約佔患者總數的 90%
2. 黃藍色盲：較罕見
3. 全色盲（包含嚴重色弱）：僅能辨別明暗，缺乏色彩感知

日常設計常以紅、綠代表「危險」與「安全」等對立概念，但對於免覺障礙者者來說，僅依賴顏色傳達訊息極易造成混淆，甚至危險。

無障礙設計與通用設計的差異

為確保所有人享有平等的權利與生活質素，全球正積極推廣無障礙概念，衍生出無障礙設計與通用設計兩大核心概念：

• 無障礙設計 (Accessible Design)
  專注於消除殘疾人士*的使用障礙，確保他們能使用數碼服務。
  *殘疾包括永久性和暫時性障礙，涵蓋身體、視覺、情緒、精神、認知、智力發展和學習等方面。
• 通用設計 (Universal Design)
  創造不分性別、年齡、文化和能力差異，所有人都能「自然使用」且「不被標籤化」的產品。

簡單來說，「無障礙」確保使用者能用，「通用」則讓他們用得體面、不被標籤化。

色盲色弱的設計對策

當代 UI 介面日益華麗，但最常犯的錯誤是：太倚賴顏色傳遞訊息。

例如紅色代表錯誤、綠色代表正確、黃色代表警告。我們應重新定義「可感知的差異」，而非僅追求「美感上的對比」。

若色盲色弱患者能輕鬆使用介面，視力正常和老年人的使用體驗也會更佳。設計網頁或印刷品時，可以留意以下幾點：

1. 使用高對比度配色

色覺障礙患者對彩色不敏感，但對明度與飽和度的差異極其敏銳。

• 配色應明暗對比強烈，以利區分物體
• 避免純色，以「偏黃的紅」取代正紅，以「偏綠的藍」取代正綠

調整色彩搭配

1. 從黑白稿開始設計，確保灰階下的對比度清晰
2. 調整 HSL 模式下的明度（L 值），增強亮度對比
3. 加強色相或冷暖色對比（H 值）
4. 使用色彩對比工具檢查主體和背景的對比度，達到至少 WCAG 2.2 AA 等級

對比度	AA 級	AAA 級
一般文字（14pt 粗體或少於 18pt）	≥4.5:1	≥7:1
粗體或大文字（18pt 或以上）	≥3:1	≥4.5:1

💡 設計系統 (Design System) 應將對比度納入組件規範，而非僅作視覺建議。

2. 採用「視覺安全色」

日本東京大學研發的視覺安全色版能廣泛應用於螢幕、印刷及塗裝，讓色覺障礙者可區分配色，例如：

• 用橙紅取代正紅
• 用藍綠取代正綠

日本非牟利機構 CUDO 推廣的「色彩通用設計（Color Universal Design，CUD）」的安全色彩概念，已落實於防災資料、路標、兒童玩具、教科書、家用電器、企業報告，甚至紙牌遊戲 UNO 中，充份體現通用設計理念精神。

3. 加入顏色以外的視覺提示

顏色應作為輔助，不是唯一的資訊來源。結合形狀與語意來承載資訊，才是真正的可用性：

• 形狀與樣式：利用不同的形狀（如 ✔️、✖️）或線條（虛線與實線）
• 圖示：在文字旁加相應的圖示
• 文字標籤：不只是紅色、綠色的狀態圓點，同時也加入文字標籤（成功、失敗）

4. 提供替代文字與標示

無論是數據圖表還是商品選色按鈕，都應為色彩元素提供替代文字描述 (alt)：

• 為所有圖片加入 alt 屬性
• 用文字內容代替「文字圖片」

在需要使用顏色傳達的情況時，如選擇商品顏色或顯示在線狀態，除了顏色圓點，也可以加入文字描述或改變圖示形狀來傳達訊息。

5. 不依賴「顏色帶來的感覺」

紅色「警告」、藍色「冷靜」、綠色「安心」等色彩心理學假設，在色盲使用者身上未必成立。例如，警示牌除了是紅色，也採用不常見的三角形形狀，以增強警示效果。

現代的交通燈號，除了顏色，還加入表意人像和動畫，形成「三重保障」，對視障和正常視力者都有幫助。

設計系統：讓無障礙成為系統的一部份

當可及性 (accessibility) 成為 DesignOps 的日常檢核，而非「善意修正」，設計文化才算是真正落地：

• 將對比度、文字大小、鍵盤操作可行性納入 Design Token
• 設計決策歸檔：為何採用此配色、可讀性指標
• 在可用性測試中模擬不同的視障情況

設計是為了所有人的眼睛

當設計能照顧到最不方便的人，通常也會讓所有人都感到更便利。無障礙並非「增加功能」，而是「減去障礙」。讓產品從「對誰都好看」進化到「對誰都好用」，這正是通用設計的核心價值。

參考資料

• カラーユニバーサルデザイン推奨配色セット－東京大学分子細胞生物学研究所
• CUDO – Color Universal Design Organization
• W3C Web Content Accessibilities Guidelines (WCAG) 2.0
• Designing For, and As, a Color-Blind Person－Webdesign Tuts+