色彩對比檢查工具，是透過套用 (L1 + 0.05) / (L2 + 0.05) 這條公式、算出單一亮度比值，來衡量文字色與背景色之間的可讀性，其中 L1 是較淺色的相對亮度，L2 是較深色的亮度。這套算法直接來自 Web Content Accessibility Guidelines，因此色彩對比檢查工具本質上，就是低視力讀者、螢幕報讀器使用者，或在陽光下瞇著眼看手機的家長，在嘗試使用您的頁面時所仰賴那條規則的即時實作。比值永遠落在「顏色完全相同」的 1:1，到「純黑對純白」的 21:1 之間，而 WCAG 把這些數字對應到兩個合規等級。AA 級要求一般文字至少達到 4.5:1、大型文字至少達到 3:1；AAA 級則把這兩個門檻分別提高到 7:1 與 4.5:1，另有一條獨立的非文字規則，要求 UI 元件、圖示與焦點外框至少達到 3:1。這正是為什麼色彩對比檢查工具幾乎是每一次無障礙審查中不可或缺的一環——它把這項抽象的標準，轉換成一個您可以針對設計系統中每一組色彩配對直接採取行動的數字。
WCAG 2.x 對比公式如何運作
WCAG 2.x 的比值公式需要三個數字：每個 sRGB 色版的線性光值、每個顏色的加權亮度，接著才是比值本身。每個色版都被視為 0 到 255 之間的整數，除以 255 正規化成 0 到 1 之間的數值，再套用 sRGB 線性化曲線。對於任一色版值 c，若 c 小於或等於 0.03928，其線性值就是 c 除以 12.92；否則，其線性值就是 ((c + 0.055) 除以 1.055) 的 2.4 次方。這些線性色版值接著會分別乘上紅色的 0.2126、綠色的 0.7152，以及藍色的 0.0722，並加總起來，得出該顏色的相對亮度 L。
這兩個亮度值會被代入 (L1 + 0.05) 除以 (L2 + 0.05)，其中 L1 是兩色中較淺的那一個，L2 則是較深的那一個。這個 0.05 的偏移量，能避免當其中一個顏色是純黑時、公式的結果發散到無限大，同時也讓黑對白能得出典型的 21:1 上限。
以下用 #767676 對 #ffffff 這組 W3C 用來代表「勉強通過 AA」的參考色對，示範一次完整的演算：
- 色版值：118 ÷ 255 = 0.4627
- 線性化：((0.4627 + 0.055) ÷ 1.055) 的 2.4 次方 = 0.1814
- 亮度（三個色版皆相等）：0.1814
- 較淺的顏色（#ffffff）：L1 = 1.0000
- 比值：(1.0000 + 0.05) ÷ (0.1814 + 0.05) = 1.05 ÷ 0.2314 ≈ 4.54:1
這正是 W3C 拿來作為「勉強通過 AA」的那組確切色對——只要再深一點，就會掉到 4.5:1 以下；只要再淺一點，就能輕鬆通過。完整規範請見 W3C 關於 Contrast (Minimum) 的頁面。
一眼看懂 WCAG AA 與 AAA 門檻
比值本身只是輸入值；輸出的，是針對 WCAG 所定義的每一個門檻，得出通過或不通過的判定。根據 WCAG 2.1 Contrast (Minimum)，W3C 為文字與非文字內容所設定的數字如下：
| 元素 | AA 級 | AAA 級 |
|---|---|---|
| 一般文字 | ≥ 4.5:1 | ≥ 7:1 |
| 大型文字（一般字重 ≥18pt 或粗體 14pt） | ≥ 3:1 | ≥ 4.5:1 |
| UI 元件與圖形物件 | ≥ 3:1 | ≥ 3:1 |
大型文字之所以享有較低的門檻，是因為較粗、較大的筆畫在感知上更容易閱讀，而 WCAG 把「大型」定義為一般字重至少 18pt（24px），或粗體至少 14pt（約 18.66px）。3:1 的非文字規則，涵蓋表單欄位邊框、焦點指示器、帶有意義的圖示，以及使用者為了操作頁面而必須能感知到的任何其他圖形物件。另有一項獨立的 AAA 要求，也要求文字具備更強的對比，這正是 7:1 那一欄所反映的內容。
如何用 Color Contrast Checker 測試一組色彩配對
Color Contrast Checker 會在您的瀏覽器中本機執行上述公式，因此您可以反覆調整品牌配色與設計權杖，而不需要上傳任何內容。只需要三個步驟：
- 使用色彩選取器，或直接輸入像 #111111 這樣的十六進位色碼，設定前景色——也就是您文字的顏色。
- 以同樣的方式設定背景色，例如 #ffffff——也就是文字所在的表面顏色。
- 閱讀對比比值，以及針對一般文字、大型文字與 UI 元件所顯示的 AA／AAA 通過或不通過標章，接著調整任一顏色，直到達到您需要的等級為止。
若想更深入了解這些數字如何對應到一次實際的審查、以及這套公式的出處，請參閱我們關於 無障礙對比比值公式與門檻 的實務指南。
對比比值衡量了什麼、又沒有衡量什麼
WCAG 這套公式，對其中一件事——亮度——十分精確，但對其他多數事情則保持沉默。了解它的界線，能幫助您避免產生錯誤的信心。
它衡量的是亮度，不是色相。 兩個看起來明顯不同的顏色，例如飽和的紅色配飽和的綠色，只要它們的亮度數值接近，仍然可能無法通過。這正是為什麼 WCAG 告訴您絕不要單靠顏色來傳達意義：請搭配文字標籤、圖示，或底線一起使用。
它假設背景是實心、不透明的。 漸層、半透明疊層，以及疊在圖片上的文字，都會讓元素上各處的實際背景色不斷改變，因此安全的做法，是針對文字筆畫可能落在的最淺與最深位置分別測試，而不是只看表面的平均色。
它本身無法對可讀性評分。 即使比值合格，如果文字只有 11px、全部使用大寫，或採用纖細的裝飾字體，也無法幫上忙。佔位文字、停用狀態的標籤，以及小型說明文字，都是常見的失敗地帶，即使本文內容通過了，也值得拿去跑一次檢查工具。
為什麼對比不只是設計偏好
大約每十二位男性中就有一位、每兩百位女性中就有一位，患有某種形式的色覺缺陷，另外還有數百萬人是以低視力、白內障，或在強烈陽光下使用廉價螢幕的方式在閱讀。足夠的亮度對比，正是讓內文、按鈕與錯誤訊息對這些人來說都保持可讀的關鍵。色彩對比檢查工具本質上，是確保閱讀您頁面的人，就是您當初撰寫內容時鎖定的那群人，最便宜也最快速的方法。
在許多地方，它同時也是一項法規要求。美國的《美國身心障礙者法案》經常被套用到美國境內的網站上，《第 508 條款》則對聯邦機構強制要求，而歐洲標準 EN 301 549 也直接參照 WCAG，適用於公部門網站。表單標籤、結帳按鈕，或錯誤訊息上的對比不合格，往往在成為一項設計選擇之前，就已經先變成一則投訴——以及一個整改期限。
選擇安全色彩配對的實務建議
對比是對稱的。 因為這套公式永遠是用較淺色除以較深色，交換前景色與背景色，會得出完全相同的比值。這個數字描述的是這組配對本身，而不是任一顏色所扮演的角色，因此同一個十六進位色碼，配在白色上通過、配在近黑色上卻不通過，是真實可能發生的情況。
把 AA 當成底線，而不是天花板。 並非每一套品牌配色都能達到 AAA，但只要本文內容與主要按鈕能達到 AAA，就能讓最廣泛的受眾都能舒適地閱讀。請盡量利用對比檢查工具，在能力所及之處朝 AAA 邁進，在做不到的地方，也要遠遠超過 AA 的門檻。
以實際的文字大小進行測試。 一組在 18pt 下能通過的配對，換成 14px 的內文文字仍可能不合格，而您需要達到的門檻，取決於該筆畫實際觸發的是 WCAG 表格中的哪一列。切換到深色模式、淺色與深色角色互換之後，也請重新檢查一次。
針對焦點狀態與佔位文字執行檢查。 這些正是即使配色其餘部分都合格，卻經常在正式環境中悄悄不合格的地方，而且它們往往存在於最後才會被審查到的元件之中。
如果您還在權衡選項，Complementary Color Finder and Accessibility Contrast 一文對此有詳細說明。