PDF 的文字與背景色彩會產生單一對比率,而這個數字決定文件是否能通過 WCAG 無障礙規則。比率是由兩個色彩值本身計算出來,而非檔案格式,這表示無論文字位於 PDF 頁面、網頁或簡報上,同樣的數學運算都適用。在 WCAG 2.x 中,公式為 (L1 + 0.05) / (L2 + 0.05),其中 L1 是較淺色彩的相對亮度,L2 是較深色彩的相對亮度。要得到這個結果,每個色彩通道首先從 sRGB 轉換為線性光源,然後依紅色加權 0.2126、綠色加權 0.7152、藍色加權 0.0722。最終結果必定介於 1:1(完全相同的色彩)與 21:1(純白底純黑字)之間。取得比率後,您可以將其對應到符合性等級:AA 需要一般文字 4.5:1、大型文字 3:1,而 AAA 則將標準提升至 7:1 與 4.5:1。

how to check color contrast in pdf
how to check color contrast in pdf

為何 PDF 對比會影響真實讀者

PDF 經常作為文件的「最終」版本分享:合約、報告、政府表格、學術論文。一旦釋出,讀者能否順利閱讀,完全取決於檔案所附帶的色彩。大約每十二位男性中就有一位、每兩百位女性中就有一位具有某種形式的色覺缺陷,而還有數百萬人因為低視力、白內障,或在陽光下使用廉價螢幕而閱讀。當內文與背景之間的對比過低時,這些讀者都會無法辨識文字,無論內容有多好。

對比在許多地方也是法律要求。《美國身心障礙者法案》(ADA) 在美國例行適用於網站與數位文件,第 508 條要求聯邦機構必須遵循,而歐洲標準 EN 301 549 則直接引用 WCAG 作為公共部門網站的規範。許多標榜「已標記為無障礙」的 PDF 檢查工具會在驗證期間標記低對比,但無法修正問題;它們僅會告訴您某組色彩未通過。真正的修正發生在設計階段,也就是 PDF 匯出之前,這正是為何在出版前測試色彩組合是最可靠的做法。

從 PDF 中取出色彩

對比檢查工具處理的是兩個色彩值,而非 PDF 檔案本身,因此第一步是確認您實際使用的精確文字色與精確背景色。依據您手上的工具,有幾種可靠的方式可以取出這些值。

在 Acrobat Pro 中,開啟 PDF 並選擇 工具 → 印刷製作 → 輸出預覽。在預覽選項中,將十字準星放在文字與周圍背景上;Acrobat 會回報游標處像素的 CMYK 與 RGB 值。在 Acrobat Reader 中,屬性面板內色彩選擇器的滴管工具適用於較簡單的文件。許多其他 PDF 編輯器,包括 macOS 上的「預覽程式」,也提供相同的滴管功能。

對於在 InDesign、Word、PowerPoint 或 Google Docs 中製作後匯出的設計,您完全不需要取樣像素。開啟段落或字元樣式,直接從色票面板讀取十六進位或 RGB 值。如果您的 PDF 由第三方製作,請向他們索取原始色彩值;從已合併的匯出檔反向推導並不穩定,特別是 PDF 經過壓縮時更是如此。如需針對更棘手情況的完整擷取步驟,請參閱輕鬆檢查 PDF 中的色彩對比指南。

請記下前景(文字)的十六進位值與背景(文字所在底色)的十六進位值,接著進入對比檢查工具。

將兩組色彩輸入對比檢查工具

取得兩個十六進位值後,將其輸入色彩對比檢查工具,即可一次查看比率以及每個門檻的通過/未通過狀態。

  1. 使用色彩選擇器或直接輸入像 #111111 的十六進位值來設定前景(文字)色。
  2. 以同樣方式設定背景色,例如 #ffffff。
  3. 查看對比率以及 AA/AAA 的通過或未通過標記,並調整任一色彩直到符合您需要的等級。

若色彩組合未通過,最簡單的修正方式通常是加深文字色或調亮背景色。如果品牌色已固定,下一個最佳做法是將內文替換為同一色相的較深色調,而非引入新色彩。請將通過的組合存成小型樣式表,以便未來的 PDF 重複使用。

快速演算範例

為了讓公式更具體,我們使用檢查清單第一個步驟的色彩組合:#111111 配 #ffffff。

對於 #111111,每個通道的 sRGB 值為 17/255,約 0.0667。由於此值高於 0.03928 門檻,線性值為 ((0.0667 + 0.055) / 1.055)^2.4,計算後每個通道約為 0.00562。套用亮度加權後 (0.2126 × 0.00562) + (0.7152 × 0.00562) + (0.0722 × 0.00562) 得到約 0.00562 的相對亮度。對於 #ffffff,相對亮度為 1.0。

將這些值代入比率公式:(1.0 + 0.05) / (0.00562 + 0.05) = 1.05 / 0.05562 ≈ 18.88:1。這輕鬆超越 AA 一般文字 (4.5:1)、AAA 一般文字 (7:1),以及其下所有門檻。

WCAG 門檻一覽

數字本身很簡短,但卻是文件通過或被標記為未通過的關鍵差異。下表彙整了WCAG 2.x 規範為文字與非文字內容定義的所有對比門檻。

元素AAAAA
一般文字4.5:17:1
大型文字(18pt 標準或 14pt 粗體以上)3:14.5:1
UI 元件、圖示、圖形物件3:1未規範

任何未達到 AA 欄最低標準的項目都應視為未通過。將 AAA 視為延伸目標:在排版允許的情況下以此為標的,能為最廣泛的讀者提供舒適閱讀體驗,包括低視力、眩光或老花眼的讀者。

對比率無法涵蓋的部分

比率衡量的是亮度對比,而非色相。兩個色相差異極大但亮度相近的色彩,例如中等紅色搭配中等綠色,仍可能未通過,即使對某些觀看者來說它們看起來「不同」。這也是為何 WCAG 不建議僅依賴色彩傳達意義:請將色彩提示與文字標籤、圖示或底線搭配使用。

漸層、半透明覆蓋層,以及放在照片背景上的文字較難處理,因為實際背景會在元素上變化。一種安全的做法是針對文字可能落於的最淺與最深點進行測試。若對比在兩端皆成立,則介於兩者之間的任何位置都成立。預留文字、停用狀態按鈕、錯誤訊息,以及細小的裝飾性字型,都是常見容易出錯、值得再次檢查的地方。

最後請記住,對比是色彩組合的屬性,而非文字本身的屬性。在檢查工具中交換前景與背景,會產生完全相同的比率,因此輸入的順序並不重要。

PDF 無障礙色彩選擇的實用建議

圍繞一組經核准的組合建立調色盤並一致套用。大多數 PDF 只需要不超過兩到三組文字配背景的組合:一組給內文、一組給標題、一組給輔助文字(如圖說)。針對每組,記下前景與背景的十六進位值,並用對比工具檢查一次。將這些組合儲存在註解或品牌樣式表中,以便下一位編輯文件的人不會意外引入低對比的組合。

當品牌色無法通過時,請從飽和度而非色相著手。高度飽和的品牌色通常具有較高亮度,因此需要在其上搭配較深的文字色調。將品牌色本身調暗 10 到 20 個百分比,通常能將對比率提高幾個百分點,而不會讓色彩看起來明顯不同。匯出前請再次測試最終組合,特別是 PDF 將被列印時,因為油墨在紙上的對比可能與螢幕對比不同,使用實際印刷色票再核對一次是值得的。

色彩對比檢查工具中的所有運算都在您的瀏覽器本機執行,因此您可以在不上傳任何內容的情況下,私密地測試品牌調色盤、設計權杖與設計系統色彩。無論文件最終是 PDF、網頁還是簡報,同樣的工作流程都適用,因為比率、門檻與數學運算完全相同。

若您正在權衡選項,如何在 PowerPoint 投影片中檢查色彩對比對此有詳細說明。