WCAG 色彩對比錯誤通常來自未依實際文字大小解讀比值、混淆 AA 與 AAA 門檻，或僅測試單一配對，卻未考慮設計中以相同色彩擔任多種角色。對比比值本身是依官方 WCAG 2.x 公式計算：每個色彩頻道都會從 sRGB 轉換為線性光，再以紅 0.2126、綠 0.7152、藍 0.0722 的權重合併為相對亮度；對比比值為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較淺色彩的亮度，L2 是較深色彩的亮度——這正是妥善建構的 WCAG 對比檢查器所計算的內容，因此數學運算本身很少是錯誤來源。誤讀通過或未通過的標記、將錯誤門檻套用至錯誤的文字大小、只檢查內文而忽略大型文字與 UI 元件，或忘記停用狀態與預 placeholder 文字也需要另行驗證，這些都是讓原本通過的比值在實際環境中變成失敗的常見原因。
為何錯誤會逃過 WCAG 對比檢查器
對比檢查器只負責一項特定工作——測量兩種色彩之間的亮度差距，並依其跨越的 WCAG 門檻標示該差距。量測前後的所有工作都是設計師的責任，而大多數對比錯誤都出現在周圍流程，而非工具本身。一旦了解比值能與不能描述的內容，就更容易在錯誤進入正式產品前察覺它們。
錯誤會逃過檢查的第一個原因，是「對比通過」只是特定組合的簡稱：將特定符合性層級（AA 或 AAA）套用至特定文字大小（一般或大型）。大多數檢查器會同時顯示四或五個獨立的通過或未通過標記。標題看似通過「大型文字」標記，卻未通過「一般文字」標記——這表示相同的色彩組合無法在未進一步測試的情況下同時用於這兩種角色。只截取單一綠色標記的審閱者，實際上等同於從數項規則中挑選一條，並忽略其餘規則。
第二個原因是對比具有對稱性。WCAG 公式一律以較深色彩的亮度除以較淺色彩的亮度，因此交換前景與背景會得到完全相同的比值。當你忘記在選色器中該將哪種色彩放在哪裡時，這項特性很有幫助；但這也意味著檢查器無法察覺樣式表中的角色互換——如果你原本想使用深色按鈕上的白色文字，實際交付的卻是深色按鈕上的深色文字，那麼對你測試的合法配對而言，比值仍然合格，即使實際呈現的介面無法閱讀。
如何使用檢查器驗證色彩配對
- 開啟色彩對比檢查器，使用選色器或輸入類似 #111111 的十六進位值，設定前景（文字）色彩。
- 以相同方式設定背景色彩——例如白色頁面使用 #ffffff。
- 讀取工具傳回的對比比值。它一定會介於 1:1（相同色彩）與 21:1（純黑搭配純白）之間。
- 讀取一般文字、大型文字與 UI 元件非文字對比規則的 AA 與 AAA 通過或未通過標記。
- 調整前景或背景，直到你在意的每個標記，對於專案要求的符合性層級都顯示「通過」。
檢查器顯示「通過」後，仍會讓設計失敗的錯誤
即使每個標記都變成綠色，某些設計決策仍可能重新引入檢查器原本要防止的問題。以下是審閱時最常需要留意的情況。
- 將 AA 當成上限。AA 是下限，而非目標。如果一般文字能以 7:1 達到 AAA，或大型文字能以 4.5:1 達到 AAA，內文就能讓更廣泛的讀者舒適閱讀。將 AA 視為絕不低於的最低標準，並在設計允許的情況下朝 AAA 努力。
- 忘記「大型文字」的實際定義。WCAG 將大型文字定義為至少 18pt（24px）的正常字重，或粗體至少 14pt（約 18.66px）。任何更小的文字都必須符合一般文字門檻，即使它是視覺上醒目的區段標籤。16px 標題即使通過 3:1 大型文字標記，對於 4.5:1 的一般文字規則而言仍屬失敗。
- 只檢查最常用的配對。多數設計系統至少會同時使用三或四種文字搭配背景的組合：主要文字、次要文字、連結文字、錯誤文字、停用文字，以及深色區段中的反白文字。每個配對都需要各自驗證，即使四個十六進位值在色輪上彼此相鄰。
- 略過停用、預 placeholder 與聚焦狀態。這些狀態常使用不透明度或基礎色彩的較淺版本，即使作用中狀態通過，對比仍可能低於門檻。應將它們視為各自的前景搭配背景配對來測試，不要假設它們會繼承既有設定。
- 信任置於影像或漸層之上的文字。對比公式假設背景均勻。當色彩置於照片、影片影格或 CSS 漸層之上時，使用者捲動畫面便會使實際背景改變。應測試任何字母可能落入的最淺與最深位置，若配對在其中任一極端情況下失敗，就加上實色遮罩。
WCAG 門檻概覽
門檻本身很少變動，因此調整色彩時，讓它們保持可見會很有幫助。下表摘要整理 W3C 公布的規定。
| 符合性層級 | 一般文字 | 大型文字（≥18pt 或 ≥14pt 粗體） | UI 元件與圖形 |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | —（沒有獨立的 AAA 門檻） |
非文字規則（3:1）涵蓋識別 UI 元件與圖形物件所需的視覺邊界，例如表單欄位邊框、焦點指示器與圖示，這是依 W3C 公布的 WCAG 2.1 最低對比指引。如果檢查器中只看到兩個標記，你可能漏掉了這項規則。
作為合理性檢查，21:1 上限背後的數學很直接。白色 RGB (255,255,255) 會正規化為 (1,1,1)，每個頻道線性化後都是 1，亮度總和為 0.2126 + 0.7152 + 0.0722 = 1.0。黑色為 (0,0,0)，亮度為 0。接著公式得出 (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21——這證實了上限，也再次確認：任何對比工具若對真實配對回傳超過 21:1 的結果，其校準必有誤。
對比比值未涵蓋的範圍
對比只測量一項事物：兩種色彩之間的亮度差。它刻意忽略色相、飽和度，以及區辨色彩時的視覺體驗。兩種差異很大的色相——例如高飽和度的紅色與高飽和度的綠色——如果明度接近，仍可能未通過對比比值。因此，不能以此比值取代採用冗餘線索的設計：在彩色狀態點旁加上文字標籤、在連結色彩旁加上圖示，以及在超文字旁加上底線。W3C 明確警告不要僅依賴色彩傳達意義，而這也有充分理由。
公式還假設背景平坦且不透明。半透明覆蓋層、陰影與發光效果都會使這項假設變得模糊。使用者實際使用頁面時面臨的廉价螢幕、眩光與老化眼睛，也會造成同樣的情況。足夠的亮度對比，是讓低視力讀者、在陽光下使用手機的人，或具有各種色覺差異的人，都能清楚閱讀內文、按鈕與錯誤訊息的主要手段；它也是美國等司法管轄區中與無障礙法律義務相關的主要手段，在這些地區，ADA 與 Section 508 的訴訟經常引用對比不足；在歐盟，EN 301 549 則直接為公共部門網站參考 WCAG。
避免所有這些對比錯誤最簡單的方法，就是採用機械化流程：開啟色彩對比檢查器，輸入你實際交付的前景與背景十六進位值（而不是心情板中的數值），讀取工具顯示的每個標記，並持續調整，直到所需的文字大小與元件類型都能通過所需層級。所有作業都在瀏覽器本機執行，因此你可以在單次工作階段中反覆檢查整個品牌色盤或設計 token 檔案，而不需上傳任何內容。
相關閱讀：常見 CSS 三角形產生錯誤檢查。