WCAG 對比度檢查工具
注重隱私的設計 — 完全在您的瀏覽器中執行
選擇前景與背景顏色,即可看到 WCAG 對比度比例,以及一般文字、大文字與 UI 元件對應的 AA/AAA 標章。
多少比例算過關
WCAG AA 對一般文字要求 4.5:1,對大文字(≥18 px regular 或 ≥14 px 粗體)要求 3:1;AAA 則分別提升至 7:1 與 4.5:1。
UI 元件 3:1 規則是什麼
WCAG 2.1 SC 1.4.11 要求圖示、表單邊框等非文字 UI 元素具備 3:1 對比度,工具上的這枚標章就是針對它。
支援半透明顏色嗎
若以 rgba 提供且背景為不透明就能算;多層半透明則需先扁平化,解析不出來時工具會提示。
常見問題
- 多少比例算過關?
- WCAG AA 對一般文字要求 4.5:1,對大文字(≥18 px regular 或 ≥14 px 粗體)要求 3:1;AAA 則分別提升至 7:1 與 4.5:1。
- UI 元件 3:1 規則是什麼?
- WCAG 2.1 SC 1.4.11 要求圖示、表單邊框等非文字 UI 元素具備 3:1 對比度,工具上的這枚標章就是針對它。
- 支援半透明顏色嗎?
- 若以 rgba 提供且背景為不透明就能算;多層半透明則需先扁平化,解析不出來時工具會提示。
- 會上傳任何東西嗎?
- 不會。運算只是本頁的一小段函式,顏色不會離開瀏覽器。