WCAG 對比 + APCA 無障礙檢查器
輸入前景與背景色,即時看到 WCAG 2.1 對比度與 APCA Lc 值,AA / AAA / 大字 / UI 元件每項目分別 Pass/Fail。不合格時自動沿 OKLab L 軸找最近合格色推薦給你。
標題範例
這是一段內文範例,請確認在這個對比下你能舒服閱讀。
更小的說明文字 / 註腳,a11y 標準對小字最嚴格。
WCAG 2.1 對比
3.24:1
AA 內文 (≥ 4.5)≥ 4.5FAIL
AA 大字 (≥ 3.0)≥ 3.0PASS
AAA 內文 (≥ 7.0)≥ 7.0FAIL
AAA 大字 (≥ 4.5)≥ 4.5FAIL
UI 元件 / Icon≥ 3.0PASS
APCA(WCAG 3 草案)
Lc -59.0
內文 / 小字|Lc| ≥ 75FAIL
較大字 / 次要|Lc| ≥ 60FAIL
非文字最低|Lc| ≥ 45PASS
APCA 為 WCAG 3 草案,實務上會比 WCAG 2 更準。
⚡ 對比不足 — 建議改用
→#0073e0›如何使用
- 上方填入 前景色(通常是文字)與 背景色,可用色票或直接輸入 hex / rgb / hsl / oklch。
- 中間 即時預覽 顯示真實 UI 元件在這個配色下的樣子(標題 / 內文 / 小字 / 按鈕)。
- 下方 WCAG 2.1 列出 ratio + 5 個檢查點(AA 內文 / AA 大字 / AAA 內文 / AAA 大字 / UI 元件),每項 Pass/Fail。
- 右邊 APCA(WCAG 3 草案)列 Lc 值 + 3 個檢查點(內文 / 較大字 / 非文字)。
- 不合格時 會跳出黃色推薦欄,顯示沿 OKLab L 軸找到的最近合格色 — 按 套用 直接換掉前景色。
Tips
- WCAG 2.1 ratio 範圍 1-21,黑白配對 = 21:1(滿分)。AA 是最低法定門檻(歐盟、美國政府網站要求),AAA 是進階。
- APCA Lc 是 WCAG 3 的草案演算法,對亮度感知更準,沒有 WCAG 2 對深色/淺色的偏差問題,Apple HIG 已開始參考。
- 前景/背景 互換 ⇅ 適合測試 dark mode 配色 — 點一下兩個顏色顛倒。
- 狀態同步到 URL hash — 例如
#1e90ff|ffffff,複製網址直接分享配色測試。