網頁色彩對比檢查（WCAG 2.2 AA／AAA）

輸入文字與背景的 HEX 色碼，以 WCAG 2.2 公式計算對比度，判斷一般文字、大型文字與介面元件是否符合 AA／AAA 標準。

文字顏色（前景色）

#RGB 或 #RRGGBB（例：#6B7280）

背景顏色

#RGB 或 #RRGGBB（例：#6B7280）

結果

對比度

4.83:1

對象: 一般文字判定: 通過
標準: AA：至少 4.5:1（成功準則 1.4.3）
對象: 一般文字判定: 未通過
標準: AAA：至少 7:1（成功準則 1.4.6）
對象: 大型文字判定: 通過
標準: AA：至少 3:1（成功準則 1.4.3）
24px（18pt）以上，或約 18.66px（14pt）以上的粗體
對象: 大型文字判定: 通過
標準: AAA：至少 4.5:1（成功準則 1.4.6）
24px（18pt）以上，或約 18.66px（14pt）以上的粗體
對象: 介面元件與圖形判定: 通過
標準: AA：至少 3:1（成功準則 1.4.11）
按鈕邊框、圖示、圖表等非文字內容

判定使用未經四捨五入的數值；顯示的對比度無條件捨去到小數第 2 位（例：4.499:1 顯示為 4.49:1，未達 4.5:1）。

這是 16px 的一般文字，請確認是否容易閱讀。

24px 的大型文字

約 18.66px 的粗體文字

按鈕樣式的邊框與圖示

文字顏色 #6B7280

0.1672

背景顏色 #FFFFFF

1.0000

AA 和 AAA 有什麼不同？

兩者是 WCAG 2.2 的符合等級。一般文字 AA 需要至少 4.5:1、AAA 需要至少 7:1；大型文字 AA 需要至少 3:1、AAA 需要至少 4.5:1。

「大型文字」是多大？

WCAG 將 18 點以上，或 14 點以上的粗體定義為大型文字。CSS 中 1pt 約等於 1.333px，因此大約是 24px 以上，或約 18.66px 以上的粗體。

顯示 4.49:1，四捨五入不就是 4.5 嗎？

WCAG 的官方解說（Understanding 1.4.3）指出計算值不應四捨五入，4.499:1 不符合 4.5:1。本工具以未四捨五入的數值判定，顯示時無條件捨去，避免未通過的配色看起來像是通過。

可以檢查透明色或漸層嗎？

不行，只支援兩個不透明的單色。透明色請以畫面上實際呈現的不透明顏色來檢查。