色彩對比檢查器會使用官方的 WCAG 亮度公式，衡量文字與其背景之間的可閱讀程度。你提供兩個顏色（通常是前景文字顏色和背景顏色），它會回傳一個介於固定比例尺上的數值對比率，從 1:1（同一個顏色使用兩次）一直到 21:1（純黑配純白）。這個單一的數字會告訴你這一組配色是否通過 Level AA 的門檻：一般文字 4.5:1、大型文字 3:1；更嚴格的 Level AAA 門檻 7:1 和 4.5:1；以及 UI 元件和圖形物件的最低要求 3:1。由於這套運算方式已於《網頁內容可及性指引》中標準化，因此所得結果會和無障礙稽核人員手動計算的數字一致。對初學者來說，這表示你不需要先學會色彩理論——只要輸入兩個顏色、讀取比率，並反覆調整直到正確的通過標記亮起即可。
螢幕上「對比」的真正含義
螢幕上的對比與繪畫中的對比並不相同。它是一種精確且可量測的關係，取決於兩個顏色各自的發光量，W3C 將這個特性稱為「相對亮度」。兩個顏色在肉眼看來可能差異極大——例如深紅與亮綠——但它們的亮度可能幾乎相同，導致對比表現不佳。相反地，兩個幾乎相同的色調，只要其中一個明顯較深，就能獲得通過的對比比率。WCAG 公式會將每個顏色通道從其 sRGB 數值轉換為線性光源，再將紅色乘以 0.2126、綠色乘以 0.7152、藍色乘以 0.0722，然後合併為單一的亮度數值，詳見 W3C WCAG 2.1 contrast minimum guidance。兩個顏色之間的比率為 (較亮 + 0.05) 除以 (較暗 + 0.05)。這就是判斷可讀性所需的唯一數字，也是檢查器所回報的唯一數字。
為何對比的重要性超越美感
不良的對比是網站無法通過無障礙稽核的主要原因之一，同時也是最容易修正的問題之一。大約每十二名男性中就有一人、每兩百名女性中就有一人帶有某種形式的色覺缺陷，還有數百萬名讀者受到低視力、白內障、廉價螢幕的眩光影響，甚至只是因為手機背後的強烈陽光。在昏暗辦公室中、視力完全正常的設計師看起來沒問題的內文、按鈕標籤和錯誤訊息，對這些讀者來說可能會完全消失。對比問題也延伸至法律層面：《美國身心障礙者法》（Americans with Disabilities Act）經常適用於美國網站，《第 508 條》（Section 508）強制要求聯邦機構遵循，而歐洲標準 EN 301 549 也直接引用 WCAG 規範公部門網站。即使在法規未明確要求之處，改善對比也是一項低成本的成果——只要花幾分鐘使用檢查器，往往就能修正多年累積的設計漂移，並讓每一位讀者受益，而非僅限於已被診斷出障礙的使用者。
用白話解釋 WCAG 門檻
這套指引定義了三個符合性等級——A、AA、AAA——但對比僅在 AA 和 AAA 進行量測。Level AA 是廣泛接受的基準；Level AAA 則是針對內文較嚴格的目標，以確保閱讀舒適度。初學者應將下表隨時備在手邊，因為這些正是每個檢查器用來比對的精確數字：
| 使用情境 | AA（最低） | AAA（強化） |
|---|---|---|
| 一般文字 | 4.5:1 | 7:1 |
| 大型文字（≥ 18pt 或 14pt 粗體） | 3:1 | 4.5:1 |
| UI 元件與圖形 | 3:1 | 3:1 |
大型文字的門檻較低，是因為較粗、較大的字形在較低對比下仍易於閱讀。UI 元件——表單欄位邊框、聚焦框、圖示、圖形按鈕——在「非文字對比」指引下另有 3:1 的規則。AA 是大多數團隊追求的底線；若設計上允許，AAA 則值得在內文部分積極追求。
逐步檢查一組顏色的方法
最快的學習方式就是將一組真實的顏色丟進 Color Contrast Checker 跑一次。無論你測試的是品牌色、CSS 變數，還是剛從調色盤工具中取得的顏色，操作介面都相同：
- 使用色彩選擇器設定前景（文字）顏色，或直接在欄位中輸入如 #111111 的十六進位值。
- 以同樣方式設定背景顏色——例如純白色可使用 #ffffff。
- 讀取顯示的對比比率，並查看一般文字、大型文字及 UI 元件的 AA 與 AAA 通過或未通過標記。
- 調整任一顏色，並即時觀察比率變化。持續微調，直到你在意的標記轉為綠色。
這就是完整的操作流程。不需要安裝任何軟體，也無須上傳任何資料——運算完全在你的瀏覽器中進行，這對於處理尚未公開的品牌色或機密的設計權杖時格外方便。
實際範例：黑底白字
最簡單、可以直接用手驗證的組合就是純黑配純白。純白的亮度為 1，純黑的亮度為 0。代入 WCAG 公式：
比率 = (L1 + 0.05) / (L2 + 0.05) = (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21:1
這就是比例尺的上限：任何一組顏色所能達到的最高對比。它以極大的餘裕通過 AA、AAA 以及 3:1 的 UI 門檻。多數品牌色都無法接近 21:1——例如典型「接近全黑」的 #111111 配白色，大約落在十幾比一的範圍，輕鬆超過一般文字 7:1 的 AAA 標準。一旦加入顏色，比率就會迅速下降，這正是檢查器存在的價值。
比率衡量與不衡量的項目
對比僅取決於你測試的兩個顏色，因此前景與背景互換後得到的數值相同——對比是兩者之間的屬性，而非取決於哪一個是文字。比率衡量的是亮度，而非色相。兩個色相迥異但亮度相近的顏色（例如紅配綠、藍配紫）仍可能不合格，這也是為何不建議單獨使用顏色作為傳達意義的方式：應搭配文字標籤、圖示或底線使用。此外，這個公式假設背景為純色，因此漸層、半透明覆蓋層以及疊在照片上的文字都需要額外留意。請針對字母可能落腳的最亮與最暗處進行測試。佔位符文字、停用狀態的按鈕以及纖細的裝飾字體，都是常見容易出錯之處，值得再次檢查。最後，檢查器會一次回報所有門檻，因此初學者無須背誦表格——讀取標記即可，毋須理解公式。
初學者常見的錯誤
多數的對比錯誤來自三個習慣。第一，以小尺寸進行設計：在 12pt 看起來沒問題的色塊，到了 9pt 就可能消失，而大型文字的寬限（3:1）僅適用於 18pt 的一般字或 14pt 的粗體字。第二，把「通過 AA」當成目標而非底線——舒適的內文在 7:1 以上閱讀效果更佳，而且 AAA 比設計師想像中更容易達標。第三，只測試一次便忘記驗證：一個在純白背景通過的權杖，在有色的卡片、模態遮罩或深色模式變體中可能就會失敗。應將對比檢查內建於設計系統中，而非依賴專案最後的一次性稽核；每當顏色權杖變更時，就重新跑一次檢查。
總結
對初學者而言，整套紀律可以歸納為三個習慣：選定前景與背景、將其輸入對比檢查器、並調整到你實際會出貨的尺寸下 AA 與 AAA 標記皆通過為止。底層的運算是標準化的，門檻是公開的，而工具會即時處理計算。一旦這些習慣建立起來，無障礙就不再像是一份額外的檢查清單，而是挑選顏色時的正常環節——就像你會檢查拼字或檢查響應式斷點一樣。對每一組重要的配色都使用 Color Contrast Checker，你就能在問題送到稽核人員手中之前及早攔截。
如需更深入的內容，請參閱 Color Difference Calculator for Beginners: HEX to Delta E。
如需更深入的內容，請參閱 Color Contrast Checker for Web Design: Design System Tips。