🌐 繁體中文
使用指南· 方法與邊界

看起來夠清楚的灰色文字,為什麼仍可能沒有達到對比條件?

用黑白和#777777 的邊界算例來理解文字對比度,區分普通文字、大字、顯示舍入和實際頁面核驗。

內容核對:2026-10-08 · 編輯:本站維護者

先確認測量的對象

輸入文字色和實際背景色,使用三位或六位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 標題。先在目標頁檢查實際文字色、背景、字號和粗細,再檢查普通、懸停、焦點等狀態;不要只檢查設計稿中最好看的一組顏色。

逐步加深文字或調亮背景後重新計算,再查看真實裝置上的字形和閱讀體驗。這裡的顏色對比度檢測不測色盲辨識、圖標語義或完整頁面合規;保留顏色值和核驗位置,以便於後續複核。

核對資料

連結用於核對技術定義;算例與操作建議由本站整理,不冒充實際項目評量。

返回工具,試一組參數