色彩對比檢查工具使用 (L1 + 0.05) / (L2 + 0.05) 這個公式,來計算兩種顏色之間的 WCAG 對比度,其中 L1 是較淺顏色的相對亮度,L2 是較深顏色的相對亮度,結果範圍從 1:1(完全相同的顏色)到 21:1(純黑配純白)。每個顏色通道會先從 sRGB 轉換成線性光,再依紅色 0.2126、綠色 0.7152、藍色 0.0722 的權重合併成一個相對亮度值。算出來的比值會直接對應到 WCAG 的合規等級:一般文字 AA 至少要 4.5:1、大型文字 AA 要 3:1、一般文字 AAA 要 7:1、大型文字 AAA 要 4.5:1,而圖示、UI 元件等非文字元素則要 3:1。一款實用的檢查工具會一次顯示所有這些門檻,讓你讀到比值後,馬上就能看出這組前景色與背景色符合哪一項標準。Color Contrast Checker 依照的正是這個公式,並即時回報一般文字、大型文字與 UI 元件的通過或未通過標章。
一眼看懂 WCAG 門檻數值
你評估的每一個色彩對比範例,最終都會對應到五個定義明確的門檻之一。下表完全依照《網頁內容無障礙指引》(Web Content Accessibility Guidelines)的定義呈現,依據的是 W3C 的Contrast (Minimum) understanding document。
| 元素類型 | AA 最低值 | AAA 最低值 |
|---|---|---|
| 一般文字(未滿 18pt 一般字重,或未滿 14pt 粗體) | 4.5:1 | 7:1 |
| 大型文字(18pt 以上一般字重,或 14pt 以上粗體) | 3:1 | 4.5:1 |
| UI 元件、圖示、焦點指示器、表單欄位邊框 | 3:1 | —— |
大型文字的門檻比較低,因為在相同的亮度差下,較粗、較大的字形本來就比較容易閱讀。UI 元件與圖形物件並沒有另外一個 AAA 等級——依照 WCAG 2.x,AA 的 3:1 最低值就是官方要求。
三個步驟檢查一組色彩
用一款即時檢查工具,把任何前景色與背景色的組合拿去對照上表,只需要幾秒鐘。無論是驗證品牌調色盤、修正單一按鈕,還是稽核整個設計系統,這個流程都一樣。
- 用色彩選取器設定前景(文字)顏色,或直接輸入一個十六進位值,例如#111111。
- 用同樣的方式設定背景顏色,例如#ffffff。
- 讀取對比度以及 AA 與 AAA 的通過或未通過標章,再調整其中一個顏色,直到達到你需要的等級。
因為對比度是對稱的——它只取決於這兩種顏色,而不取決於哪一個是文字、哪一個是背景——你可以互換前景色與背景色,結果不會改變。這讓迭代變得很快:先選一組起始調色盤,把兩個十六進位值丟進檢查工具,就能即時讀到判定結果。
橫跨整個色譜的常見色彩對比範例
具體的範例能讓這些門檻更容易被記住。最極端的例子是純黑(#000000)配純白(#ffffff):它們的相對亮度值分別是 0 與 1,因此比值為 (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05,等於 21:1——數學上的最大值。這組配色能大幅超過每一項 WCAG 門檻,也常被引用為內文文字的黃金標準。
大多數真實設計都遠低於這個上限。深灰色內文配白色背景,是長篇文章中常見的搭配,通常會落在 AA 邊界附近——一般文字接近或剛好超過 4.5:1,但離 AAA 的 7:1 還有一段距離。中灰色文字配淺色背景,通常會直接無法通過 AA,因為亮度差距會很快縮小。像是白底配飽和藍,或米色底配深紅這類品牌色,依品牌色調的深淺不同,結果可能落在色譜的任何位置,這正是為什麼把它們丟進 Color Contrast Checker 檢查,會比用肉眼估算更保險。想更完整了解這些比值背後的計算方式,formula and thresholds guide 詳細說明了每一項權重與大型文字的定義。
一旦某個品牌色與接近白色的背景搭配好之後,接下來常見的檢查是反過來——深色品牌背景配淺色文字——適用於主視覺區塊與彈出對話框這類情境。因為比值是對稱的,你可以立即預覽結果:如果淺底深文字通過 AA,深底淺文字也會通過 AA。設計師常常會意外的情況,是白底配粉彩品牌色,這種組合在一般字級下常常不通過,卻仍可能在大型文字、AA 3:1 最低值的標準下通過。
常常無法通過對比度檢查的邊緣案例
對比度本身是一個乾淨的數字,但真實介面並不乾淨。有幾種情況即使主要的十六進位色碼在紙面上看起來沒問題,也經常會破壞可讀性。
- 漸層與半透明疊層。 元素上的實際背景會不斷變化,因此要針對文字可能落在的最亮與最暗的點分別測試。在漸層一端通過的比值,在另一端可能會失敗。
- 疊在圖片上的文字。 內文文字背後的照片,會逐區域改變感受到的對比區域。請把圖片最亮與最暗的區域當成不同的背景分別測試。
- 預留文字與停用狀態。 瀏覽器預設的預留文字顏色,以及許多框架層級的停用樣式,常常會低於 4.5:1 這條線。這些很容易被忽略,卻是常見的失敗點。
- 細筆畫的裝飾字型。 較細的字重比粗體需要更高的對比度,因為較細的筆畫在較低比值下會失去清晰度。AA 是一個底線,不是一個上限,對細字型尤其如此。
- 只靠顏色來區分。 對比度量測的是亮度,不是色相。紅配綠即使在許多人眼中看起來色彩分明,對比度仍可能不通過,這正是為什麼 WCAG 要求你在顏色之外,再搭配文字標籤、圖示或底線。
色覺缺陷相當普遍——男性出現某種程度色覺缺陷的機率遠高於女性——此外還有數以百萬計的人視力不佳、患有白內障,或是在大太陽下用廉價螢幕閱讀。足夠的亮度對比,正是讓內文、按鈕與錯誤訊息在所有這些情況下都保持可讀的關鍵。
對比度檢查在實際工作流程中的位置
對比度檢查不是最後一步的雜務。在設計流程中愈早進行,之後需要的返工就愈少。品牌調色盤的確定,是第一個自然的檢查點:任何會以文字形式出現在已知背景上的主色或輔色,都應該在進入設計系統之前先經過驗證。從那之後,每一個要上線的元件——按鈕、表單欄位、導覽連結、錯誤訊息、工具提示——都值得快速檢查一次。
法律風險也是考量之一。《美國身心障礙者法案》(Americans with Disabilities Act)在美國經常被套用到網站上,Section 508 要求聯邦機構必須具備無障礙功能,歐洲標準 EN 301 549 也直接引用 WCAG 作為公部門網站的依據。主要行動呼籲按鈕未通過 AA,可能意味著上線後還要進行補救工作,這在成本上遠比在設計階段就修正要高得多。
一切都在你的瀏覽器中本機執行,因此你可以私下反覆調整品牌調色盤與設計代幣(design tokens),不需要上傳任何東西。把你的十六進位值丟進 Color Contrast Checker,讀取通過或未通過的標章,調整到這組配色符合你目標受眾所需要的等級為止。
相關閱讀:Use a Random Color Generator for Accessible Contrast Pairs。