楓葉工具箱 ToolMaple

WCAG 對比度檢查

輸入前景色與背景色，即時計算對比度（contrast ratio）並判斷 WCAG 2.1 AA / AAA 等級是否通過。文字、UI、icon 無障礙設計、可讀性檢查必備。

  • WCAG
  • 對比度
  • contrast ratio
  • 無障礙
  • a11y
  • 色彩對比
  • AA AAA
楓葉工具箱 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 線性化後）

怎麼用

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

隱私說明

所有計算在你的瀏覽器內完成、不送到任何伺服器。 採 WCAG 2.1 規格（與 2.2 一致），不適用尚未廣泛採用的 APCA。

相關工具