WCAG 色彩對比是以 1:1 到 21:1 的亮度比例來衡量，其中 4.5:1 通過一般文字的 AA 標準，7:1 通過 AAA 標準，而 3:1 則適用於大型文字與 UI 元素。這個比例是色彩配對本身的屬性，與哪個顏色作為前景無關，因此數學上是對稱的:交換文字與背景，分數維持不變。在這些數字背後，有一套來自網頁內容無障礙指引(W3C)的特定公式，它會使用紅色權重 0.2126、綠色權重 0.7152、藍色權重 0.0722，將每個 sRGB 通道轉換為線性光，然後比較較亮與較暗顏色的相對亮度。結果為 (L1+0.05)/(L2+0.05)，而這個單一數值就是所有無障礙標準的基礎。設計師在搜尋色彩對比檢查工具的配色靈感時，通常一次想要三樣東西:一個已經通過檢驗的起始配色、一個能驗證自訂配對的方法，以及清楚知道哪個門檻對應到哪種文字大小。下方章節會一次提供這三項:官方門檻、一個透過 Color Contrast Checker 測試任何配對的方法，以及一份可直接套用並調整為自有品牌風格的配色靈感清單。
為什麼配色靈感在出貨前需要先做對比檢查
大約每十二名男性中就有一人、每兩百名女性中就有一人，帶有某種形式的色覺缺陷，還有數百萬人在弱視、白內障，或在強烈陽光下使用廉價螢幕閱讀。對這些讀者來說，在「昏暗辦公室的 27 吋螢幕上看起來還不錯」與「通過對比檢查工具」之間的差別，就是內文是否可用、能否閱讀的分界。一組在情緒板上顯得大膽的配色，可能會在某個淺灰被換成純白的瞬間，悄悄跌破 4.5:1 的標準，而這類失敗往往藏在次要文字、佔位符文案與禁用狀態中——偏偏這些是設計師最不可能用肉眼檢查的地方。
對比在大多數司法管轄區也是法律要求。在美國，《美國身心障礙者法案》(Americans with Disabilities Act) 經常適用於網站，Section 508 管轄聯邦機構，而歐洲標準 EN 301 549 則直接引用 WCAG 作為公部門網站的依據。一組未通過標準的配色，就是可能無法通過稽核的配色，無論它在視覺上看起來多麼搶眼。將對比視為設計上的約束，而非收尾步驟，是用最低成本同時取悅讀者與法規遵循人員的方法。
每組配色都必須通過的門檻
在借用任何配色靈感之前，最好先了解檢查工具會用來比較的具體數字。WCAG 2.x 將這個比例定義一次後便在所有地方重複使用，因此這些數值在各種工具與標準之間保持穩定。
| 使用情境 | AA 級 | AAA 級 |
|---|---|---|
| 一般文字(小於 18pt 標準字或 14pt 粗體) | 4.5:1 | 7:1 |
| 大型文字(18pt 以上標準字，或 14pt 以上粗體) | 3:1 | 4.5:1 |
| UI 元件、圖示、圖形物件 | 3:1 | 3:1 |
AA 在大多數地方是法律上的最低底線。AAA 則是你想要為最廣泛的受眾——包括年長讀者與任何對比敏感度較低的人——提供舒適閱讀體驗時所追求的目標。大型、粗體文字之所以被允許較低的比例，是因為較粗的筆畫更易閱讀;這也是為什麼同一組配色能通過 24px 標題，卻在 14px 內文上失敗的原因。3:1 的非文字規則同樣適用於表單欄位邊框、聚焦指示器，以及需要在不依賴顏色的情況下從頁面中凸顯出來的圖示。本表中的每個門檻，都是 Color Contrast Checker 所回報的數字，因此在該工具中通過，就等同於對該標準通過。
如何測試任何一組配色
這部分會把情緒板變成可運作的系統。開啟 Color Contrast Checker 後，驗證一組配色靈感是一個三步驟的迴圈，任何一組顏色都能執行。
- 使用選色器或輸入像 #111111 的十六進制值，設定前景(文字)顏色。
- 以同樣方式設定背景顏色，例如 #ffffff。
- 讀取對比比例與 AA/AAA 通過或未通過的標示，然後調整任一顏色，直到達到所需的等級。
對主要文字執行一次迴圈，對較弱或次要文字執行一次，再對任何使用不同組合的大型標題執行一次。該工具會一次回報所有門檻的通過或未通過，因此你不必記住那些數字——只需讀取標示。如果某組配色靈感接近但未達標，把前景調暗一點或把背景調亮一點;輕微調整明度，通常比更換色相更快地縮短 0.2 分的差距。同樣的迴圈也適用於 UI 元素:把表單邊框顏色與頁面背景餵給檢查工具，然後確認通過 3:1 的非文字規則。想要更深入地了解同一套工作流程，可參考關於為無障礙檢查色彩對比的實用指南，其中涵蓋了各種邊界情況。
通過測試考驗的配色靈感
下方的配色靈感是起點，不是完成品。每一組都標示出前景與背景，你可以直接貼到 Color Contrast Checker 中查看精確的比例。把這份清單當作素描本:取一組配對，確認它符合你文字大小的需求，然後圍繞它建立更完整的系統。
| 配色靈感 | 前景 | 背景 | 最適用於 |
|---|---|---|---|
| 經典單色 | #000000 | #FFFFFF | 乾淨閱讀面上的內文;達到 21:1 的上限。 |
| 炭黑搭暖白 | #1F2937 | #FAF7F2 | 長篇文章與編輯型版面，需要柔和感又不犧牲 AA 標準。 |
| 深海軍藍搭近白 | #0F172A | #F8FAFC | 以品牌為主導的行銷頁面，由深藍色承載品牌識別。 |
| 深紫紅搭奶油色 | #3B0764 | #FEF3C7 | 雜誌風格的裝飾元素、徽章與引述，需要呈現豐富感。 |
| 森林綠搭象牙白 | #14532D | #FFFBEB | 永續或金融品牌，想要有色彩又不犧牲可讀性。 |
| 酒紅搭沙色 | #7C2D12 | #FEF3C7 | 餐廳與旅館業配色，使用溫暖、親近食物的色調。 |
| 石板藍搭淺灰 | #1E3A8A | #F1F5F9 | 儀表板與資料密集型介面，層級必須一眼可讀。 |
| 近黑搭米白 | #111827 | #F9FAFB | 比純黑配純白更柔和的替代方案，內文仍達到 AAA 標準。 |
這裡刻意不列出每組配對的精確比例:對比檢查工具的核心目的，就是依官方公式算出官方數字，而那個經驗證的結果，要從工具中取得。在檢查工具中開啟其中任何一組配對，讀取通過或未通過的標示，就會得到經驗證的答案。一旦基礎配對通過，就可以用同一個前景搭配幾種不同的表面顏色，來建立分層系統:頁面背景、卡片背景、較弱表面，依此類推。
檢查工具實際上是如何得出比例的
對於想知道一組配色靈感為何通過或未通過的讀者，這個公式短到可以走過一次。每個 sRGB 通道首先會被標準化為 0–1 的數值，然後進行線性化:如果該值小於或等於 0.04045，就除以 12.92;否則就使用 ((v+0.055)/1.055)^2.4 進行轉換。三個線性化通道接著以紅色權重 0.2126、綠色權重 0.7152、藍色權重 0.0722 加權，得出每個顏色的單一相對亮度。對比比例就是較亮亮度加上 0.05，除以較暗亮度加上 0.05，這就是為什麼相同顏色會產生 1:1，而純黑搭純白會產生 21:1。
用一個計算範例讓它更具體。以中灰 #777777 為例，每個通道為 119/255 ≈ 0.4667。使用 ((0.4667+0.055)/1.055)^2.4 進行線性化，每個通道約為 0.184，因此加權後的亮度為 0.2126×0.184 + 0.7152×0.184 + 0.0722×0.184 ≈ 0.184。將它與亮度為 1.0 的純白 #FFFFFF 配對，比例為 (1.0+0.05)/(0.184+0.05) = 1.05/0.234 ≈ 4.49:1。這正是說明為什麼「看起來還好」的中灰配白底，在內文上常常以些微差距未通過 AA 的典型結果。完整演算法記載於 W3C 的Contrast (Minimum) 理解頁面，而 Color Contrast Checker 則逐行套用該演算法。
打造自有無障礙配色的訣竅
一套好的無障礙配色，是從前景開始建構，而不是從背景往上堆。先選定文字顏色——通常是深色中性色或飽和的品牌色——再挑選能通過 4.5:1 或 7:1 門檻的背景，而不是從情緒板出發，然後期待文字能在上面運作。設計師通常會保留一組「中性色」軌道，包含三四種灰色，各自都能在選定背景上通過檢驗，這讓他們不必每一步重新檢查，就能處理內文、次要文字與禁用文字。
同時，記住對比比例無法涵蓋的部分也很重要。它衡量的是亮度，而不是色相，這代表鮮紅搭鮮綠可能會未通過，即使這兩種顏色對沒有色覺缺陷的觀察者來看截然不同。這就是為什麼單純依賴顏色來傳達意義——例如，僅透過把欄位變紅來表示錯誤狀態——並不被鼓勵;應該把顏色與圖示、標籤或底線搭配使用。漸層、半透明疊加層與圖片上的文字較為棘手，因為實際背景在元素上會變動，所以最安全的做法是針對字母可能落腳的最亮與最暗點進行測試。佔位符文字、禁用狀態與纖細的裝飾性字型是常見的失敗點，而快速跑一次 Color Contrast Checker 就能在出貨前抓出這些問題。一切都在瀏覽器中於本機執行，因此你能在不上傳任何資料的情況下，私密地測試品牌配色與設計權杖。剛入門、想要更平緩上手的人，可以依照相同的邏輯參考 Color Contrast Checker for Beginners 入門指南。
What a contrast checker does not catch
Even a perfect ratio can fail a real reader. The checker only measures luminance contrast, so it cannot tell you whether two colors that pass AA still look "off" together because of cultural or brand associations, or whether a bright accent clashes with the rest of the system. It also does not model color blindness directly; the WCAG formula was deliberately written around luminance precisely because it is the strongest predictor of legibility across all forms of color vision deficiency, but a checker will not flag a palette that relies on red-versus-green alone to communicate state. Layer other signals — labels, icons, patterns, underlines — on top of color so the design still works for someone who cannot distinguish the hues.
Finally, contrast is a floor, not a ceiling. Passing AA means the text is technically legible; passing AAA means the text is comfortable to read for long stretches. For body copy, help text, and anything a reader is likely to skim, aim as close to 7:1 as you can. For decorative type, oversized headlines, and large UI labels, 3:1 is a reasonable target. The Color Contrast Checker reports every threshold at once, so the same palette can be checked against every use case in a single pass.