先分類元素,再選擇適當的對比檢查方式:WCAG AA 要求一般文字至少達到 4.5:1、大型文字達到 3:1,非文字 UI 元件與圖形則達到 3:1。 當你知道元素是文字或圖形元件、文字是否屬於大型,以及背景是否為單一固定顏色後,就能選擇正確的門檻,以及使用 WCAG 對比檢查工具最有效的方式。
正確做法不是尋找一個通用的通過或失敗數字。本文段落、大型標題與輸入框邊界各自依不同的要求進行評估,而單純的色塊可能無法代表疊放在影像上的文字。AA 是應達到的基本標準,AAA 則是更嚴格的文字目標;變更設計前,請先決定適用哪個等級。

從元素與目標開始
先從元素的功能及其算繪文字大小著手。本文內容、表單說明與一般標籤通常屬於一般文字。當標題或宣傳文字至少為 18pt 的一般字體,或至少為 14pt 的粗體時,即符合大型文字的定義。如果大小接近界線,依文字大小選擇正確的 WCAG 門檻可協助你在測試前完成分類。
| 內容類別 | WCAG AA 最低標準 | WCAG AAA 最低標準 |
|---|---|---|
| 一般文字 | 4.5:1 | 7:1 |
| 大型文字 | 3:1 | 4.5:1 |
| UI 元件與圖形物件 | 3:1 | 無獨立的 AAA 門檻 |
控制項內的文字標籤仍屬於文字,因此應依其算繪大小套用門檻。獨立的非文字規則適用於控制項邊界、圖示、表單欄位邊框與焦點指示器等元素。這些類別遵循 WCAG 2.x,摘要如 W3C 的 WCAG 2.1 對比(最低限度)指南所述。
依背景選擇檢查方式
分類元素後,請選擇符合其色彩算繪方式的檢查方法。單純的文字與背景配對可以直接檢查。漸層、影像或透明圖層則需要具情境感知能力的方式,因為有效背景可能會從元素的一部分變換至另一部分。
| 算繪情境 | 最佳檢查方式 | 要評估的色彩 |
|---|---|---|
| 純色背景上的文字 | 執行一次直接的前景與背景檢查。 | 實際算繪的文字與背景色彩。 |
| 純色背景上的大型文字 | 執行相同的色彩配對檢查,再套用大型文字門檻。 | 相同的前景與背景配對。 |
| 漸層或影像上的文字 | 分別檢查有效背景的極值。 | 前景搭配相關背景中最淺與最深的色彩。 |
| 半透明文字或背景圖層 | 先確定實際算繪後的有效色彩,再進行檢查。 | 可見前景與產生的背景色彩。 |
| 圖示、邊框或焦點指示器 | 使用非文字比較方式。 | 圖形色彩與鄰接的背景色彩。 |
檢查工具會將一種前景色彩與一種背景色彩進行比較。因此,面對變動背景時,分別執行固定色彩檢查,會比輸入單一代表色並假設其涵蓋整個元素更可靠。
在檢查工具中檢查純色配對
若背景為單一色彩,請依照以下固定順序使用此處的色彩對比檢查工具:
- 開啟色彩對比檢查工具,使用色彩選擇器設定前景或文字色彩,或輸入類似 #111111 的十六進位值。
- 以相同方式設定背景色彩,使用色彩選擇器或輸入類似 #ffffff 的十六進位值。
- 讀取確切的對比比例,以及檢查工具所顯示一般文字、大型文字與 UI 門檻的 AA 或 AAA 通過/失敗標記。
- 將結果與先前選擇的類別及符合性目標比較,不要將每個標記都視為最終答案。
- 如果配對未達到目標,請調整前景或背景色彩並再次檢查,直到符合所需等級。
因為運算在你的瀏覽器本機執行,所以不必上傳即可檢查品牌色彩與設計 token。結果只適用於你輸入的確切配對,因此每種不同的文字與背景組合都要重複此工作流程。
解讀比例與通過/失敗標記
請將比例視為色彩配對的屬性,而不是色彩輸入順序的屬性。WCAG 會將較亮色彩的相對亮度除以較暗色彩的相對亮度,因此交換前景與背景會得到相同結果。這種對稱性便於比較,但你仍須取得算繪頁面中的正確配對。
公式為 (L1 + 0.05) / (L2 + 0.05),其中 L1 是較亮的色彩,L2 是較暗的色彩。檢查工具會依 WCAG 2.x 的通道權重,從 sRGB 推導相對亮度,然後傳回從相同色彩 1:1 到純黑疊純白 21:1 的比例。
請搭配相關標記一起使用數值比例。大型文字通過 AA,並不表示同一配對也能通過一般文字的 AA。如果配對未達所需等級,請調整任一色彩並重新執行運算,不要只依賴視覺判斷。
將變動背景視為不同配對進行測試
對於疊放在漸層、影像或半透明覆蓋層上的文字,先找出文字所在位置的有效色彩。將最淺與最暗的背景點分別與前景進行測試,並檢查文字周圍可能出現的其他組合。某個字母在圖形的某一部分可能清晰可讀,在另一部分卻可能不合格。
檢查工具不會在單次輸入中評估整個變動場景;它會傳回所提供兩種色彩的結果。對於半透明文字或背景,請先確定實際算繪後的有效色彩再輸入。如此能讓手動工作流程符合讀者實際看到的內容,而非設計檔案中呈現的樣貌。
請特別留意預留位置文字、停用狀態、纖細的裝飾文字、欄位邊框、圖示與焦點指示器。每一項都可能扮演不同角色,因此相同背景不代表所需門檻也相同。
一致地檢視色彩組合
若要處理品牌色彩組合或設計 token 程式庫,請將檢查工具作為可重複執行的審查流程,而非一次性的核准作業:
- 列出每個角色,例如本文文字、大型標題、淡化文字、邊框、圖示與焦點指示器。
- 記錄每個角色的前景與背景十六進位值。
- 分類元素,並註明目標是 AA 或 AAA。
- 輸入配對,儲存確切比例與相關通過/失敗結果,並註明是否涉及影像或透明度。
- 每當共用色彩 token 變更時,重新檢查受影響的配對。
由於工具在本機執行,此審查流程可以保持私密。其工作流程要求你提供每個相關色彩配對,而非匯入樣式表或自動掃描頁面,因此審查者也必須記錄算繪情境。
認識結果的限制
對比結果只會回答一個狹窄問題:所提供配對是否達到該門檻?它無法證明整個頁面或元件符合 WCAG,也無法判斷語意、鍵盤操作行為,或每個字元是否與影像保有足夠的視覺區隔。這些問題需要另行審查。
對比衡量的是亮度,而非色相。紅色疊在綠色上,可能在某些檢視者眼中看起來不同,卻仍因明度相近而不合格。絕對不要只以色彩作為訊號:請搭配文字標籤、圖示、底線或其他可見線索。實用的決策順序為分類元素、選擇目標、判定背景是固定或變動、輸入實際色彩、讀取比例與相關標記、必要時進行調整,並記錄情境。每個配對都遵循此順序,就能讓決策可重複執行,而非流於主觀判斷。
若你正在權衡不同選項,使用 WCAG 工具比較色彩對比檢查方式對此有更詳細的說明。