設計師最熟悉的顏色，也可能是某些使用者眼中的灰霧。

根據統計，全球約有 8% 的男性及 0.5% 的女性有某程度的色覺障礙。換句話說，平均每 12 位男性中就有 1 位無法準確分辨紅與綠。

這不是少數現象，而是一個龐大的使用者群體。

在他們眼中，「安全綠」與「警示紅」沒甚麼分別。這不僅妨礙理解資訊，在某些情況下甚至有安全隱患。

編按：2025 年 10 月更新

色覺障礙的類型

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

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. 加入顏色以外的視覺提示

顏色應是輔助層，不是唯一層。讓形狀與語意共同承載資訊，才是真正的可用性：

• 形狀（✔️、✖️）
• 線條樣式（虛線／實線）
• 圖標（箭頭方向、icon state）
• 文字標籤（Success、Error）

4. 對圖片與圖表加上 ALT 或 Label

不論是資料圖表還是產品選色頁，為所有色彩元素提供替代文字或標示：

• 圖片包含 alt 替代文字
• image map 可附加文字連結
• 用文字內容替代文字圖片

在需要使用顏色傳達的情況下，如產品選色或在線狀態，除了標示顏色之外，可考慮加入文字描述或改變圖示形狀來表達訊息。

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

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

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

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

當可及性成為 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+