無障礙對比是一個介於 1:1 到 21:1 之間的單一數字,用來描述兩種色之間的亮度差異,也是網頁內容無障礙指引 (WCAG) 用來判斷文字在其背景上是否清晰可讀的精確指標。其背後的數學會將每個 sRGB 色彩通道從經過 gamma 編碼的 0 到 255 值轉換成線性光,然後以固定的感知權重——紅色 0.2126、綠色 0.7152、藍色 0.0722——合併這三個通道,得出相對亮度值 L。接著對比就是 (L1 + 0.05) 除以 (L2 + 0.05),其中 L1 是較亮的顏色,L2 是較暗的顏色。完全相同的顏色落在 1:1,純黑配純白則達到最高的 21:1,因此你所建立的每一組文字與背景配對,必定落在這個範圍內。這個數字不是設計師的意見,不是品牌規範,也不是感覺;它是無障礙社群共同同意的固定公式,而且越來越多採購人員、法規單位與原告會強制執行。
無障礙對比實際上在量測什麼
無障礙對比只量測一件事:兩種顏色之間的亮度差異。亮度是指顏色在幕上看起來有多亮,並且偏重綠色通道,因為人眼對綠色最為敏感。兩種色看起來差異極大,只要亮度接近,仍可能在對比測試中失敗。反之亦然:兩種看起來相當類似的顏色,如果一個偏暗、一個偏亮,也可能得到非常高的比值。
這就是為何對比是對稱的。將前景與背景對調會得到相同的數字,因為公式是用較亮顏色的亮度除以較暗顏色的亮度,然後在兩邊各加上 0.05,讓結果永遠不會崩塌為零。這個 0.05 常數能避免當兩種顏色都是純黑時出現退化的除法,否則會得到 0:0 而非可用的分數。它也稍微壓縮了上限端,讓兩個接近白的顏色仍能被辨識為不同。
範圍是固定的。完全相同的顏色正好落在 1:1,因為兩者的亮度相等,而 0.05 的補償也互相抵銷。純黑對純白會得到公式允許的最大值 21:1。每一個品牌色、每一組十六進位色碼、每一個設計權杖變數,都落在這兩個端點之間,這正是這個指標如此實用的原因:你只需要閱讀、比較、儲存一個數字,就能寫進設計指南,並在稽核時為它辯護。
你需要達到的 WCAG 數字
網頁內容無障指引將這個單一數字轉換成四個具體的通過門檻。AA 級是多數公開網站所追求的標準,要求一般內文至少達到 4.5:1,大型文字至少達到 3:1。AAA 級則是更嚴格的上限,用於需要特別清晰易讀的內容,要求一般文字達到 7:1、大型文字達到 4.5:1。另一項稱為非文字對比的規則,則要求 UI 元件、圖示與圖形物件(例如表單欄位邊框與焦點指示器)至少達到 3:1。
| WCAG 等級 | 一般文字 | 大型文字 | 非文字(UI 與圖形) |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
「大型文字」本身有其定義。WCAG 將符合以下條件的文字視為大型文字:常規字重下至少 18 點 (24 像素),或是粗體下至少 14 點(約 18.66 像素)。更粗、更大的字母較易閱讀,這就是為何同一組顏色配對能通過標題,卻在內文中失敗。請將最高的對比留給內文與小型 UI 文字,並把 3:1 視為大型標題、圖示與裝飾性圖形的寬鬆上限。
亮度對比為何對真實使用者重要
色覺缺陷比多數設計師想像的更為常見。全球色盲人口達數百萬之多,還有更多數百萬讀者有低視力、白內障,或只是在大太陽下用廉價螢幕閱讀。亮度對比是唯一能在所有這些情況下保持可讀的屬性,因為它錨定在亮度而非特定色相上。患有紅綠色盲的讀者與擁有完整色覺的讀者,所看見的亮度差異是相同的;這正是這個公式在測試的內容。
這在許多地方也是法律要求。《美國身心障礙者法案》(ADA) 在美國經常適用於網站,Section 508 強制聯邦機構提供無障礙對比,而歐洲標準 EN 301 549 也直接引用 WCAG 作為公部門網站的依據。通過無障礙稽核已不再是「有則加分」,而是越來越被視為合規基準。對比是最容易做對的事之一,因為它是帶有固定公式的單一數字。但漏掉它也同樣是法規人員、採購人員或申訴人最容易指出的問題之一。W3C 發布了底層的對比(最低)成功準則作為標準參考,任何檢查工具都只是該規格的實作。
如何使用色彩對比檢查工具測試一組顏色
- 使用選色器或輸入十六進位色碼(例如 #111111)來設定前景色。
- 以同樣方式設定背景色,例如 #ffffff。
- 讀取對比數值,以及一般、大型、非文字項目的 AA 與 AAA 通過或未通過標示,接著調整任一色,直到該配對達到你所需的等級。
用一個實際數字走一遍流程,以白色背景上的 #767676 為例。每個 sRGB 通道為 118 除以 255,約為 0.4627。因為這個值高於 sRGB 門檻 0.03928,線性光轉換公式為 ((0.4627 + 0.055) 除以 1.055) 的 2.4 次方,結果約為 0.1811。相對亮度是加權總和 0.2126 × 0.1811 加 0.7152 × 0.1811 加 0.0722 × 0.1811,因為三個權重恰好加總為 1.0000 且三個通道相等,化簡後即為 0.1811。對比則為 (1.0 + 0.05) 除以 (0.1811 + 0.05),也就是 1.05 除以 0.2311,約等於 4.54:1。這就是那組著名的灰底白字,勉強通過一般文字的 AA;再暗一點就會失敗,再亮一點對比又會跌破門檻。請使用色彩對比檢查工具來確認這個數字,並即時依相同公式測試你自己的調色盤。
結果能做與不能做的事
對比是亮度的量測,而不是色相的量測。兩種色相差異極大但亮度相近的顏色,例如紅底綠字,即使在許多觀者眼中明顯有別,仍可能未通過 WCAG。這正是 WCAG 不鼓勵僅依賴顏色傳達意義的原因;請搭配文字標、圖示或底線,讓無法分辨這兩種色相的讀者仍能接收資訊。
此外,公式無法直接處理的實務邊界情況也不少。置於漸層或圖片之上的文字,其實際背景會從元素一側變化到另一側,因此安全的做法是針對文字實際所在的明暗區域進行測試。半透明疊加層會讓問題更複雜,因為實際呈現的顏色取決於其下方的內容。佔位文字、停用的表單狀態、帶色背景上的焦點環,以及細緻的裝飾性字型,都是常見的失敗點,值得使用檢查工具再確認一次,因為設計師往往專注於內文而忽略了輔助文字。
所有運算都在你的瀏覽器中本機執行,這代表你可以私下測試品牌調色盤與設計權杖變數,無需上傳任何資料。這讓你能反覆調整配對,直到同時通過 AA 與 AAA,而不是只滿足於單一標章上的「夠好了」。
不必重新設計就能達標的實用技巧
將 AA 視為地板,而不是天花板。如果你的內文對比只以零點幾分之差通過 4.5:1,在眩光嚴重的螢幕上或對低視力讀者來說會顯得單薄,因此盡可能追求 AAA。大型粗體標題的門檻寬鬆得多(AA 為 3:1,AAA 為 4.5:1),這給了我們一個很好的理由:善用字重,而不是僅僅依賴顏色。
先以純白與純黑為背景測試你的品牌調色盤。許多飽和的品牌色,特別是中調的藍色與綠色,能輕鬆通過 UI 用的 3:1,卻未達白底內文要求的 4.5:1。常見的解法是針對內文將顏色稍微調向更暗、更不飽和的變體,同時把較亮的品牌色保留給標題、圖示與按鈕等適用 3:1 非文字規則的地方。若想從更宏觀的角度理解這如何融入實際的設計流程,無障礙對比實務指南在更多環境中介紹了類似的流程。
最後,請記住對比是配對的屬性,而非單一顏色的屬性。同一組十六進位色碼在白底內文上可能失敗,在近黑底內文上卻可能通過,反之亦然。在上線前對每個組合重新測試,並記住法律與使用者體驗的理由都指向同一方向:挑選對比最大的顏色配對,尤其是在最小文字所在之處。