對比度比率對照表將兩種顏色之間的數值關係對應到 WCAG 無障礙標準的門檻，這些門檻決定了文字是否對大多數人保持可讀。比率本身是較淺顏色的相對亮度除以較深顏色的相對亮度，並在等式兩側各加上一個微小的 0.05 偏移，讓相同的顏色產生 1:1 而非零。比率沿著固定的刻度運行，從 1:1——同一個顏色疊在自己身上——一直延伸到 21:1，也就是純黑 (#000000) 對純白 (#ffffff) 所產生的數值。對照表上的每個門檻都對應著實際的影響：WCAG AA 等級要求一般內文至少達到 4.5:1，大字至少達到 3:1，而 AAA 等級則將這兩項下限分別提高至 7:1 和 4.5:1。UI 元件、圖示與圖形物件則另外適用 3:1 的最低要求。能否正確讀取對照表，決定了最終上線的網站究竟能用，還是會讓大約每十二名男性中就有一人，以及數百萬名低視力讀者無法閱讀。
對比度比率對照表如何建立
這張對照表建立在一個明確的公式之上，而非憑感覺的估算。網頁內容無障礙指引定義了一套程序，能將任意兩個十六進位色碼轉換成單一的比率數字，而這套程序從 WCAG 2.0 起就一直沿用至今。
每個顏色通道——紅、綠、藍——首先會從 sRGB 轉換為線性光。三個線性值接著會依照紅 0.2126、綠 0.7152、藍 0.0722 的權重組合成相對亮度。一旦兩種顏色都有了亮度值，比率就是 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較淺的顏色，L2 是較深的顏色。
由於運算只取決於這兩種顏色，比率具有對稱性。對調前景與背景會得到完全相同的數字。這正是為什麼對照表可以從任一方向讀取，也說明了「文字疊在背景上」與「背景襯在文字下」其實指的都是同一列。
一個完整的範例：純黑 (#000000) 的亮度為 0.0，因為每個通道都是零。純白 (#ffffff) 的亮度則為 1.0。代入公式可得 (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21。這就是對照表的頂端，也是這個公式能給出的最佳對比。
WCAG 對比度比率門檻一覽
這張對照表只有在你了解每條線代表的意義時才有用。WCAG 在比率刻度上畫出了三條重要的水平線——兩條用於符合性等級，一條用於非文字元素——而正確讀取對照表意味著必須清楚自己瞄準的是哪一條線。
| 標準 | 一般文字 | 大字 | UI 元件與圖形 |
|---|---|---|---|
| WCAG AA | 4.5:1 | 3:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 | — |
大字的定義為一般字重下至少 18pt (24px)，或粗體時至少 14pt (約 18.66px)。較大的字母比較容易閱讀，因此對照表允許它們落在較低的刻度上。UI 元件、圖示、聚焦框線以及表單欄位邊框都受非文字對比規則規範，只需要達到 3:1 即視為可辨識。
任何低於 3:1 的組合在對照表上都不會通過任何測試。任何超過 7:1 的組合則除了 AAA 專屬的大字門檻外，其餘皆會通過——而這項在達到該點時其實自動成立，因為 AAA 的大字門檻 4.5:1 遠低於 7:1。因此，對照表上最值得關注的區間是 3:1 到 7:1，通過與否取決於你所瞄準的符合性等級以及正在設計的內容類型。
如何將一組配色對照對照表進行比對
一旦你取得文字與其背景的十六進位色碼，對照表的運作方式每次都相同：算出比率，然後橫向讀取該列，看哪些格子會亮起來。官方程序記載於 W3C 的Contrast (Minimum) understanding 頁面，而該公式從 WCAG 2.0 到 2.1 之間並未改變。這份穩定性正是為什麼今天建立的對照表在未來的稽核中依然有效：數學是固定的，只有新增內容類型時才會加入新的門檻。
幾條值得隨手記下的實用讀表規則：
- 完全相同的顏色會落在 1:1，無法通過對照表上的任何測試。
- 純黑疊在純白上會落在 21:1，通過對照表上的所有測試。
- 介於 4.5:1 到 7:1 之間的組合，在兩種文字尺寸上都能通過 AA，但只有大字能通過 AAA。
- 低於 3:1 的組合無法通過任何文字規則，但仍可能適用於零碎的裝飾性圖形。
常見配色在對照表上的位置
認識門檻線只是對照表的一半；另一半在於了解實際調色盤在表上的落點。以下列舉幾組常見的配色，依對比由強到弱排列，讓你大致掌握日常顏色通常落在哪個位置：
- 純黑疊在白色上穩坐頂端的 21:1，通過對照表上的所有門檻。
- 深藍色文字搭配白色背景，通常遠高於 AAA 上限 7:1，因此通過每一條線。
- 中度灰色搭配白色，往往落在中間地帶——一般文字通常能通過 AA，但很少能過 AAA。
- 淺灰提示文字搭配白色，幾乎都會落在 3:1 線以下，無論是內文或大字都過不了 AA。
- 像天空藍這樣鮮豔的品牌色搭配白色，常常落在 3:1 與 4.5:1 之間——適合用於大型標題與 UI 點綴，但用於內文仍嫌不足。
以上僅供定位參考。色相與亮度的細微變動，就能讓一組配色跨越不只一個門檻區段，這正是為什麼參考對照表比目測色卡更可靠。若要得知任何特定十六進位色碼的精確比率，請直接於下一節介紹的工具中進行量測。
對比數字無法涵蓋的部分
對照表量測的是亮度對比，而非色相。兩種色相差異極大但亮度相近的顏色——例如深紅疊在深綠上——所產生的比率可能過不了 AA，即使在某些觀者眼中看起來相當分明。反之亦然：一組在某位色覺缺陷者眼中不合格的配色，可能在另一位眼中合格。大約每十二名男性中有一人、每兩百名女性中有一人具有某種形式的色覺缺陷，因此任何僅仰賴色相來傳達意義的設計，都將流失相當比例的受眾。
這個公式同樣假設背景是平面的。漸層、半透明覆蓋層，以及疊在照片影像上的文字，都會讓實際背景在每個字母下產生變化，因此對照表所給出的單一數字，可能會掩蓋字元落在最亮與最暗處時的真實失敗情況。提示文字、停用狀態，以及極細的裝飾性字型，都是常見的失敗熱點，值得依據實際渲染的像素（而非理論上的十六進位色碼）重新檢驗。
對照表並不評估語言層面的可讀性——字型外觀、字級、行距與語言本身都落在公式之外。請將對照表視為必要的基本門檻，而非全部的工作。
將任何配色丟入 Color Contrast Checker
參考對照表是讀取已知比率最快的方式，但多數時候你是從某個品牌色出發，想知道它落在何處。Color Contrast Checker 正是為這個任務而設計：給它兩個十六進位色碼，它就會回傳比率，以及每個相關 WCAG 門檻的通過或未通過徽章。
- 使用選色器或直接輸入像 #111111 這樣的十六進位色碼來設定前景（文字）顏色。
- 同樣方式設定背景顏色，例如 #ffffff。
- 讀取對比比率以及 AA／AAA 的通過或未通過徽章，並調整任一顏色直到符合你需要的等級。
這個工具會同時回報一般文字的 AA 與 AAA、大字的 AA 與 AAA，以及 UI 元件與圖形的 3:1 非文字規則。透過這種方式，對照表實際上將你的配色團團包圍——你能看到它跨越了哪些門檻、又在哪些門檻前止步，而無需自行計算比率。如果想深入了解對照表背後的數學，Accessibility Contrast Ratio: Formula and Thresholds 指南會一步一步拆解同一套公式。
最後一項值得養成的習慣。對照表是地板，而非天花板。在許多地方，達到 AA 是法律與無障礙的基本底線——美國的 ADA、聯邦機構適用的 Section 508，以及歐盟公共部門網站適用的 EN 301 549 都直接引用 WCAG——但只要設計允許，朝 AAA 邁進，能讓最廣泛的受眾都能舒適閱讀。盡可能將對比線設得比最低要求更高，並在每次推出新顏色時重新對照表格進行檢查。