WCAG 對比度檢查工具會測量兩種顏色之間的亮度比，並即時回報在 AA 與 AAA 無障礙等級下通過或未通過。計算方式是將較亮顏色的相對亮度除以較暗顏色的相對亮度，兩者各加上 0.05 的偏移值，結果介於相同顏色的 1:1 與純黑對純白的 21:1 之間。這個單一數字就是所有無障礙標準轉換成通過或未通過門檻的依據，因此同一個對比值會因文字大小與粗細不同，而有不同的判定結果。設計師、開發人員與內容作者之所以會使用對比度檢查工具，是因為美國、歐洲及其他地區的法律架構將這些門檻視為具約束力的要求，而非僅供參考的指引。《美國身心障礙者法案》(ADA)、《第 508 條》、以及歐洲 EN 301 549 標準都引用了 WCAG，這意味著一個未通過檢查工具的品牌配色，可能會像缺少替代文字一樣輕易在稽核中失敗。
對比比值實際測量的是什麼
這個比值並不是測量兩種顏色看起來有多「不同」。它是一項精確的計算，衡量前景反射的光線量相對於背景反射的光線量，並依據人眼在可見光譜中對亮度的感知進行加權。每個顏色通道會先從 sRGB 轉換為線性光，再依據紅色 0.2126、綠色 0.7152、藍色 0.0722 的權重組合成單一的相對亮度值。接著對比比值為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較亮顏色的亮度，L2 是較暗顏色的亮度。這些比例正是 W3C 在 WCAG 2.x 規範中定義的內容，也是對比度檢查工具的結果之所以被視為合規稽核權威依據的原因。
由於亮度對綠色的加權較重，兩個綠色通道相近但紅色與藍色通道差異很大的顏色，仍可能產生較低的對比比值。透過一個計算範例來說明這點。以純紅 (#FF0000) 對純綠 (#00FF00) 為例:
- #FF0000 的相對亮度:0.2126 × 1 + 0.7152 × 0 + 0.0722 × 0 = 0.2126
- #00FF00 的相對亮度:0.2126 × 0 + 0.7152 × 1 + 0.0722 × 0 = 0.7152
- 對比比值:(0.7152 + 0.05) / (0.2126 + 0.05) = 0.7652 / 0.2626 ≈ 2.91:1
這個結果遠低於 AA 一般文字所要求的 4.5:1，這正是對比度檢查工具不可或缺的原因:眼睛看到的是兩個鮮明、截然不同的色相，但數學計算卻顯示它們讀起來像一組低對比的灰底灰字組合。
你需要達到的 WCAG 門檻
WCAG 將對比要求分為三個類別，每個類別各有其最低比值。這些類別之所以存在，是因為較大的文字在較低對比下較易閱讀，而圖示、表單邊框等介面元素不需要與內文具備同樣的可讀性門檻。
| 標準 | 一般文字 | 大型文字 | UI 元件與圖形 |
|---|---|---|---|
| WCAG AA | ≥ 4.5:1 | ≥ 3:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4.5:1 | ≥ 3:1(相同規則) |
WCAG 將大型文字定義為:一般粗細下至少 18 pt(約 24 像素)，粗體時則至少 14 pt(約 18.66 像素)。較大、較粗的字母只需要較少的對比就能保持可讀性，這就是在 AA 等級中，一般文字與大型文字的門檻會從 4.5:1 降至 3:1 的原因。AAA 等級雖然提高了兩種文字尺寸的標準，但並未為 UI 元件新增更嚴格的規則，因為既有的 3:1 非文字對比規則已涵蓋這些項目。
可使用 Color Contrast Checker 等工具，一次比對任何一組顏色與全部四個門檻，並清楚看出你的組合通過了哪些徽章。
三步驟檢查一組顏色配對
- 使用選色器或直接輸入十六進位值(例如 #111111)設定前景(文字)顏色。
- 同樣方式設定背景顏色，例如 #ffffff。
- 讀取對比比值與 AA/AAA 通過或未通過徽章，調整任一顏色直到符合你需要的等級。
這就是完整的工作流程。檢查工具會即時完成運算，因此反覆調整的成本很低:把前景調暗一點、觀察比值上升，直到 AA 一般文字徽章從未通過翻為通過。如果你使用的是設計 token 或 CSS 變數，請直接將十六進位值貼入輸入欄，而不是從色票估算，因為設計師經常會將亮度判斷錯誤一兩個級距，而這正是通過 4.49:1 與稽核失敗之間的差距。
一個實用的工作流程:先以你的品牌色作為文字、白色作為背景，看是否能通過 AA 的 4.5:1;若無法通過，則決定是僅將文字用途的品牌色調暗(保留明亮版本作為背景與強調色)，或是將背景換成較柔和的米白色以維持你的配色。重點是在設計上線前，讓這個取捨變得明確可見。
如何解讀通過與未通過徽章
對比度檢查工具應分別回報每個門檻。一組通過 AA 大型文字 3:1 的配色，仍可能未通過 AA 一般文字 4.5:1;而通過 AA 4.5:1 的配色，仍可能未通過 AAA 7:1。將各徽章一併閱讀、而非將工具視為單一的是/否判定，可以避免最常見的錯誤:以為通過 AA 就代表設計已完全無障礙。
特別留意兩個門檻。首先，UI 元件與圖形:表單欄位邊框、焦點框線、按鈕輪廓與圖示線條，相對於任何相鄰介面都至少需要 3:1。即使按鈕內的文字對比沒問題，一個邊框與背景同色且僅 1 像素寬的按鈕，仍可能在此未通過。其次，大型文字:如果你的標題是 16px 的一般粗細，則視為一般文字，需要 4.5:1 而非 3:1。只有在實際符合 18pt 或 14pt 粗體的定義時，才能將某個元素標記為「大型」;視覺上的醒目程度並不等同於實際定義。
徽章也能透露方向。一組通過大型文字但未通過一般文字的配對，通常表示文字過小、對比過低，或兩者皆是;而解決方法很少只是單純放大字級，因為大部分內文必須在現有尺寸下保持可讀。
為何某些顏色配對會讓你意外
比值是對稱的。將前景與背景顏色對調，數字並不會改變，因為公式永遠是將較亮的亮度除以較暗的亮度。這個特性很適合用於健全性檢查:如果你對調顏色後工具回報不同的比值，代表計算有誤。這也意味著對比是「一組配對」的屬性，而非「設計層級」的屬性。
比值並不測量色相。兩個色相差異極大的顏色，只要亮度值相近仍可能未通過;而兩個色相近的顏色，只要其中一個明顯較暗就能通過。這正是檢查工具不可或缺的原因:單純依賴眼睛，會系統性地漏掉光譜中段的低對比配對，特別是中調灰色、霧感紫色與暖色土色調。傾向信任視覺判斷而非檢查工具的設計師，通常會交出在經校色的螢幕上看起來通過、但在廉價筆電螢幕、刺眼陽光下，或對白內障與低視力讀者而言會失敗的配色。
比值並未涵蓋色覺缺陷。約十二分之一的男性與兩百分之一的女性具有某種形式的色覺缺陷，而通過的亮度比值並不保證例如紅色錯誤訊息能從綠色成功訊息中脫穎而出。請將顏色與文字標籤、圖示或底線搭配使用，讓無法分辨色相的觀眾仍能理解其含義。
正確執行的實用技巧
測試極端值，而非僅測平均值。漸層、半透明覆蓋層與置於圖片上的文字，其背景在元素各處都會有所變動。一個平均值落在通過灰色的漸層，在最亮處仍可能降到 4.5:1 以下，尤其當細筆畫字母線條橫跨該處。請將字母實際可能落在的「最淺」與「最深」顏色，都透過 Color Contrast Checker 跑一次，確保兩者皆通過。
留意容易失敗的熱點。預留文字、停用狀態的表單欄位、細裝飾字型與小型說明文字，都是對比悄悄不及格的地方。預設的預留文字通常比輸入值更淺;停用按鈕的對比也常低於自身背景的 3:1。請逐一明確稽核這些項目;它們很少是因為設計師選了錯誤的顏色而失敗，而是設計系統在出貨時只為「淡化」文字設定單一顏色，卻未檢查該顏色在其出現的每個介面上的表現。若需要更深入的檢查清單，請參考這些 對比度檢查工具的技巧與常見錯誤。
稽核工作保持在本地端。基於瀏覽器的檢查工具完全在你的機器上執行，因此你可以安心地測試品牌配色、設計 token 與尚未核准的一次性顏色組合，而無須上傳任何資料。這使得測試客戶提供的配色、內部色彩系統，以及尚未核准的顏色組合都相當安全。
在能力所及之處以 AAA 為目標。AA 在大多數司法管轄區是法定下限，但 AAA 一般文字 7:1 才能讓最廣泛的讀者舒適閱讀，包括在刺眼陽光下、使用低品質螢幕，以及有老年視力退化困擾的讀者。對於長篇內容、對外公開的登陸頁，以及任何閱讀速度重要的場景，在配色允許的情況下追求 AAA，是以小幅設計變動換來大幅可讀性回報的做法。
若你正在權衡各種選項，從圖片檢查顏色對比:工作流程指南對此有詳細說明。