網頁設計用的色彩對比檢查器是一種即時驗證工具，會計算前景（文字）色彩與背景色彩之間的 WCAG 對比比率，然後報告這組配色是否符合 AA、AAA 以及 3:1 非文字規則。對比比率本身是一個介於 1:1（兩種顏色完全相同）到 21:1（純黑搭配純白所達到的最大值）之間的單一數字。該數字是根據每種顏色的相對亮度，使用公式 (L1 + 0.05) / (L2 + 0.05) 計算而得，其中 L1 是較淺顏色的亮度，L2 是較深顏色的亮度。在這個公式背後，每個 sRGB 色道會先轉換為線性光值，再依權重 0.2126（紅）、0.7152（綠）和 0.0722（藍）加權，然後重新組合為單一亮度值。這個結果就是每個 WCAG 門檻所對應的基準，也是每項無障礙稽核、瀏覽器擴充功能和設計系統檢查最終仰賴的依據。一個數字就能告訴設計師，內文、按鈕標籤和表單錯誤訊息，對於視力較低、色覺缺陷或在陽光下閱讀手機螢幕的人來說，是否清晰可讀。
對比檢查器實際測量的是什麼
檢查器所報告的對比比率，是由每種顏色的單一屬性——相對亮度——所構成。相對亮度描述的是一個顏色看起來發出多少光，經過縮放使純黑為 0，純白為 1。要從十六進位色碼得到這個值，工具首先會將每個 sRGB 色道標準化為 0–1 的數值，再進行線性化處理：值小於或等於 0.03928 的色道除以 12.92，而較亮的色道則套用伽瑪曲線 ((c + 0.055) / 1.055)2.4。三個線性化後的色道再依權重 0.2126（紅）、0.7152（綠）和 0.0722（藍）組合——這也是 sRGB 規格所使用的相同亮度權重。
要看公式的實際運作，可以從最簡單的一組開始：黑色文字 (#000000) 配白色背景 (#ffffff)。#000000 的每個 sRGB 色道都是 0，因此其線性化值為 0 / 12.92 = 0，得到 L_black = 0。#ffffff 的每個色道都是 1，線性化後為 ((1 + 0.055) / 1.055)2.4 = 1，所以 L_white = 1。對比比率接著為 (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21:1，這是數學上的上限。
將同一組配色其中一個色道調亮一點——#111111 配 #ffffff——比率會下降到約 18.9:1，仍然遠超過所有 WCAG 門檻，但也提醒我們小幅的調整就會明顯影響這個數字。這個數學也具有對稱性：交換前景和背景會得到完全相同的比率，因為公式是用較亮的亮度除以較暗的亮度，無論哪個顏色是文字。對比是一組配色的屬性，而不是文字所在那一側的屬性。
若想更深入了解逐色道的線性化過程並附有標註範例，無障礙對比比率公式與門檻指南詳細說明了同樣的計算方式。
WCAG 符合性等級一覽
單獨看比率沒有意義，還必須看它所要通過的門檻。網頁內容無障礙指引定義了三個符合性等級——A、AA 和 AAA——其中只有 AA 和 AAA 包含網頁設計工作必須達到的數值對比要求：
| 等級 | 一般文字 | 大型文字 | 非文字（UI、圖示） |
|---|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3:1 | ≥ 3:1 |
| AAA | ≥ 7:1 | ≥ 4.5:1 | 不適用 |
「大型文字」有明確的定義：常規字重下至少 18 點（24 px），或粗體時至少 14 點（約 18.66 px）。較粗、較大的字母較容易從背景中區分出來，因此 WCAG 允許它們使用較低的比率。非文字欄位涵蓋表單欄位邊框、聚焦框、傳達狀態的圖示，以及其他必須不僅依賴顏色就能被感知的圖形物件——根據同一標準，這些項目與相鄰顏色之間的對比至少需要達到 3:1。
對大多數面向公眾的網頁設計而言，AA 是實際上的基本門檻。美國的 Section 508 與歐盟的 EN 301 549 都直接引用 WCAG 2.x，因此通過 AA 幾乎是每個上線專案的實際目標。AAA 則是延伸目標：它能為低視力使用者帶來更舒適的閱讀體驗，在品牌色板允許的情況下，內文值得以此為努力方向。如需這些等級與對比最低成功準則的完整定義，請參考 W3C 上的WCAG 2.1 對比最低頁面，這是最具權威性的參考資料。
如何在網頁設計工作流程中檢查對比
在網頁設計環境中檢查一組配色，使用色彩對比檢查器只需三個具體步驟。整個流程都在瀏覽器本機執行，因此在反覆調整時，品牌色板和設計權杖仍可保持隱私。
- 設定前景（文字）顏色。開啟選色器或輸入十六進位值，例如將文字顏色設為 #111111。這個顏色會套用於文字、圖示筆觸或任何位於背景之上的元素。
- 同樣方式設定背景顏色。使用選色器或輸入十六進位值，例如將文字所在的表面設為 #ffffff。兩個輸入框都接受十六進位值，只要任一顏色變動，對比比率就會立即重新計算。
- 讀取對比比率與 AA/AAA 標籤。工具會報告從 1:1 到 21:1 的精確比率，並為一般文字、大型文字和非文字對比顯示通過或未通過的標籤。調整任一顏色，直到您關心的每個標籤都變成綠色——這就是可以鎖定到設計權杖中的配色組合。
在實際工作流程中，有兩個習慣能加快這個過程。首先，批次檢查完整的權杖矩陣：每個主要文字權杖對上每個中性背景權杖，再加上反向組合，這樣就能留下哪些配對已通過核准的文字紀錄。其次，在任何品牌重新調整後重新測試，因為單一主要色的位移，可能會悄悄把原本通過的組合推到 AA 以下。
測試品牌色板與設計權杖
網頁設計中色彩對比最困難的部分不是數學——而是讓一個系統在數百個元件間保持誠實。一個典型的設計系統會有 8 到 15 個中性表面、少數品牌主色，以及幾個語意色彩（成功、警告、錯誤、資訊），每一種都必須在多種背景下保持可讀性。這個矩陣大到無法用肉眼檢查，這也正是只接受兩個十六進位值並回傳驗證後比率的檢查器，正是恰到好處的工具型態。
從承載最多資訊的配對開始：預設頁面背景上的內文、頁面背景上的主要按鈕、白色表面上的錯誤文字，以及表單欄位中的佔位文字。接著測試反向情境——深色模式下的內文在深色表面上，以及任何「細微」或「柔和」文字變體，因為設計師在精簡色板時，往往最先放鬆這些權杖的對比。常見的失敗模式是停用狀態：灰配灰，即使在 Figma 中看起來沒問題，卻無法通過 3:1。
如果您的品牌色板有不能更動的固定主色，務實的做法是從中衍生一個「品牌適配」文字色——通常是極深或極淺的變體，只要通過門檻，就能允許它存在於系統中。這個衍生的權杖應與作為其背景的品牌色配對成一個單元來測試，而不是作為獨立的十六進位值儲存。
網頁設計師應重複測試的邊緣情況
對比比率的準確性，取決於您輸入的兩個顏色。幾種常見的網頁設計模式打破了單純的「A 色在 B 色上」模型，每種都需要額外留意：
- 漸層。使用線性漸層的按鈕沒有單一的背景顏色，因此請以最淺和最深的漸層節點分別對前景文字進行測試。如果任何一端未通過，按鈕上的文字在某些區域就會難以辨識。
- 半透明覆蓋層。對話框遮罩或帶色調的圖片標題會改變其上方任何文字的有效背景。請挑出文字可能落於的最淺與最深底層像素，將其與覆蓋層顏色混合，再檢查該結果。
- 圖片上的文字。主視覺圖像、部落格封面和產品照片在表面上有差異。請在圖片與文字之間加入實心或漸層覆蓋層，然後測試文字對該覆蓋層的對比，而非直接對照片本身。
- 佔位文字與輔助說明文字。輸入欄位常用的佔位文字灰色通常比已輸入文字更淺。佔位文字仍需符合對比要求，而欄位下方的輔助說明文字也是閱讀體驗的一部分，兩者都必須測試。
- 停用與「細微」狀態。設計師往往接受停用按鈕或柔和標籤使用較低對比。WCAG 允許純粹非作用中的 UI 使用較低對比，但任何仍可見且具資訊性的項目——包括帶有工具提示的停用按鈕——都必須通過 3:1。
- 僅以顏色作為訊號。紅色錯誤邊框配綠色成功邊框，即使兩者個別通過對比，仍會因紅綠色盲而失敗。請將顏色與文字標籤、圖示或底線搭配，讓意義不僅依賴色相。
超越符合性：為何對比值得投入心力
色覺缺陷是世界上最常見的遺傳性狀況之一，其中紅綠色類型影響了相當比例的男性，以及比例較小但仍不容忽視的女性。白內障、年齡相關的黃斑部變化，以及在明亮陽光下使用廉價螢幕的日常現實，又增添了數百萬依賴亮度對比來區分文字與背景的讀者。充足的對比正是讓內文、按鈕標籤和錯誤訊息在所有這些情況下保持清晰可讀的關鍵，也是 WCAG 撰寫之初所要保障的。
在多數訂有無障礙法律的司法管轄區中，這也是一項法律要求。美國身心障礙者法案（ADA）經常透過訴訟與和解適用於美國網站；Section 508 要求聯邦機構遵循 WCAG；而 EN 301 549 直接引用 WCAG 規範歐盟的公部門網站。實務上，這代表對比未通過很少只是設計上的註記——它可能就是將稽核從「小問題」推向「上線前必須修正」的那一條項目。
這些都不需要特殊工具。整個循環——輸入兩個十六進位值、讀取比率、調整其中一個顏色直到標籤變綠——只要權杖擺在眼前就能在片刻之間完成；而在設計階段進行一次完整系統檢查，通常就足以讓 AA 等級的對比在後續建置過程中保持穩定。將對比視為一組配色的屬性，就像字距或行高一樣，對比這項工作就不再感覺是多餘的修飾，而會開始感覺是規格的一部分。