什麼是WCAG對比度檢查器？
WCAG顏色對比度檢查工具，可計算前景色與背景色之間的對比度，並報告該顏色組合是否符合WCAG 2.1 AA級和AAA級無障礙標準中對一般文字和大號文字的要求。
檢查器依 WCAG 2.1 的相對亮度公式計算任兩種顏色的對比比 — 可用 hex、rgb()、hsl() 或顏色名輸入 — 並依 AA(正文 4.5:1、大字 3:1)與 AAA(7:1、4.5:1)評分,同時檢驗表單邊框、圖示等 UI 元件 3:1 的下限。若不合格,建議面板會微調前景明暗直到通過,並提供 AA 與 AAA 兩種目標。
使用方法
- 輸入或選擇前景色(文字顏色)和背景色 — 可貼上 hex、rgb()、hsl() 或 CSS 顏色名,也可使用取色器。
- 檢視對比度數值，以及在正常文字、大號文字和UI元件方面是否通過WCAG AA和AAA標準。
- 若對比度未達標，可使用建議的顏色調整方案找到最接近的無障礙顏色組合。
何時使用
- 上線到達頁前,核對品牌色在白底或深色背景上的表現。
- 為按鈕的預設、滑過、停用三種狀態挑出無障礙合格的配色。
- 檢查預留字與停用輸入框,它們常常掉到 4.5:1 以下。
結果
UI設計師檢查其品牌藍色#3B82F6與白色#FFFFFF的對比度——4.5:1的比率在大號文字上通過AA標準，但在正常文字上未通過AAA標準。將顏色加深為#2563EB後兩者均通過。
常見問題
- 正文要達到多少對比比才能過 WCAG AA?
- 需要 4.5:1。大字(至少 18pt 常規或 14pt 粗體)放寬為 3:1。AAA 進一步要求 7:1 與 4.5:1。輸入框邊框這類 UI 元件只需要 3:1。
- 深灰加白底我看著很清楚,為什麼判不合格?
- 個人感覺與實測對比比之間差距常常很大。4:1 在校過色的螢幕和良好光線下確實乾淨,但低視力使用者、反光環境或老螢幕就會吃力。WCAG 看的是最差情況,不是最佳情況。
- 圖示和表單邊框也要達到正文的對比比嗎?
- 不用。WCAG 2.1 為非文字元件另立 3:1 的規則,涵蓋邊框、圖示、聚焦提示與圖表元素。純裝飾圖形可豁免,但凡傳達資訊的元素都得達到 3:1。
- 品牌色不能動,要怎麼修不合格的組合?
- 當品牌色固定時,就改背景。把背景往深或往亮微調,直到比例過關。本工具的建議面板會以小步距微調前景,你可以用同樣思路處理背景。
- WCAG 對半透明文字或圖片上的文字有規範嗎?
- WCAG 要求評估文字底下最差像素的對比。圖片上的文字通常得加一層半透明遮罩或實色底板。請測試實際渲染出來的顏色,不能只看一開始輸入的 hex。