色彩對比度標準v1.0
UI
UX
設計規範
色彩對比度
WCAG
APCA
在 UI設計（User Interface Design） 中，色彩對比度（Color Contrast）是影響「可讀性、易用性與無障礙設計（Accessibility）」的關鍵要素之一。以下是主要的國際標準與設計實務說明：
WCAG（Web Content Accessibility Guidelines）
由 W3C（World Wide Web Consortium） 制定的 WCAG 網頁內容可訪問性指南 2.1 / 2.2 對色彩對比有明確規範：
所有文字應清晰易讀並符合無障礙標準。網頁內容可訪問性指南 AA 等級，要求一般文字的文字和背景之間的顏色對比為 4.5:1，大文字的顏色對比為 3:1。（缺點：暗色模式不準確）
參考來源：Material Design-Legibility standards
WCAG色彩對比度標準表（WCAG Color Contrast Guideline）
| 對象 | 最低對比度要求 | AAA 等級（更高標準） |
|---|---|---|
| 一般文字（正常字級） | 4.5:1 以上 | 7:1 以上 |
| 大字（18pt 或 14pt 粗體以上） | 3:1 以上 | 4.5:1 以上 |
| 非文字內容（圖示、按鈕、圖形中的文字） | 3:1 以上 | 建議至少 3:1 |
按鈕容器和使用者介面表面採用兩種顏色，對比度至少達到 3:1。
文字與元件對比度建議表
| 元件類型 | 建議對比度 | 補充說明 |
|---|---|---|
| 主要文字（Paragraph） | ≥ 4.5:1 | 確保長文易讀 |
| 標題或大字（Heading） | ≥ 3:1 | 若字體夠大可略放寬 |
| 按鈕文字與背景 | ≥ 4.5:1 | 尤其針對主按鈕、次按鈕 |
| 錯誤／警示訊息文字 | ≥ 4.5:1 | 紅色系常需特別調整亮度 |
| Icon 與背景 | ≥ 3:1 | 對功能性圖示尤其重要 |
| 停用狀態（Disabled） | 可低於 3:1 | 因為目的在於「弱化」視覺層級 |
APCA 標準（Advanced Perceptual Contrast Algorithm）
APCA 標準 是一種基於「人眼實際感知」的對比計算模型。與傳統的 WCAG 2.x 對比算法不同，它不再只是比亮度比例，而是考慮人眼對亮度、顏色、字重與背景的感知差異。
APCA 標準 是近年在 UI／UX 設計與無障礙（Accessibility）領域中，取代傳統 WCAG 對比度演算法 的新一代標準。
它由 W3C AGWG（Accessibility Guidelines Working Group） 推動，並將正式納入 WCAG 3.0。
APCA 的 Lc 值（Contrast Lightness Value）
- 對比值是 Lc = ±0~100 的數值。
- 絕對值越高，對比越強。
- 正負號表示亮底或暗底：
- 正值 (+) → 暗色文字在亮背景上
- 負值 (–) → 亮色文字在暗背景上
APCA 建議標準值 Lc（依用途與字體大小）
| 使用情境 | 建議 Lc | 備註 |
|---|---|---|
| 正文文字（body text, 14–18px） | ≥ 60 Lc | 主要閱讀區域 |
| 大字標題（heading, 24px 以上） | ≥ 45 Lc | 因字大可略降 |
| 低重要度文字（註解、小標） | ≥ 40 Lc | 次要訊息 |
| 非文字 UI 元件（icon、邊框） | ≥ 30 Lc | 功能性圖示 |
| 禁用或次要狀態（disabled） | ≤ 25 Lc | 弱化狀態用 |
| 最高可讀性（AAA 等級） | ≥ 75 Lc | 用於長篇文字或暗色模式 |
APCA 更符合實際設計
1
模擬人眼對明暗的感知非線性差異
- 白底黑字比黑底白字更易讀（WCAG 2.x 忽略此點）。
2
考量字重與字體大小
- 小字需要更高對比度，大字可放寬。
3
更適用深色模式設計
- 可精準避免「深灰＋灰白」導致的閱讀疲勞問題。
4
可應用於色彩系統設計
- 更容易規劃品牌主色、背景色、文字顏色的層級。
WCAG 2.x 與 APCA 對比度模型比較
| 項目 | WCAG 2.x 對比度（Contrast Ratio） | APCA（Lc 值） |
|---|---|---|
| 新標準使用 | WCAG 2.1 / 2.2 | WCAG 3.0（Silver） |
| 數值表示 | 比值（例：4.5:1、7:1） | Lc（例：60、75；帶 + / - 表示暗底/亮底） |
| 可讀性門檻 | 正文 ≥ 4.5:1（AA）；大字 ≥ 3:1 | 正文（14–18px）| 建議 ≥ 60 Lc；大字（≥24px）≥ 45 Lc |
| 深色模式 | 比值對稱（黑白相同）→ 有時誤導深色模式優化 | 對暗底/亮底非對稱，有助於深色模式優化 |
| 使用建議 | 適用於合規與法律要求（廣泛採用） | 建議與 WCAG 併用：設計階段以 APCA 調整視覺體驗，最終確認 WCAG 合規 |
| 計算方式 | 亮度比例 (0–21:1) | 感知亮度差 (–100～+100) |
| 感知方向 | 對稱（黑白同比） | 非對稱（白底黑字與黑底白字不同） |
| 依據 | 數學亮度值 | 人眼實際感知模型 |
| 影響因子 | 僅亮度 | 包含色相、字重、字體大小 |
| 結果意義 | 越高越清晰 | Lc 絕對值越高越清晰 |
設計實務建議整合
WCAG 的「對比比例」是數學對比，而 APCA 的「Lc 值」是感知對比。
新世代 UI 設計應逐步導入 APCA 概念，讓畫面不只是「符合標準」，而是真正「看起來舒服又易讀」。
新專案建議同時標示兩種值：
- 傳統對比度（WCAG AA） ≥ 4.5:1
- APCA 值（Lc） ≥ 60
深色模式可讀性優化策略：
- 不要使用純黑 (#000000) 背景。
- 建議背景為 #121212～#1E1E1E，文字為 #E0E0E0～#FFFFFF。
- 控制對比 Lc 在 60～75 間，舒適不刺眼。