🎨
← 返回教學列表

無障礙色彩對比度：設計師必讀的 WCAG 指南詳解

· 標籤: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

無障礙色彩對比度：WCAG 指南詳解

色彩對比度是網頁無障礙性最重要的面向之一。它直接影響使用者能否閱讀您的內容、操作您的介面以及完成他們的任務。然而，對比度不足仍然是網路上最常見的無障礙問題之一——通常是因為設計師選擇了在自己螢幕上看起來不錯的顏色，卻沒有驗證對比率。

本指南將詳細說明您需要了解的有關 WCAG 色彩對比度要求的一切，包括如何滿足這些要求，以及如何在設計無障礙介面的同時不犧牲視覺品質。

什麼是色彩對比度比率？

色彩對比度是衡量兩種顏色之間感知亮度差異的指標——通常是前景（文字）和背景之間的差異。對比度以比率表示，範圍從 1:1（相同顏色，文字不可見）到 21:1（白色背景上的黑色文字，最大可能值）。

對比度比率使用相對亮度來計算，這考慮了人眼對不同光波長的感知方式。計算公式為：

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

其中 L1 是較亮顏色的相對亮度，L2 是較暗顏色的相對亮度。人眼對綠色光比紅色或藍色光更敏感，因此亮度計算會對不同通道進行加權處理。

您不需要手動計算。 每個對比度檢查工具（包括我們的色彩轉換器）都能即時完成計算。

WCAG 對比度要求

網頁內容無障礙指南（WCAG）定義了三個符合等級：A、AA 和 AAA。色彩對比度要求適用於 AA 和 AAA 等級。

WCAG AA 等級（建議的最低標準）

AA 是大多數網站的最低標準，並且在許多司法管轄區是法律要求的（包括《歐洲無障礙法案》以及美國、加拿大和澳洲的無障礙法規）。

| 文字類別 | 最低比率 | 符合標準的白色背景灰色範例 | |---------------|--------------|-------------------------------------| | 一般文字（小於 18px / 14px 粗體） | 4.5:1 | 白色背景上的 #767676 | | 大字（18px+ 粗體或 24px+ 一般） | 3:1 | 白色背景上的 #9A9A9A | | UI 元件（邊框、圖示、表單欄位） | 3:1 | 元件邊框、焦點指示器 | | 非裝飾性圖形 | 3:1 | 圖表、資訊圖、圖示 |

WCAG AAA 等級（增強級別）

AAA 是更高的標準，提供更好的可讀性，特別是對於低視力或對比敏感度問題的使用者。

| 文字類別 | 最低比率 | 符合標準的白色背景灰色範例 | |---------------|--------------|-------------------------------------| | 一般文字 | 7:1 | 白色背景上的 #595959 | | 大字 | 4.5:1 | 白色背景上的 #777777 |

大多數法規不要求達到 AAA 合規，但對於服務老年人或有視覺障礙使用者的網站，建議達到此標準。

這些要求涵蓋的範圍

WCAG 對比度要求適用於：

  • 文字 — 所有正文、標題、標籤、說明文字和連結文字
  • 圖片中的文字 — 屬於圖片一部分的文字（裝飾性文字除外）
  • UI 元件 — 按鈕、表單欄位、滑桿、切換開關及其邊框
  • 圖示 — 傳達資訊的必要圖示（非裝飾性）
  • 焦點指示器 — 鍵盤焦點外框與相鄰背景必須達到 3:1 的對比度

這些要求不涵蓋的範圍

  • 標誌 — 屬於品牌標誌或公司名稱一部分的文字
  • 裝飾性元素 — 純裝飾性且無功能用途的圖片
  • 非啟用狀態的 UI — 已停用的按鈕或表單控制項（但仍必須可被感知）
  • 感官文字 — 作為背景圖片一部分且文字並非必要的文字

常見的對比度不足問題及解決方法

1. 淺灰色文字

白色背景上的淺灰色文字是迄今為止最常見的對比度不足問題。像 #CCCCCC 這樣的色調在白色背景上的對比率僅為 1.6:1——遠低於 4.5:1 的最低標準。

解決方法： 將灰色文字加深。對於白色背景上的正文，目標至少為 #595959（AAA 合規）。即使是 #767676（14px 文字的 AA 最低標準）也比大多數「微妙」灰色選擇明顯更深。

2. 品牌色彩用於正文

品牌色彩在作為文字使用時通常太淺。像 #3366CC 這樣的中藍色在白色背景上的比率約為 3.5:1——低於 4.5:1 的標準。

解決方法： 將品牌色彩保留給標題和強調用途。正文使用接近黑色（#1A1A1A 到 #333333）。檢查任何帶顏色的文字是否達到比率要求。

3. 僅靠顏色區分的連結指示器

僅靠顏色與正文區分的連結不符合 WCAG 成功標準 1.4.1（色彩使用）。色盲使用者可能無法感知差異。

解決方法： 始終為連結提供非顏色指示器。常見做法：

  • 為連結加上底線（最穩健的解決方案）
  • 添加圖示（箭頭或外部連結符號）
  • 對行內連結使用粗體字重
  • 提供背景高亮

4. 背景圖片上的文字

放置在照片或漸層上的文字在整個圖片上通常缺乏足夠的對比度。

解決方法：

  • 在圖片和文字之間添加半透明覆蓋層
  • 使用文字陰影產生細微的描邊效果
  • 將文字放置在純色方框覆蓋層中
  • 確保圖片中可能出現在文字後方的任何部分都達到最低比率

5. 低對比度的佔位文字

表單佔位文字如白色背景上的 #BDBDBD（1.9:1）很常見，但不符合對比度要求。

解決方法： 將佔位文字加深到至少 #757575（4.6:1）。更好的做法是使用標籤而非佔位文字——標籤始終可見，並且不會在使用者開始輸入時消失。

測試色彩對比度

自動化工具

  • 瀏覽器開發者工具 — Chrome 和 Firefox 的開發者工具內建了對比度檢查功能。檢查元素並在「樣式」或「無障礙」面板中查看對比度比率。
  • 線上對比度檢查器 — 輸入兩種顏色，即時獲得 AA 和 AAA 的通過/失敗狀態。
  • 設計工具外掛 — Stark、A11y 和 Contrast 可用於 Figma、Sketch 和 Adobe XD。這些工具直接在設計檔案中檢查對比度。
  • Lighthouse — Google 的 Lighthouse 審計會自動報告對比度不足問題。

手動測試

自動化工具只能檢查文字對比度。要進行完整的無障礙審查：

  1. 關閉您的螢幕 — 您能否區分所有介面元素？
  2. 使用灰階濾鏡 — 沒有顏色的情況下，資訊是否仍能正確傳達？
  3. 使用色盲模擬器測試 — 像 Colorblindly（Chrome 擴充功能）這樣的工具可以顯示您的網站對各種色覺缺陷類型的使用者呈現的樣子。
  4. 在直射陽光下測試 — 高環境光會降低感知對比度。

為色盲使用者設計

大約每 12 名男性中有 1 名（8%）和每 200 名女性中有 1 名（0.5%）存在某種形式的色覺缺陷。最常見的類型包括：

  • 綠色盲（Deuteranopia，6% 的男性）— 難以區分紅色和綠色
  • 紅色盲（Protanopia，2% 的男性）— 紅色看起來較暗，與綠色混淆
  • 藍色盲（Tritanopia，罕見）— 難以區分藍色和黃色

設計策略

  1. 絕不單獨依賴顏色 — 任何透過顏色傳達的資訊（錯誤狀態、狀態指示器、圖表分類）也必須透過文字、圖示、圖案或位置來傳達。

  2. 避免有問題的顏色組合 — 紅/綠、藍/紫、綠/棕和綠/藍是最容易混淆的配對。

  3. 使用圖案和紋理 — 在圖表和圖形中，除顏色外還使用虛線、斜線填充和不同形狀。

  4. 直接添加標籤 — 在資料視覺化中，直接標記資料點，而不是依賴顏色編碼的圖例。

  5. 使用模擬器測試 — 每個設計在發布前都應該透過綠色盲和紅色盲模擬器進行測試。

建立無障礙的色彩系統

步驟 1：選擇無障礙的基礎色彩

從自然提供良好對比度的顏色開始。深藍色、深綠色和濃郁的紅色在適當搭配時都可以成為無障礙的基礎色彩。

步驟 2：生成合規的色階

建立一個亮度色階，其中每個階梯與較亮和較暗的相鄰階梯都保持足夠的對比度。OKLCH 非常適合此用途，因為它的亮度通道在感知上是均勻的：

--text-primary: oklch(10% 0.01 0);    /* 接近黑色，白色背景上約 19:1 */
--text-secondary: oklch(35% 0.02 0);  /* 深灰色，白色背景上約 9:1 */
--text-muted: oklch(45% 0.02 0);      /* 中灰色，白色背景上約 5.5:1 */
--text-disabled: oklch(60% 0.02 0);   /* 淺灰色，白色背景上約 3:1 */

步驟 3：驗證每個組合

設計系統中的每個前景-背景配對都必須經過驗證：

  • 表面上的主要文字 — 最低 4.5:1（建議 7:1）
  • 表面上的次要文字 — 最低 4.5:1
  • 表面上的弱化文字 — 最低 3:1（僅限非必要文字）
  • 互動元素 — 狀態最低 3:1
  • 焦點指示器 — 最低 3:1

開發者實用檢查清單

  • [ ] 所有正文達到或超過 4.5:1 的對比度比率
  • [ ] 所有大字達到或超過 3:1 的對比度比率
  • [ ] 連結具有非顏色指示器（底線、圖示或字重變化）
  • [ ] 表單輸入欄位有可見邊框或背景（不僅僅是佔位文字）
  • [ ] 焦點指示器與相鄰背景達到 3:1 的對比度
  • [ ] 錯誤狀態結合顏色與文字或圖示
  • [ ] 圖表和圖形除顏色外還使用圖案或直接標籤
  • [ ] 佔位文字達到最低 4.5:1
  • [ ] 已停用元素在視覺上可區分但仍可被感知
  • [ ] 設計已透過色盲模擬器進行測試

結論

無障礙色彩對比度不是可有可無的——它是包容性網頁設計的基本要求。達到 WCAG AA 標準可以讓您的內容對視覺障礙使用者可存取，改善所有人的可讀性，並且通常會產生更乾淨、更有意圖的設計。從在工作流程中加入對比度檢查開始，將色彩用作其他視覺指示器的補充而非替代，並始終從無障礙的角度測試您的設計。

使用我們內建對比度檢查功能的免費線上色彩轉換器來驗證您的色彩組合是否符合 WCAG AA 和 AAA 標準。