WCAG 2.x 將色彩對比定義為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較淺顏色的相對亮度，L2 是較深顏色的相對亮度，產生的比例從 1:1（完全沒有對比）到 21:1（純黑對純白）不等。對 CSS 作業而言，這個數字是最重要的可存取性量測指標，因為它能告訴你本文、按鈕標籤、錯誤訊息和表單欄位對最需要它們的讀者來說是否清晰易讀。Color Contrast Checker 會依照 W3C 規範計算該比例：將每個 sRGB 通道線性化，然後使用紅色 0.2126、綠色 0.7152、藍色 0.0722 的權重將三個通道結合成相對亮度，再代入上述公式。同一個數字同時影響日常可讀性與法規遵循，因此在上線前驗證它能同時避免尷尬的 bug 和稽核缺失。
WCAG 對比比例實際量測的內容
公式看起來很簡潔，但兩側背後的數學運算十分精確。每個顏色通道會先從其 8 位元值正規化到 0–1 的範圍，然後進行線性化，讓數學能反映人眼對光的反應。若正規化後的通道值小於或等於 0.03928，則除以 12.92；否則在加上小偏移量後取 2.4 次方。三個線性通道接著以紅色 0.2126、綠色 0.7152、藍色 0.0722 的係數加權，呼應眼睛對綠色波長較高的敏感度。加總後的結果稱為相對亮度，這個數字會代入對比公式中。
一個簡單的端對端範例能讓這點更具體。純白色 (#ffffff) 在每個通道上的線性值為 1.0，因此其亮度 L = 0.2126 × 1 + 0.7152 × 1 + 0.0722 × 1 = 1.0。純黑色 (#000000) 在每個通道上的值為 0，因此 L = 0。兩者的對比比例因此為 (1.0 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21.0，這是可能的最大值，也是檢查工具會顯示的上限。兩個相同的中灰色值會得到 L1 = L2，比率為 1.0，也就是下限。
這對 CSS 程式碼很重要，因為比例只取決於兩個顏色值，與哪個是文字、哪個是背景無關。在樣式表中交換前景與背景並不會改變比例。這個數字是顏色配對本身的屬性，這代表無論你在 color: 或 background-color: 設定值，檢查工具輸出的結果都適用。
為什麼 CSS 顏色選擇需要對比測試
CSS 中的對比並非純粹美觀問題。《美國身心障礙者法案》(ADA) 在美國境內經常適用於網站，Section 508 強制聯邦機構的無障礙要求，歐洲標準 EN 301 549 則直接引用 WCAG 規範公共部門網站。一份帶著不良對比的樣式表是合規風險，而非微小的設計選擇。除了法律層面，對比正是讓本文、按鈕標籤和錯誤訊息對依賴它們的讀者保持可讀的關鍵，包括數以百萬計在低視力、白內障或陽光下使用廉價螢幕閱讀的人，以及佔有相當比例的某種色覺缺陷使用者。
CSS 讓人輕易就能引入對比問題。新的主題顏色、較深的 hover 狀態、聚焦表單欄位上的細微邊框，或在設計中看似可讀的灰色 placeholder，都可能在執行階段悄悄失敗。Color Contrast Checker 會在上線前捕捉這些問題，因為它會一次回傳每個 WCAG 等級的明確通過或失敗徽章：AA 標準文字、AA 加大文字、AAA 標準文字、AAA 加大文字，以及針對 UI 元件和圖形物件的 3:1 非文字規則。
使用檢查工具測試顏色配對
這是在任何 CSS 顏色組合進入樣式表前進行驗證的核心工作流程。
- 在瀏覽器中開啟 Color Contrast Checker。
- 使用色彩選擇器設定前景（文字）顏色，或直接輸入十六進位值 — 例如 #111111。
- 用同樣方式設定背景顏色；#ffffff 是多數 CSS reset 中使用的標準白色。
- 讀取螢幕上顯示的對比比例，以及標準文字、加大文字和 UI 元件的 AA 與 AAA 通過／失敗徽章。
- 調整任一顏色直到徽章顯示你需要等級，然後將驗證過的十六進位值複製到樣式表中。
由於一切都在瀏覽器本地端執行，你可以在不上傳任何資料到伺服器的前提下，私下測試品牌色板和設計 token。
在 CSS 程式碼中套用結果
一旦你擁有通過的配對，它在 CSS 中的落地方式也很重要。一個典型的有效配對可能是近乎黑色的前景 #1a1a1a 搭配白色背景，獲得遠高於 15:1 的分數，輕鬆通過標準文字的 AAA 等級。樣式表片段可能會在 body 元素上設定 color: #1a1a1a; 和 background: #ffffff;。任何從通過的檢查工具輸出的值都可以直接放進樣式表、自訂屬性或設計 token，無需再進行運算。
有幾個 CSS 特有的模式值得注意。首先，按鈕和連結狀態通常需要獨立的配對：白色上的預設狀態、較深背景上的 hover 狀態，以及帶有可見外框的 focus 狀態。每組配對都需要各自的對比檢查。其次，自訂屬性（CSS 變數）讓你定義一次顏色後重複使用，但對比數字只有在實際渲染 DOM 中出現的配對下才有意義。如果 --text-color 在某個段落與 --surface-color 配對，在另一處與 --bg-color 配對，兩種配對都必須通過。
對於較大的文字，WCAG 放寬了門檻，因為較粗的字母更容易閱讀。同一組在白底上的深色配對若分數高於 15:1，會在本文尺寸通過 AA、在大尺寸通過 AAA；Color Contrast Checker 會同時顯示這兩種通過徽章，讓你一眼看出該配對在哪個尺寸下通過哪個等級。這種區別讓你僅在對比輕鬆超過 7:1 的位置使用較小的本文字級。
WCAG 門檻一覽
以下是工具所對照的官方 WCAG 2.x 對比比例，直接取自 W3C 規範：
| 內容類型 | AA（最低） | AAA（強化） |
|---|---|---|
| 標準文字 | 4.5 : 1 | 7 : 1 |
| 加大文字（至少 18pt 標準或 14pt 粗體） | 3 : 1 | 4.5 : 1 |
| UI 元件與圖形物件 | 3 : 1 | — |
通過 AA 是地板，而非天花板。檢查工具會回報精確的小數比例，因此若你以 AAA 為目標，可以看出自己擁有多少餘裕。分數 7.4:1 的配對能通過標準文字的 AAA，而 6.9:1 僅通過 AA。這微小的差距，就是對最廣泛受眾舒適閱讀與勉強通過之間的差別。
破壞對比的常見 CSS 顏色陷阱
對比比例衡量的是亮度而非色相，因此兩個色相截然不同但亮度相近的顏色（例如紅配綠）仍可能失敗，即使對某些觀察者而言它們看起來差異明顯。這也是為什麼不建議僅依賴顏色來傳達意義：請將顏色變化搭配文字標籤、圖示或底線使用。
有幾種 CSS 模式會隱藏對比失敗，特別值得注意：
- 漸層與半透明覆蓋：有效背景會在元素上變化。請對字母可能落於的明暗兩端進行測試。
- 圖片上的文字：背景逐像素變動。避免將文字直接放在複雜的圖片上，或在文字下方加上實心面板並測試該面板。
- Placeholder 文字：瀏覽器預設的 placeholder 顏色通常過淡。請檢查 ::placeholder 與輸入欄位背景的對比。
- 停用狀態：瀏覽器常以低透明度呈現停用控制項。請檢查實際渲染後的顏色，而非原始 token。
- Focus 指示器：依據 WCAG 非文字規則，UI 元件需要 2px、3:1 的外框。請將 focus-ring 顏色對淺色與深色表面都進行檢查。
建立驗證工作流程
達成一致無障礙 CSS 的最快路徑，是在每組新顏色配對進入設計系統時立即測試。實用的工作流程如下：將每個品牌色與中性色定義為 CSS 自訂屬性，列出與之配對的表面色，然後將每組配對送入檢查工具。任何未達到你所設等級的配對，都會在進入樣式表前進行調整。根據 W3C 的 Contrast (Minimum) understanding document，本工具所使用的公式與門檻是所有現代無障礙標準引用的版本，因此你取得的數字會與稽核員和自動化工具回報的結果一致。
將驗證過的配對儲存為變數，意味著它們能安心地重複使用，日後任何主題變更只需要重新檢查實際變動的配對。如果你在 Chrome 中建立互動原型或元件，也可以在 Chrome 中檢查色彩對比的可存取性，在建構階段而非建置之後就發現問題。
若想更深入了解，請參閱 Gradient Generator: Drag Stops, Preview, Copy CSS。