根據 WCAG 2.1 / 2.2 標準檢測對比度
「對比度檢查器」是一款實用的線上工具，讓使用者輸入文字色與背景色，並根據 WCAG 2.1 / 2.2 標準計算出兩者之間的對比度比例。此工具會即時顯示該顏色組合在一般文字、大型文字以及介面元件中，分別通過了哪些無障礙等級（AA 和 AAA）。
本工具採用 WCAG 2.1 / 2.2 公式進行計算，這是目前無障礙規範與稽核所依據的合規標準。不論是需要確保可讀性的設計師、需要達到無障礙標準的開發人員，還是需要確認內容色彩對比的內容團隊，都能透過此工具得到準確的檢測結果。
輸入與輸出參數說明
使用者可以透過輸入特定的顏色值來進行檢測：
- 文字色：支援十六進位值（例如
#1a1a1a）、rgb()值（例如rgb(26, 26, 26)）或hsl()值。若輸入無效的文字色，系統會顯示「請輸入有效的文字色，例如 #1a1a1a 或 rgb(26, 26, 26)。」的提示訊息。 - 背景色：同樣支援十六進位值（例如
#1a1a1a）、rgb()值（例如rgb(26, 26, 26)）或hsl()值。若輸入無效的背景色，系統會顯示「請輸入有效的背景色，例如 #ffffff 或 rgb(255, 255, 255)。」的提示訊息。
工具內設有交換按鈕，可以快速對調文字色和背景色。工具的初始設定值為文字色 #4f46e5 與背景色 #ffffff，其計算出的初始對比度為 6.29。
進行檢測後，工具會提供以下輸出結果：
- 對比度：顯示為「X:1」格式的比例，數值範圍介乎 1:1（完全沒對比）至 21:1（白底黑字）之間。
- 一般文字：針對 AA 與 AAA 等級顯示「通過」或「未過」。
- 大型文字：針對 AA 與 AAA 等級顯示「通過」或「未過」。
- 介面與圖形：此項目不區分 AA 和 AAA 等級，僅針對單一的 3:1 門檻顯示一個「通過」或「未過」的結果。
- 判定結果：系統會根據檢測結果給出綜合摘要，包括「一般文字通過 AA 和 AAA。」、「一般文字通過 AA。」、「只有大型文字通過 AA。」，或「未達 AA 最低標準——請提高對比度。」。
對比度合規規則與定義
為了符合 WCAG 2.1 / 2.2 的無障礙標準，顏色組合必須滿足以下具體的對比度門檻：
- 一般文字：AA 等級要求對比度至少達到 4.5:1；AAA 等級則要求至少達到 7:1。
- 大型文字：AA 等級要求對比度至少達到 3:1；AAA 等級則要求至少達到 4.5:1。
- 介面與圖形：要求對比度至少達到 3:1，此項目僅設有單一門檻，不設獨立的 AA 與 AAA 級別。
在無障礙標準中，「大型文字」有著明確的定義：字型大小為 18pt（約 24px）或以上，或者是粗體且字型大小為 14pt（約 18.5px）或以上。
瀏覽器本機處理與私隱保護
本工具充分保障使用者的資訊私隱。每次檢查都在你的瀏覽器本機完成，輸入的內容不會上傳到 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 草擬中——很有潛力，但還不是合規標準，所以這裡的過關結果不採用它。