真實產品設計中的 WCAG 對比度——案例與陷阱

對比度其實在量什麼

WCAG 對比度比較兩個顏色——文字與其背景——的相對亮度（relative luminance），尺度從 1:1（相同）到 21:1（純黑配純白）。公式是 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較亮顏色的亮度、L2 是較暗的。關鍵詞是亮度，不是色相：對比講的是顏色有多亮或多暗，而非它們看起來有多不同。

這就是為何兩個鮮明、明顯不同的顏色仍可能失敗。一個中紅和一個中綠可以落在幾乎相同的亮度，得出接近 1:1 的比值——一個的文字配另一個的背景幾乎無法閱讀，即使它們是「不同顏色」。對比和色彩鮮豔度並非同一回事。

精確的門檻

WCAG 2 的 AA 等級要求一般文字 4.5:1、大型文字 3:1。大型定義為至少 24px（18pt），或粗體時 18.66px（14pt）——更小的像素尺寸只有在粗體時才算「大型」。AAA 等級把這提高到一般 7:1、大型 4.5:1。

有一條人們會忘的獨立規則：成功準則 1.4.11（非文字對比）要求使用者介面元件與有意義的圖形——按鈕邊框、輸入框外框、圖示、焦點指示——對其相鄰顏色達 3:1。被停用的控制項免除對比下限，但這個豁免常被濫用，用來合理化難以看見的非作用狀態。

真實設計在哪裡失敗

最常見的失敗是以「優雅」之名在白底上用淺灰正文。像 #999999 這樣的中灰配白只有約 2.8:1——直接不過 AA。佔位文字通常更淺、幾乎從不通過，團隊卻經常把真正的指示放進去。

品牌色是另一個陷阱：大量中間調的品牌色板，按鈕標籤配白底時無法過 AA，所以標籤得變深、或按鈕得變深。配在主視覺圖片或漸層上的文字是最微妙的情況——對比度逐像素變化，所以一段說明文字可能在照片的暗部通過、在亮部失敗。深色模式也常被忘記：低對比的深灰配黑，和它的淺色模式表親一樣不及格。

檢測器抓不到的陷阱

對比檢測器比較兩個純色，但真實文字不是純色。一個用一般字重通過的比值，在髮絲或細字體裡可能讀起來很差，因為數學忽略了筆畫寬度——細字形在螢幕上的墨量比比值所暗示的少。小的抗鋸齒文字在邊緣也實質降低了對比。

還有兩個陷阱：把大型文字豁免套用到粗體但仍很小的文字（它必須達到尺寸門檻），以及把通過的比值當成完整的無障礙。對比（1.4.3）與不單靠顏色（1.4.1）是分開的要求——一個對比通過、卻只靠顏色和正文區分的連結仍然失敗。永遠在最壞情況的像素上測試配在圖片和漸層上的文字，而非平均。

今天用 WCAG 2，明天看 APCA

WCAG 2 的比值有用但不完美。因為它不建模字體大小、字重，或人眼實際如何感知亮配暗對暗配亮，它對某些亮色文字組合可能太嚴、對某些暗色組合太寬。設計師在一個配對「看起來沒問題」卻失敗、或「看起來太細」卻通過時，就會感受到這點。

提議的替代是 APCA（Accessible Perceptual Contrast Algorithm，無障礙感知對比演算法），為未來的 WCAG 3 而探索。APCA 把文字大小、字重和對比極性納入權重，力求更貼近感知。它尚未具規範性——你不能依它主張符合性。務實的立場是：今天交付到 WCAG 2 AA，並留意 APCA 標準的走向。

要點

記住兩個數字：正文 4.5:1、大型文字與 UI 元件 3:1。 多數決定都回到這兩個。

別相信灰配白的「優雅」——#999 配白不過 AA；交付前先檢查。

在最壞的像素上測試配在圖片和漸層上的文字，而非平均，因為比值會在區域內變化。

用髮絲字體通過的比值對真實讀者仍然失敗——要考慮字重和大小，而非只看數字。

對比與顏色獨立性是分開的要求——永遠別把顏色當成唯一信號。本站的色彩對比檢測器會為任何配對計算 WCAG 2 比值與 AA/AAA 結果。