依循 WCAG 2.1 / 2.2 標準的對比度量測
在網頁無障礙設計中，確保文字與背景之間擁有足夠的色彩對比度，是提升內容可讀性的關鍵步驟。本工具採用 WCAG 2.1 / 2.2 演算法公式，精確計算出兩個色彩之間的相對亮度比例。
計算得出的對比度數值介於 1:1 至 21:1 之間。其中 1:1 代表兩色完全相同、毫無對比；21:1 則代表極致對比（例如純黑與純白）。本工具預設的初始色彩為文字色 #4f46e5 與背景色 #ffffff，兩者計算出的對比度為 6.29:1。
輸入格式與操作方式
使用者可於工具中輸入以下兩種色彩數值進行檢測：
- 文字色：可接受十六進位值（例如
#1a1a1a）、rgb()值（例如rgb(26, 26, 26)）或hsl()值。若輸入格式不正確，系統將顯示錯誤提示：「請輸入有效的文字色,例如 #1a1a1a 或 rgb(26, 26, 26)。」。 - 背景色：同樣接受十六進位值、
rgb()值或hsl()值。若輸入格式不正確，系統將顯示錯誤提示：「請輸入有效的背景色,例如 #ffffff 或 rgb(255, 255, 255)。」。
工具介面提供對調按鈕，點擊即可快速將文字色與背景色進行互換，便於檢視不同配置下的視覺效果。
檢測指標與通過門檻
本工具針對三種不同的網頁元素進行對比度判定，並區分為 AA 與 AAA 兩個無障礙等級：
| 檢測項目 | AA 等級門檻 | AAA 等級門檻 | 說明與定義 |
|---|---|---|---|
| 一般文字 | 4.5:1 | 7:1 | 適用於常規大小的內文字體。 |
| 大型文字 | 3:1 | 4.5:1 | 指 18pt（約 24px）以上，或粗體 14pt（約 18.5px）以上的文字。 |
| 介面與圖形 | 3:1 | 無區分 | 僅設有單一 3:1 門檻，不區分 AA 與 AAA 等級。 |
系統會根據計算結果，即時輸出對應的判定結論：
- 一般文字通過 AA 和 AAA。
- 一般文字通過 AA。
- 只有大型文字通過 AA。
- 未達 AA 最低標準——請提高對比度。
瀏覽器本機運算與隱私保護
本工具充分保障使用者的資料隱私。每一次的對比度數值計算與色彩檢測，皆完全在您的瀏覽器本機完成，您所輸入的任何色彩數值或設定，絕不會上傳到 BroBroGo 伺服器。
常見問題
AA 和 AAA 的結果代表什麼?
AA 是多數網站設定的目標:一般文字對比度至少要 4.5:1,大型文字至少 3:1。AAA 更嚴格——一般文字要 7:1,大型文字要 4.5:1。對比度從 1:1(完全沒對比)到 21:1(白底黑字)。
怎樣才算大型文字?
18pt(約 24px)以上,或粗體 14pt(約 18.5px)以上。字大一點在低對比下也看得清楚,所以 AA 只要 3:1、AAA 只要 4.5:1 就過,不必達到一般文字那麼嚴格的門檻。
可以輸入哪些顏色格式?
可以輸入 #1a1a1a 這樣的十六進位值、rgb(26, 26, 26) 這樣的 rgb() 值,或 hsl() 值——也可以點任一色塊直接選色。用交換按鈕就能把文字色和背景色對調。
這是用 WCAG 2 還是比較新的 APCA 演算法?
用的是 WCAG 2.1／2.2 公式,也就是目前無障礙規範和稽核所依據的那一套。APCA 是比較新、更貼近人眼感受的方法,仍在為 WCAG 3 草擬中——很有潛力,但還不是合規標準,所以這裡的過關結果不採用它。