你曾在強烈陽光下看著手機螢幕，卻怎麼也看不清淺灰色的文字嗎？或是走進某間餐廳，菜單的文字和背景幾乎融為一體？這些令人沮喪的體驗，背後都有一個共同原因：色彩對比度不足。對於弱視、色盲或老花眼的使用者而言，這不只是不便，而是真正的障礙。本文帶你了解色彩對比度的科學基礎、WCAG 標準，以及如何在設計中避免常見的對比度陷阱。
1. 什麼是色彩對比度？
色彩對比度（Color Contrast Ratio）是衡量前景色（通常是文字）與背景色之間亮度差異的指標，用以描述兩種顏色在視覺上的「可區分程度」。
對比度以比值表示，範圍從 1:1（完全相同的顏色，看不見文字）到 21:1（純黑底白字，或純白底黑字，最大對比）。
這個數值不是主觀感受，而是根據人眼對亮度的感知方式，透過標準化公式計算出來的客觀量測值。
2. 相對亮度（Relative Luminance）計算原理
WCAG（Web Content Accessibility Guidelines）使用「相對亮度」作為對比度計算的基礎。計算步驟如下：
2.1 將 sRGB 值標準化
首先將每個 RGB 通道的值（0–255）除以 255 轉換到 0–1 範圍，再進行 Gamma 校正：
若 C ≤ 0.04045：linearC = C / 12.92
若 C > 0.04045：linearC = ((C + 0.055) / 1.055) ^ 2.42.2 計算相對亮度 L
L = 0.2126 × R + 0.7152 × G + 0.0722 × B其中 R、G、B 是 Gamma 校正後的線性值。這三個係數反映了人眼對不同波長光線的敏感度——對綠色最敏感（0.7152），對藍色最不敏感（0.0722）。
2.3 計算對比度比值
對比度 = (L較亮 + 0.05) / (L較暗 + 0.05)加上 0.05 是為了避免除以零，並反映人眼在暗環境中的非線性感知。
3. WCAG 2.1 標準：AA 與 AAA 等級
WCAG（Web Content Accessibility Guidelines）是由 W3C 發布的國際無障礙設計標準，目前最廣泛使用的是 WCAG 2.1 版本。對比度要求分為兩個等級：
| 內容類型 | AA 等級（最低要求） | AAA 等級（增強要求） |
|---|---|---|
| 一般文字（18pt 以下，或 14pt 以下粗體） | 4.5:1 | 7:1 |
| 大型文字（18pt 以上，或 14pt 以上粗體） | 3:1 | 4.5:1 |
| UI 元件、圖示（非裝飾性） | 3:1 | — |
| 純裝飾性圖案、Logo 文字 | 無要求 | 無要求 |
4. 常見的色彩設計錯誤
4.1 淺灰文字配白底
最常見的問題。設計師追求「輕盈感」，使用 #999999 或更淺的灰色作為輔助文字，但這類組合的對比度往往只有 2–3:1，遠低於 AA 標準。
修正：輔助文字至少使用 #767676（與白底的對比度恰好是 4.5:1）。
4.2 低飽和度的配色方案
粉嫩色系（淺粉配奶白、淺藍配淺灰）視覺上很溫柔，但對比度往往不足。設計的「柔和感」不應以犧牲可讀性為代價。
4.3 僅靠顏色傳達資訊
使用綠色表示成功、紅色表示錯誤，對於有色覺缺陷（如紅綠色盲）的使用者無效。應同時加上圖示或文字說明，不要單靠顏色區分狀態。
4.4 按鈕邊框對比度不足
一個白色背景上的白色按鈕，如果邊框顏色與背景太接近，會讓弱視使用者無法識別按鈕的邊界。UI 元件的邊框或邊緣也需要達到 3:1 的對比度要求。
4.5 文字放在圖片上
將文字疊加在照片或漸層背景上，因為背景色彩不均勻，某些區域的對比度可能符合標準，但其他區域不符合。解決方案：在文字下方加上半透明的深色遮罩，或使用文字陰影。
5. 色盲的種類與影響
全球約 8% 的男性和 0.5% 的女性有某種形式的色覺缺陷：
| 類型 | 說明 | 盛行率 |
|---|---|---|
| 紅綠色盲（Deuteranopia） | 無法區分紅色與綠色 | 男性約 5% |
| 紅色弱（Protanopia） | 對紅色感知減弱 | 男性約 1% |
| 藍黃色盲（Tritanopia） | 無法區分藍色與黃色 | 較罕見 |
| 全色盲（Achromatopsia） | 完全無法感知顏色 | 極罕見 |
對比度標準是色盲友善設計的基礎，但不是全部。確保資訊不僅靠顏色傳達，也是色盲可及性的重要原則。
6. 實用的改善策略
6.1 使用對比度檢查工具
在設計過程中定期使用對比度檢查工具（如本站工具）驗證色彩組合。輸入前景色與背景色的十六進位碼，工具會直接告訴你是否通過 AA/AAA 標準。
6.2 設計系統中預先定義通過標準的色彩配對
在設計系統的色彩規範中，直接標注哪些顏色組合通過 AA 標準、哪些只能用於大字體。這樣設計師和工程師就不需要每次都手動驗證。
6.3 使用深色模式時重新驗證
淺色模式和深色模式的背景色完全不同，必須分別驗證對比度。一組在淺色模式下通過 AA 的顏色，在深色模式下可能完全失敗。
6.4 不要以「設計工具中看起來 OK」為準
顯示器的亮度、色彩校正設定，以及辦公室的光線環境，都會影響你主觀感受到的對比度。只有數值符合標準，才能保證所有使用者在各種環境下都有足夠的可讀性。
7. 對比度與 UX 設計的平衡
「提高對比度」不等於「把所有文字都改成黑色、所有背景都改成白色」。在符合標準的前提下，仍有很大的設計空間：
- 主要文字用高對比度（7:1），輔助說明文字用中等對比度（4.5:1）
- 大字體（18pt+）可以接受較低的對比度（3:1），因為字體本身更易讀
- 插圖和裝飾性元素不受對比度限制，可以自由使用低對比色
- 使用一致的色彩語意（如固定的強調色），讓使用者建立視覺習慣
8. 小結
色彩對比度是無障礙設計中技術含量最高、也最容易被量化驗證的指標之一。WCAG 2.1 的 AA 標準（一般文字 4.5:1）是設計的最低門檻，不只保護了視障、弱視、色盲的使用者，也讓所有人在強光環境、低品質螢幕或疲勞狀態下都有更好的閱讀體驗。在設計流程中加入對比度檢查，是成本極低、收益極高的無障礙投資。