先確認測量的對象
輸入文字色和實際背景色,使用三位或六位HEX。本工具依不透明sRGB 顏色計算;透明色、背景圖片和漸層需要先確定文字所在位置的實際合成背景,不能只拿其中一個色值來代替。
結果檢查這組顏色的文字對比條件,不表示整個頁面達到WCAG 等級。字號、字體、互動狀態和其他可訪問性要求仍需要在實際頁面上檢查。
比例怎樣計算
每個8 位元顏色通道除以255 得到c。若c ≤ 0.04045,則線性值為c ÷ 12.92;否則為((c + 0.055) ÷ 1.055) 的2.4 次方。相對亮度L = 0.2126R + 0.7152G + 0.0722B,R、G、B 使用上述線性值。
(較亮的 L + 0.05) ÷ (較暗的 L + 0.05). 黑白得到 21:1;相同顏色得到 1:1。交換前景與背景不會改變對比度,但會改變頁面觀感。
別把四捨五入當作透過
普通文字的 AA 條件為至少 4.5:1,AAA 為至少 7:1;大字分別為至少 3:1 和 4.5:1。大字指至少 18pt 的文字,或至少 14pt 的粗體文字。普通小字不可套用大字門檻。
#777777 在白底上的對比約為4.478:1,所以沒有達到普通文字AA 的4.5:1 條件。即使某個介面把它顯示成4.5,也不能按顯示值判定。本站顯示三位小數,條件判斷使用完整計算值。
把顏色對放回實際介面
預覽僅展示輸入顏色,採用16px 正文和24px 標題。先在目標頁檢查實際文字色、背景、字號和粗細,再檢查普通、懸停、焦點等狀態;不要只檢查設計稿中最好看的一組顏色。
逐步加深文字或調亮背景後重新計算,再查看真實裝置上的字形和閱讀體驗。這裡的顏色對比度檢測不測色盲辨識、圖標語義或完整頁面合規;保留顏色值和核驗位置,以便於後續複核。