當 WCAG 對比度檢查結果的比率符合受測內容的門檻時，就會通過特定檢查：一般文字的 AA 為 4.5:1、大型文字的 AA 為 3:1、一般文字的 AAA 為 7:1，以及大型文字的 AAA 為 4.5:1。執行檢查後，請先讀取確切比率，再找到與您實際內容類型相對應的徽章。色彩對比度檢查器除了傳回比率，也會顯示一般文字與大型文字的 AA 和 AAA 通過或失敗結果，以及 UI 元件、圖示和圖形物件的 3:1 非文字門檻。
同一組顏色可能通過某個門檻，卻未通過另一個門檻，因此「失敗」不一定表示這組顏色無法使用，而是表示其比率低於該特定類別的最低值。如果您所需的類別顯示 Fail，請變更前景色或背景色，再次執行檢查，並確認替換後的顏色組已達到相應徽章的標準。進行最終驗證時，請將顯示的比率和徽章作為結果紀錄，然後確認設計中實際算繪的正是這兩種顏色。
重要的區別在於數值比率與符合性徽章。比率可告訴您兩種顏色之間的亮度差異，而徽章則可告訴您該數值是否達到特定 WCAG 要求的標準。由於這些要求取決於文字大小、粗細，以及該組顏色用於文字或非文字元件，因此最終解讀必須符合顏色的實際用途。
對比度檢查結果代表什麼
對比度比率會衡量較亮與較暗顏色之間的相對亮度。相同顏色會產生 1:1 的比率，而純黑搭配純白則會產生最大比率 21:1。較高的比率通常代表較大的亮度差異，但該比率並不會衡量可讀性的所有層面。它不會描述字體、字距、文字大小、文字下方的影像細節，也不會說明顏色是否是傳達含義的唯一方式。
檢查器會使用 WCAG 2.x 指定的對比度計算方式。每個 sRGB 色道都會轉換為線性光，再以紅色 0.2126、綠色 0.7152 和藍色 0.0722 的權重將各色道組合成相對亮度。最終比率的計算公式為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 代表較亮的顏色，L2 代表較暗的顏色。因此，顯示的數字是對該組顏色的精確比較，而不是依據兩種顏色看起來有多不同所做出的估計。
兩個輸入項的順序不會改變比率。交換前景色與背景色會產生相同的數值結果，因為亮度對比度是這組顏色的特性。即使如此，調整順序仍有助於確認您輸入的是預期的文字與背景顏色，但無法修正錯誤的顏色值。
將比率與官方門檻配對
請將顯示的比率與符合您內容的列進行比較。某項結果可能通過一列，卻未通過另一列，因此請勿依賴「良好對比度」的一般概念，而應使用一般文字、大型文字或非文字元素的精確要求。
| 內容或元件 | WCAG 目標 | 最低對比度比率 |
|---|---|---|
| 一般文字 | AA | 4.5:1 |
| 大型文字 | AA | 3:1 |
| 一般文字 | AAA | 7:1 |
| 大型文字 | AAA | 4.5:1 |
| UI 元件、圖示和圖形物件 | 非文字對比度 | 3:1 |
如需了解最低對比度要求背後的官方說明，請參閱 W3C 的WCAG 2.1 最低對比度指引。請記住，非文字規則與 AA 和 AAA 文字門檻是分開的。焦點指示器、表單欄位邊框、圖示或圖形物件應依 3:1 要求評估，而不是依一般文字門檻評估。
執行並驗證色彩對比度檢查
請使用最終介面中會出現的同一組顏色。這個過程很快，但檢查正確的顏色組合及解讀正確的徽章，才是決定結果是否有用的關鍵。
- 開啟色彩對比度檢查器。檢查器會在瀏覽器中執行，因此您不必將色盤值傳送到伺服器即可測試顏色。
- 設定前景文字顏色。請使用顏色選擇器或輸入十六進位值，例如 #111111。請確保此值代表最終文字顏色，而不是近似值。
- 設定背景顏色。請使用選擇器或輸入另一個十六進位值，例如 #ffffff。請使用文字背後的實際背景，包括任何會改變可見顏色的不透明覆蓋層。
- 讀取確切的對比度比率。請記下以比率形式顯示的數字，例如 4.5:1。這是依您輸入的顏色組計算出的結果。
- 讀取 AA 和 AAA 通過或失敗徽章。請查看適用於一般文字、大型文字或非文字要求的徽章。同一組顏色可能通過一個類別，卻未通過另一個類別。
- 如果所需徽章顯示 Fail，請調整顏色。變更前景或背景值，等待結果更新，並檢查新的比率與徽章，直到所需類別通過為止。
- 再次確認最終顏色組。請使用設計中實際採用的確切顏色重複檢查，並保留最終比率與符合性結果以供紀錄。
請勿將接近的數字解讀為通過。例如，比率低於 4.5:1 時，即使非常接近 4.5:1，也不符合 AA 一般文字要求。顯示的結果與適用的徽章才是決定性的比較依據。
依內容類型解讀通過與失敗
對於內文、表單標籤和其他一般大小的文字，請使用 4.5:1 的 AA 門檻。如果您也會依 AAA 進行檢查，一般文字則需要 7:1。通過 AA 的顏色組仍可能未通過 AAA，因為 AAA 採用較嚴格的目標；這項差異屬於預期情況，並非檢查器發生錯誤。
大型文字可使用較低的門檻，因為較粗或較重的筆畫通常更容易區分。WCAG 將大型文字定義為一般粗細至少 18 pt 或 24 px，粗體則至少 14 pt 或約 18.66 px。AA 最低值為 3:1，AAA 最低值為 4.5:1。使用大型文字徽章前，請確認實際字體大小與粗細；略低於定義尺寸的標題應依一般文字評估。
對於按鈕邊框、焦點指示器、圖示、表單欄位邊框或其他圖形物件，請使用獨立的 3:1 非文字門檻。當同一組顏色也用於圖形元素時，非文字徽章會獨立確認該項比較。達到 3:1 但未達 4.5:1 的顏色組，會通過非文字測試，但未通過大型文字的 AAA。請依各項結果實際扮演的角色進行評估。
修正顯示 Fail 的結果
請先找出未通過的徽章。如果一般文字未通過 AA，表示目前這組顏色所需的亮度差異高於目前比率所提供的差異。請將顏色朝更大的差異調整，例如在淺色背景上使用較深的文字顏色，或在深色背景上使用較淺的文字顏色，然後重新執行檢查。每次只變更一個值，觀察更新後的比率，並在達到所需門檻時停止。保持另一個顏色不變，有助於了解哪項變更影響了結果。
請勿假設兩種肉眼可辨不同的色相就會通過。比率衡量的是亮度，而不是色相。紅色與綠色的搭配在亮度 level過於相近時，仍可能未通過。因此，請避免將顏色當成傳達錯誤、狀態、選取或指示的唯一方式。請加入文字標籤、圖示、底線或其他可見提示，使含義不必仰賴僅憑區分色相來傳達。
通過 AA 是最低目標，而不是上限。如果設計條件允許，以 AAA 為目標可為更廣泛的受眾提供更舒適的差異。如果變更品牌色彩並不實用，請測試接近且能在達到所需徽章標準的同時保留預期色盤的前景色或背景色。檢查器會進行精確比較，因此您可以依據顯示的比率，而不只是主觀的明亮程度來做決定。
在實際情境中確認最終結果
即使檢查器結果正確，仍須符合使用這些顏色的介面。由於檢查器會評估您輸入的兩種顏色，因此請另外檢查最終 CSS、主題值或設計權杖在 hover、focus、error、disabled、selected 和 placeholder 狀態下的設定。每當某個狀態變更文字或其背景時，請再次檢查這組顏色。預設狀態通過，並不代表該元件中的每個互動狀態都符合要求。
漸層、半透明覆蓋層和置於影像上的文字需要格外注意，因為文字下方的實際背景可能會變化。請針對字母可能所在位置中最亮與最暗的點進行測試。占位文字、停用狀態和細窄的裝飾性字體也常需要再次檢查。如果覆蓋層會改變可見的背景顏色，請使用該實際顏色，而不是不可見圖層的顏色。
最後，請確認您儲存的結果與已部署的顏色相符，並已記錄比率、相關內容類別，以及通過或失敗徽章。如此即可清楚回答「這組顏色是否通過？」，而無須依賴視覺記憶。這也能讓日後變更色盤時更容易稽核，因為每組修訂後的前景與背景都能再次依相同的 WCAG 門檻進行檢查。
相關閱讀：選擇 WCAG 色彩對比度檢查的正確方式。
相關閱讀：從影像套用平均色彩的最佳方式。