跳到主要內容
楓葉工具箱 ToolMaple

WCAG 對比度檢查

輸入前景色與背景色，即時算出對比度（contrast ratio）並判斷 WCAG 2.1 AA / AAA 等級過不過。文字、UI、icon 上線前先確認每個人都看得清楚。

楓葉工具箱 ToolMaple
Aa Bb Cc 一般文字示意 — 看清楚嗎？
小字級也要能讀
對比度
17.40: 1
WCAG AA 一般文字（≥ 4.5）
WCAG AA 大字（≥ 3）
WCAG AAA 一般文字（≥ 7）
WCAG AAA 大字（≥ 4.5）

WCAG 對比度標準

  • AA 一般文字（4.5:1）：可讀性基本門檻，多數設計系統最低標
  • AA 大字（3:1）：≥ 18pt 或 ≥ 14pt 粗體
  • AAA 一般文字（7:1）：高可讀性、銀髮族與弱視友善
  • AAA 大字（4.5:1）

公式

ratio = (L1 + 0.05) / (L2 + 0.05)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B（sRGB 線性化後）

如果你手邊只有 HEX，想轉成 RGB、HSL 或反推同色相不同明度的相近色，可搭配 色碼轉換工具 一起調，直接把調整後的色碼貼回本工具驗證 AA / AAA。

怎麼用

  • UI 元件審查：按鈕、表單、連結對比是否足夠
  • 品牌主色 vs 背景色驗證
  • 無障礙審計（a11y audit）必跑
  • 銀髮族、教育、醫療類產品優先採用 AAA

常見問題

AA 跟 AAA 差在哪？我該選哪個？

AA 是業界基本門檻（一般文字 4.5:1），多數設計系統採用。AAA 是高可讀性等級（一般文字 7:1），銀髮族、教育、醫療類產品建議採用。一般消費型產品達到 AA 即可，行銷頁、品牌頁可允許部分大字降到 3:1。

為什麼用 RGB 看起來明明很亮，對比度卻不夠？

WCAG 使用「相對亮度（relative luminance）」，會把 RGB 經 sRGB 線性化，再以 0.2126 R + 0.7152 G + 0.0722 B 加權。綠色權重最高、藍色最低，所以「亮藍色」看起來鮮豔但對比度可能很低。要靠公式或本工具實測。

深色模式（dark mode）對比要怎麼設計？

深色模式不是把顏色反相就好。建議：背景用 #0E0E0E ~ #1A1A1A（非純黑、減少光暈）、主文字用 #E5E5E5 ~ #F5F5F5、次文字降到 #999 仍要過 AA。品牌主色可能在深色背景變太亮，需要重新調飽和度。

WCAG 2.1 跟 2.2、APCA 哪個比較準？

WCAG 2.1 / 2.2 對比計算方式相同（本工具採用）。APCA 是 WCAG 3.0 候選新公式，更符合人眼感知（特別是深色 UI），但 W3C 尚未正式採納。為了相容法規（無障礙標準、政府網站規範），仍建議用 WCAG 2.x 驗收。

純白配上品牌色按鈕，為什麼老是過不了 AA？

品牌色（特別是黃、橘、淺綠）在白底上對比常落在 2-3:1 區間。解法：1) 文字加粗，用大字標準 3:1；2) 把品牌色當邊框，文字改深灰；3) 按鈕用品牌色為底，文字白色（深色品牌色才有效）。可用本工具實測。

我已經用 Figma 內建檢查器了，為什麼還要用這個？

Figma 內建檢查器只能算單一文字 vs 背景；本工具可快速比對任意兩色，即時顯示 AA / AAA / 大字判斷，並可貼上 HEX、HSL、RGB 等多格式色碼。適合審圖、code review、Slack 分享驗證結果時當第二意見。

計算標準

對比度公式採 WCAG 2.1 規格（與 2.2 相同），不採還在草案階段的 APCA。兩個色碼的運算就是幾行數學，在你的瀏覽器內直接算完。

相關工具