WCAG 色彩對比比率是一個介於 1:1 與 21:1 之間的數值，用來測量兩種色彩之間的亮度差異，計算公式為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較淺色彩的相對亮度，L2 則是較深色彩的相對亮度。若要檢查網站設計的色彩對比，設計師與開發人員會將前景文字色彩與其背景色彩進行比對，並確認所得比率符合所公布的《網頁內容可及性指引》門檻。Level AA 要求一般文字至少達到 4.5:1、大型文字達到 3:1;而 Level AAA 則將標準提高至一般文字 7:1、大型文字 4.5:1。無論您稽核的是行銷著陸頁、SaaS 儀表板，還是部落格模板，運算方式都完全相同，因為公式衡量的是色彩配對本身，而不是文件類型。不同情境之間改變的是哪些色彩組合最為關鍵:品牌主色按鈕、內文、錯誤狀態、佔位符文字以及表單標籤，各自在網站整體可讀性評分中扮演不同角色。
WCAG 對比比率實際衡量的是什麼
對比比率是色彩配對本身的屬性，而不是哪個色彩是文字、哪個是背景。由於公式一律以較淺色彩的亮度除以較深色彩的亮度，交換前景與背景會得到完全相同的數字。當設計師在按鈕、警示與提示框中以任一方向重複使用同一組色票時，這種對稱性就顯得格外重要。
在這個單一數字背後，存在一連串固定的轉換步驟。每個 sRGB 色頻通道會依 WCAG 指定的分段函式，從帶 Gamma 編碼的位元組 (0-255) 轉換為線性光:若通道值除以 255 的結果小於或等於 0.04045，則線性值為該比例除以 12.92;否則在加上小量偏移後，將其取 2.4 次方。接著，線性通道依紅、綠、藍權重 0.2126、0.7152、0.0722 加權，以產生相對亮度。兩個亮度值再加上兩側各 0.05 的常數以避免除以零，即可得出最終比率。
比率永遠介於 1:1(代表完全相同的色彩)與 21:1(代表純黑 (#000000) 對純白 (#ffffff)) 之間。完整的範例會逐步走完整個公式。白 (#ffffff) 的 sRGB 各通道皆為 255，線性化後為 1.0，得出 L = 0.2126 + 0.7152 + 0.0722 = 1.000。十六進位 #111111 的 sRGB 各通道皆為 17;除以 255 得到 0.0667，高於 0.04045 門檻，因此線性值為 ((0.0667 + 0.055) / 1.055) 的 2.4 次方，約為 0.1153 的 2.4 次方，即約 0.00562。由於兩側通道相等，L = 0.00562。比率即為 (1.000 + 0.05) / (0.00562 + 0.05) = 1.05 / 0.05562，計算結果約為 18.88:1。這遠遠超過所有 WCAG 門檻。
由於運算完全取決於兩種色彩，無論設計師在哪裡需要，都能執行相同的計算:無論是設計系統 token 檔、正式環境的樣式表，或是瀏覽器中的快速抽查皆然。色彩對比檢查工具採用完全相同的公式，並同時顯示結果比率以及對應每個門檻的通過或失敗標記。
WCAG AA 與 AAA 門檻一覽
《網頁內容可及性指引》依據色彩組合所達到的比率，將其劃分為不同等級。在多數司法管轄區中，AA 是法定最低標準;AAA 則是內文內容在不損害設計的前提下所追求的建議目標。
| 符合性等級 | 一般文字 | 大型文字 | UI 元件與圖形 |
|---|---|---|---|
| WCAG AA | 4.5:1 以上 | 3:1 以上 | 3:1 以上 |
| WCAG AAA | 7:1 以上 | 4.5:1 以上 | 未指定;適用 AA |
本表中的「大型文字」，依據 W3C 於 WCAG 2.1 對比(最低標準) 中的定義，係指一般字重下至少 18 級(約 24 CSS 像素)，或粗體時至少 14 級(約 18.66 像素)。字體越粗、越大，在較低對比下越易閱讀，這正是它們獲得較寬鬆門檻的原因。
UI 元件與圖形涵蓋按鈕邊框、表單欄位外框、焦點指示器、圖示，以及需要在相鄰色彩中清晰可辨(但並非文字)的圖表元素。3:1 的比率標準，即使在該元件為互動式(而不僅是裝飾性)時亦適用。以色彩編碼資料的圖表、資訊圖，以及任何自訂控制項皆屬此規則的涵蓋範圍。
如何在網站上檢查色彩對比
最快的工作流程，是將樣式表中既有的色彩，與一個能即時執行 WCAG 公式的瀏覽器工具結合使用。色彩對比檢查工具接受兩個十六進位值，並於單一畫面中顯示所有門檻結果。
- 從設計系統中挑選前景(文字)色彩。使用選色器或直接輸入十六進位值，例如 #111111。
- 以相同方式挑選背景色彩，例如 #ffffff。
- 讀取所產生的對比比率，以及一般文字、大型文字與 UI 元件對應的 AA 與 AAA 通過或失敗標記。
- 若任一標記未通過，請調整其中一種色彩後重新檢查，直到所需的等級通過為止。
- 將最終配對記錄於設計 token 或元件規格中，以免日後更新時造成比率退步。
對於以 CSS 為主要工作環境的團隊，相同的工作流程可套用於任何 token 檔。直接從瀏覽器開發者工具讀取實際呈現的配對色彩，能保留正式使用者實際看到的精確色彩值(含透明度)。在程式碼編輯器中工作的設計師，通常會從樣式表複製十六進位值並貼入工具中，以反覆調整按鈕色彩——這正是 專為 CSS 設計、通過 WCAG 比率的指南 所涵蓋的做法。
在任何網站上都值得測試的色彩組合
大多數網站僅依賴一小組色彩配對。少數幾組配對就能涵蓋大部分頁面，而這些正是最值得優先檢查的項目。
- 頁面背景上的內文。這是任何網站上使用頻率最高的配對。黑色配白色，以及極深灰色配白色是常見的預設值;但淺灰色內文配白色背景，則是常見的失敗點。
- 主要與次要按鈕。品牌主色填色上的白色文字，以及 hover 與 disabled 狀態，需要分別檢查，因為填色在 hover 時往往會變淺或降低飽和度。
- 表單標籤與輔助說明文字。佔位符文字是惡名昭彰的失敗點，因為設計師常將其調成在白底上無法通過 AA 的淺灰色。
- 連結色彩。帶底線的連結擁有額外的視覺線索，因此能容忍較低對比;但僅以色彩區分的行內文字連結，則必須達到完整的門檻。
- 錯誤與成功狀態。紅色錯誤文字與綠色成功文字，在白色或淺色背景上經常無法達標，因為這些色相的亮度天生偏低。
對這些配對進行一次性檢查並記錄結果，可避免品牌色彩在季度更新中微幅調整數個百分比時所產生的緩慢偏移。將已驗證的十六進位值收錄於設計 token 檔中，意味著未來的程式碼變更可與已知的良好基準進行差異比對。
對比不足之處:需要再次確認的配對
對比比率衡量的是亮度，而不是色相。兩個色相差異極大、但亮度相近的色彩仍可能失敗:經典的紅配綠就是教科書級的例子，雖然對許多觀看者而言兩者看起來截然不同，但比率卻低於 4.5:1。這也正是指引告誡我們不應僅以色彩來傳達資訊的原因——應搭配文字標籤、圖示或底線，使資訊在對比處於邊緣時仍能傳達無誤。
漸層、半透明疊加層，以及置於圖片上的文字，因其有效背景會在元素各處產生變化，故比實心背景更為棘手。一個安全的工作流程，是針對字母可能落於的最淺與最深點進行配對測試，並以最差情況作為約束門檻。略過此步驟，正是 避免對比錯誤 相關指南中最常見的陷阱之一。
佔位符文字、disabled 按鈕狀態，以及纖細的裝飾性字型，也是常見的失敗點。設計師常將佔位符文字調成低對比的灰色，以模擬原生輸入框的空欄位感覺;然而這些灰色在白底上經常無法通過 AA。Disabled 按鈕常使用去飽和度的品牌填色，使其讀來像是裝飾而非功能，而其上的文字隨即低於門檻。
對比比率並非可及性的全部。它涵蓋了視力較低的使用者或在強烈陽光下的閱讀需求，並透過確保足夠的亮度差異，協助有色覺缺陷的使用者;但它並不檢查語意 HTML、聚焦順序、鍵盤操作，或螢幕閱讀器的行為。完整的稽核應將對比檢查與結構化標記，以及在適當處使用的 ARIA 結合，並讓同一組配對經歷元件實際出現的每一種狀態。