對比度檢查器 — WCAG AA/AAA 合規判定
選定前景色和背景色, 即時計算 WCAG 對比度比率, 顯示 4 種合規判定(AA/AAA × 普通/大文字), 同時提供文字渲染預覽。
運作原理
對比度比率的計算原理
WCAG (Web Content Accessibility Guidelines) 把對比度定義為兩色相對亮度的比率。公式: 把 sRGB 的 R/G/B 通道線性化, 按視覺敏感度加權(R 0.2126、G 0.7152、B 0.0722), 再用 (亮+0.05)/(暗+0.05) 計算。結果範圍 1:1 (相同色)到 21:1 (黑底白字)。
本工具使用官方 WCAG 2.x 公式, 在瀏覽器內計算。4 個徽章分別對照 AA(普通 4.5:1, 大 3:1) 與 AAA(普通 7:1, 大 4.5:1)。「大文字」指 24px(18pt) 或 18.66px(14pt) 粗體。
為何至少要滿足 AA
AA 在多個司法轄區是法律要求(美國 ADA、歐盟 EN 301 549、英國 Equality Act 數字服務)。正文文字未達 AA 是最常見的可訪問性問題, 設計階段修復成本最低。
AAA 推薦用於長文閱讀、政府服務、高風險介面。基準較嚴格 — 設計師常見的「白底淺灰」很容易跌出 AAA。短停留站點目標 AA, 出版/重要資訊站點目標 AAA。
常見錯誤
「我的螢幕看著沒問題」: 校準過的顯示器、辦公室熒光燈、戶外手機使用都會改變知覺對比度。用比率而非肉眼判斷。
透過反轉 HEX 實現暗模式: 反轉改變色相併破壞對比度。切換主題後, 每對顏色都要重新測試。
盲目相信品牌指南: 許多品牌色板早於 WCAG 意識。如果品牌粉白底跌出 AA, 提議略深的粉用於正文, 原色保留裝飾用途。
常見問題
›AA 與 AAA 的區別?
AA 普通 4.5:1、大 3:1。AAA 緊到 7:1、4.5:1。AAA 推薦但不一定可達成。
›「大文字」的定義?
WCAG 定義為 18pt(24px) 或更大, 或 14pt(18.66px) 粗體。
›支援透明度嗎?
暫不支援。請使用合成後使用者實際看到的顏色。透明度支援後續考慮。
›我的品牌色不透過怎麼辦?
許多品牌色板基於美感而非可訪問性。常見修復: 文字使用更深的派生色, 淺色保留作為背景或裝飾。
›WCAG 比率與「知覺對比度」一致嗎?
不完全一致 — WCAG 2.x 使用基於亮度的簡化公式。WCAG 3 (開發中) 使用 APCA 更貼近知覺但尚未標準化。
›圖示和 UI 控制元件的最低值?
WCAG 2.1 增加了非文字對比度 3:1 最低標準 (圖示、表單控制元件、焦點指示)。在本工具中保持 ≥ 3:1。
›圖表上能用嗎?
相鄰顏色對承擔含義時適用相同標準。資料視覺化中相鄰色 ≥ 3:1 是 WCAG 1.4.11 最低要求。
›資料會上傳嗎?
不會。計算在本地瀏覽器內進行。
相關工具
最後更新: