WCAG 透過一個單一數字定義文字可讀性，稱為對比比率，計算方式為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較淺顏色的相對亮度，L2 則是較深的顏色。要通過 Level AA，普通文字至少需要 4.5:1，大文字需要 3:1；要通過 Level AAA，普通文字至少需要 7:1，大文字需要 4.5:1。非文字對比 — UI 控件、圖示、表單邊框、聚焦環 — 在 WCAG 2.x 下至少需要 3:1。色彩對比檢查工具將這些門檻編碼成清楚的通過或未通過標章，讓你一眼就能看出前景與背景是否符合你目標的等級，並執行 WCAG 規定的運算：每個 sRGB 通道先進行線性化，然後使用 0.2126 紅、0.7152 綠、0.0722 藍的權重組合成相對亮度，最後再計算比率。這為你提供一個可信賴的數字作為設計依據。
WCAG 對比公式的運作方式
背後的數學很簡短，一旦看懂了，那些標章就不再神祕。每個顏色會從其 sRGB 通道值轉換為線性光值：非常暗的通道（0 到 255 範圍中低於 10）直接除以 12.92，較亮的通道則使用 ((c / 255 + 0.055) / 1.055) 的 2.4 次方進行轉換。三個線性通道接著使用官方權重組合成相對亮度 — 紅色 0.2126、綠色 0.7152、藍色 0.0722 — 用以模擬人眼對亮度的權重。比率就是較淺的亮度加上 0.05，再除以較深的亮度加上 0.05，這保證了數值會落在 1:1（相同顏色）到 21:1（純黑對純白）之間。
讓我逐步示範一組配對，說明公式如何運作。以 #767676 作為前景，#ffffff 作為背景 — 這是設計師在白色頁面上需要柔和灰色時常用的組合。
步驟 1 — 將灰色線性化。紅、綠、藍通道都是 118，所以 118 / 255 ≈ 0.463，然後 ((0.463 + 0.055) / 1.055)^2.4 ≈ 0.181。白色背景在每個通道線性化後都是 1.0。
步驟 2 — 相對亮度。0.181 × (0.2126 + 0.7152 + 0.0722) ≈ 0.181，因為三個權重加總為 1。
步驟 3 — 對比比率。(1 + 0.05) / (0.181 + 0.05) = 1.05 / 0.231 ≈ 4.54:1。
這只比普通文字 4.5:1 的 AA 門檻高出一點點，這正是為什麼 #767676 被稱為在白色上不會失敗的最淺灰色。更深入的說明請參考 W3C 對比下限說明，而這些門檻本身對應到一個清楚的參考表：
| 內容類型 | AA 最低 | AAA 最低 |
|---|---|---|
| 普通文字 | 4.5:1 | 7:1 |
| 大文字（18pt 標準或 14pt 粗體） | 3:1 | 4.5:1 |
| UI 元件與圖形物件 | 3:1 | 3:1（無獨立 AAA） |
三步驟檢查一組色彩配對
以下是 色彩對比檢查工具 內的實務流程：
- 設定前景（文字）顏色。開啟色彩選擇器，輸入像 #111111 的十六進位值，或直接從你的設計系統貼上色票。選擇器接受任何有效的六位數十六進位色碼。
- 用同樣方式設定背景顏色 — 挑選或輸入，例如白色畫布用 #ffffff。
- 讀取對比比率與 AA/AAA 標章，針對普通文字、大文字和 UI 元件。調整任一顏色，直到你在意每個標章都顯示通過。
這就是完整的循環：挑、挑、讀、微調。如果你的目標僅是 AA，請將普通文字瞄準 4.5:1，大文字瞄準 3:1。如果你要設計 AAA，或針對陽光下廉價螢幕的長時間閱讀，請推向 7:1 或更高。標章即時更新，所以當你將色相偏移幾個點時，可以清楚看到哪些門檻被突破或跌破。
對比檢查常見的錯誤
大多數失敗的稽核並非數學錯誤。它們來自一小撮可預期的錯誤，即使是經驗豐富的團隊也會重複犯。
把 AA 當作天花板。在大多數引用 WCAG 的司法管轄區中，AA 是法定下限，不是舒適區。內文剛好 4.5:1 在校色過的辦公室螢幕上讀起來沒問題，但到了低階筆電、陽光下，或對低視力讀者時就會糊掉。如果你的受眾廣泛，請盡量以 AAA 為設計目標，特別是長段落與小型 UI 標籤。
忘記大文字規則。大文字享有較寬鬆的門檻 — AA 為 3:1，AAA 為 4.5:1 — 但僅限於真正符合資格的字級：18pt 標準，或 14pt 粗體。一個 700 粗細的 16px 註解，在公式眼中仍算普通文字，所以請以實際渲染後的尺寸和粗細為準，而非設計意圖。
忽略非文字對比。UI 控件、聚焦指示、圖示按鈕和表單欄位邊框適用另一條規則：相鄰顏色至少 3:1。一個文字通過 4.5:1 的連結，其底線或箭頭仍可能在背景中消失。在出貨前，將這些元素也跑過同一個檢查工具。
僅依賴顏色。對比是關於亮度，不是色相。紅色標籤在綠色欄位上，對某些觀看者很顯眼，但對紅綠色盲讀者可能難以分辨。請搭配圖示、文字標籤或底線，讓意義不只依賴色相。
只檢查一種畫面狀態。Hover、focus、disabled 和 error 狀態是常見的失敗點。許多團隊驗證預設狀態，卻出貨了一個無障礙不合格的 disabled 按鈕，在同樣的背景上淡化成 50% 透明度 — 比率暴跌，按鈕實際上從頁面上消失。好消息是對比檢查只需片刻，所以在次要狀態上沒有理由略過。
比率無法涵蓋的部分
對比數字很精確，但它只回答一個問題：這兩種顏色在亮度上差多少。其他一切都取決於你。
半透明圖層與覆蓋。70% 不透明的黑色疊在彩色背景上，並沒有穩定的對比比率；有效背景會隨覆蓋層所在的底色而變化。請測試最終合成色，而非原始覆蓋色，並對照它可能出現的最淺與最深表面進行檢查。
漸層。當標籤跨越漸層時，背後的顏色會變化。請測試最淺與最深的停駐點。如果比率在漸層中途跌破門檻，該漸層就不適合用於文字。
圖片上的文字。照片與插畫沒有固定的背景。請在文字後方用暗幕加深區域，或測試字母可能落點的多個位置，以最差情況作為通過標準。
僅靠色相的訊號。兩個亮度相同但色相截然不同的顏色 — 例如 #555 紅配 #555 綠 — 對視力正常者看起來有別，但仍可能未通過 WCAG。比率是決勝依據，不是色相環。
佔位符文字。瀏覽器以降低的透明度（通常約 40%）渲染佔位符。即使啟用深色模式，其相對於輸入欄背景的有效對比仍可能跌破 2:1。請明確以測試過的高對比值覆寫佔位符顏色，然後將最終顏色跑過檢查工具確認。
打造始終通過的調色板秘訣
幾個習慣能讓對比檢查工具感覺不像期末考，而更像例行檢查點。
先測試品牌調色板。在任何版面工作開始前，先將主要、次要與強調色對白色、近白與深色背景進行測試。在設計權杖階段就抓出失敗處，避免日後回頭改造數十個元件。在設計權杖之餘搭配快速的 網頁無障礙檢查，讓品牌、無障礙性與執行階段保持一致。
鎖定最淺灰階。如果你的設計系統需要「細緻灰色文字」，請將它設定為在白色與所有出貨的深色表面上仍能通過 4.5:1 的最淺值。#767676 在白色上是邊界值；更淺就失敗，更深就安全。將該邊界編碼為權杖，避免任何人跌破底線。
謹慎使用大文字豁免。將較寬鬆的門檻保留給真正的標題與 hero 文案。一旦 14pt 粗體元素作為控制標籤或導覽項目使用，就應視為普通文字，使 WCAG 通過或失敗一目了然。
維護一份對比配對清單。一份簡短的參考表，將每個品牌色與其安全的前景（反之亦然）配對，讓團隊其他人無需每次重新檢查就能選用配對。
每次顏色變更後都驗證。一旦有人將品牌色相微調幾個點，就重新檢查受影響的配對。從 #1a73e8 變成 #1a72e8 肉眼看起來一模一樣，但在特定背景上可能把連結色拉到門檻以下。
對比檢查工具是少數數學明確、規則白紙黑字寫清楚的工具之一。請按設計本意使用它：挑兩個顏色、讀取標章、反覆調整直到通過，並記住比率衡量的是亮度，不是意義。一切都在你的瀏覽器本機執行，因此你可以私下試驗品牌調色板與設計權杖，無需上傳任何資料。
想更深入了解，請參閱 色彩差異計算工具秘訣與避免常見錯誤。