無障礙色彩

WCAG 色彩對比:正確判讀比例,不過度宣稱

對比比例比較兩個實色的相對亮度,是許多文字與介面情境的必要檢查,但不是整頁無障礙的結論。先用工具檢查配色,再回到實際元件確認狀態、字體與相鄰顏色。

先選正確準則,再判讀比例

WCAG 2.2 AA 對一般文字要求 4.5:1,大型文字為 3:1;AAA 分別為 7:1 與 4.5:1。作用中介面元件及必要圖形資訊,則依非文字 AA 準則和相鄰顏色達到 3:1。

大型文字是至少 18pt,或 14pt 粗體;CJK 字型採相當尺寸。數值通過不會替你判定實際字型、字重或中日韓文字是否真的屬於大型文字。

不要把未通過的比例四捨五入成通過

WCAG 以 sRGB 定義相對亮度,再用 (L1 + 0.05) / (L2 + 0.05) 計算比例。本工具以完整計算值判定,只將畫面顯示保留三位小數。低於 4.5 的值不會因縮短顯示成 4.50 就通過一般文字 AA。

交換前景與背景不會改變比例;交換功能可預覽實際設計方向,但不能讓未通過的配色變成通過。

檢查實際狀態,不只檢查兩個色票

本工具只接受不透明的三位或六位 sRGB HEX。透明度、CSS 色彩函式、變數、廣色域、漸層與圖片都會拒絕,因為兩個輸入無法完整描述最後呈現色或相鄰背景。

需要時分別檢查預設、hover、focus、按下、選取、錯誤與停用狀態。圖片或漸層上的文字應檢查相關範圍中對比最低的位置;Logo、附帶文字與停用元件另有例外,不能把單一結果套用到所有元素。

把結果當成審查依據,不是認證

可將配色、比例與五項通過結果複製到設計或程式審查,並記錄實際檢查的元件與狀態。結果不會掃描頁面、讀取 computed styles、判斷是否只靠顏色傳意,也不是 WCAG 認證。

所有計算都在瀏覽器完成,不上傳也不儲存。原生色彩選擇器外觀會因瀏覽器不同;HEX 欄位仍是跨瀏覽器可用的輸入方式。

前景 #767676、背景 #FFFFFF → 4.542:1 → 一般文字 AA 通過、AAA 未通過

資料可信度

資料來源