色彩對比度與無障礙：實用指南

你選了一個在螢幕上看起來很棒的顏色。上線了。然後有人告訴你他們看不清文字。

這比你想的更常發生。大約每12個男性中有1個、每200個女性中有1個有某種形式的色覺缺陷。加上低對比度螢幕、強烈陽光和老化的眼睛，你的顏色選擇突然影響到很多人。

好消息：這有明確的規則。叫WCAG對比度要求，比聽起來簡單。

什麼是對比度比率？

對比度比率是描述兩種顏色在亮度上差多少的數字。範圍從1:1（無對比——相同顏色）到21:1（最大對比——白底黑字）。

你的眼睛不會平等地看到所有顏色差異。對比度比率反映的是人類視覺實際感知亮度的方式，不只是數學上的顏色差異。

快速參考：

| 對比度比率 | 看起來怎樣 | 通過？ | |---|---|---| | 1:1 – 2:1 | 幾乎看不見 | 否 | | 3:1 | 能讀但費勁 | 僅大文字AA | | 4.5:1 | 舒適閱讀 | 一般文字AA | | 7:1 | 非常清晰 | 一般文字AAA | | 21:1 | 最大（白底黑字） | 全部 |

AA vs. AAA：有什麼區別？

WCAG定義了兩個與顏色相關的重要合規級別：

AA級（大多數網站的目標）：

• 一般文字（小於18pt）：需要4.5:1的對比度比率
• 大文字（18pt+或14pt+粗體）：需要3:1的對比度比率
• UI元件和圖形物件：需要3:1的對比度比率

AAA級（黃金標準）：

• 一般文字：需要7:1的對比度比率
• 大文字：需要4.5:1的對比度比率

大多數組織以AA為目標。AAA是理想的，但對設計有限制——不是很多顏色組合能達到7:1同時還好看。

常見的對比度失敗

在真實專案中一直出現：

白色背景上的淺灰文字：那種微妙的、「優雅的」灰色文字？經常通不過對比度。白色上的#999999只有2.85:1——連大文字都不合格。

彩色背景上的彩色文字：紫色上的藍色、藍色上的綠色、深灰上的紅色。對你來說可能看起來有區別，但對比度比率不夠。

表單中的佔位符文字：淺灰色佔位符文字在網頁設計中幾乎是通用的，但幾乎總是不符合對比度要求。低視力使用者無法讀取欄位中期望輸入的內容。

圖片上的文字：除非加上深色遮罩或文字陰影，照片上的文字很少能穩定地達到對比度標準。

色覺缺陷的考量

對比度比率有幫助，但不能解決一切。色覺缺陷意味著某些使用者確實無法區分特定的顏色對。

傳達資訊時不要僅依賴顏色：

• 紅/綠代表錯誤/成功？也加上圖示或文字標籤
• 顏色編碼的圖表？加上圖案、標籤或不同形狀
• 僅用紅色標記必填欄位？加上星號或「（必填）」文字

最常見的類型：

• 紅綠色覺缺陷（約6%的男性）：紅色和綠色看起來相似
• 第一型色覺缺陷（約2%的男性）：紅色顯得暗/偏棕
• 藍黃色覺缺陷（罕見）：藍色和黃色難以區分

修正顏色的實用步驟

第1步：用顏色轉換器把品牌色轉換為十六進位。檢查對比度需要精確值。

第2步：測試每個文字/背景組合。不只是檢查主要文字——檢查按鈕、連結、說明文字、表單標籤、錯誤訊息。

第3步：透過調整亮度修復失敗項。通常你可以保持相同的色相和飽和度，透過加深或減淡來達到比率。

第4步：用模擬器測試。Chrome DevTools有內建的視覺缺陷模擬器（轉譯面板 > 模擬視覺缺陷）。

第5步：也檢查你的SVG圖形和圖片。對比度差的圖示和文字一樣有問題。

快速上手

如果你趕時間，這些安全組合總是能通過AA：

• 黑色 (#000000) + 白色 (#FFFFFF) — 21:1
• 深灰 (#333333) + 白色 — 12.6:1
• 白色文字 + 深藍 (#003366) — 9.9:1
• 黑色文字 + 淺黃 (#FFF9C4) — 18.1:1
• 深綠 (#2E7D32) + 白色 — 5.1:1

而這些常常失敗：

• 中灰 (#808080) + 白色 — 3.9:1（一般文字AA不合格）
• 紅色 (#FF0000) + 黑色 — 5.25:1（通過AA但不通過AAA）
• 橙色 (#FF8C00) + 白色 — 3.0:1（一般文字AA不合格）

---

無障礙不僅僅是合規——是確保每個人都能真正使用你打造的東西。從檢查文字對比度比率開始。先修復明顯的失敗項。然後處理按鈕、圖示和次要文字。小改變，大影響。