PDF 的文字與其背景的對比必須至少達到 4.5:1,才能符合 WCAG 2.2 AA 標準對於一般文字的要求;大型文字(18.66 px 或 14 pt 粗體)則需達到 3:1。這些對比能確保視力較低或有色盲的使用者能輕鬆閱讀內容。Color Contrast Checker 工具可讓您即時驗證任何前景與背景的色彩組合,顯示精確的對比比例,並判斷是否符合 AA 或 AAA 級別。這對 PDF 來說特別重要,因為色彩選擇一旦定案便難以調整。透過在文件定稿前測試色彩,您可以避免昂貴的補救作業,並從一開始就確保無障礙性。

PDF 廣泛應用於表單、報告和正式文件,但其靜態特性使得色彩對比錯誤在發布後難以修正。與可動態更新的網頁不同,PDF 的色彩是嵌入檔案中的。若對比過低,使用者可能難以閱讀關鍵資訊,進而違反《美國身心障礙者法案》(ADA) 或第 508 條等法令的合規規定。例如,淺灰色文字搭配白色背景看起來乾淨,但不符合 WCAG 標準。Color Contrast Checker 簡化了這個流程,讓您輸入十六進位值,或使用色彩選擇器直接從 PDF 中取色。接著您可以調整色彩直到達到所需比例,確保文件對所有讀者皆具無障礙性。

how to check color contrast for accessibility in pdf
how to check color contrast for accessibility in pdf

為何色彩對比在 PDF 中至關重要

色彩對比是數位無障礙性的核心要求。根據 W3C 網頁內容無障礙指引 (WCAG) 2.2,對比不足是視障使用者最常見的障礙之一。在 PDF 中,這個問題更加嚴重,因為此格式常用於手冊、合約或教育資料等長篇內容。若文字難以閱讀,使用者可能完全放棄該文件,使其失去原本的用途。

除了法規遵循外,良好的對比也能提升所有人的可讀性。WebAIM 專案的研究顯示,低對比是最常被回報的無障礙問題,影響白內障、青光眼患者,甚至暫時性視覺疲勞的使用者。PDF 常被列印或在不同亮度的螢幕上檢視,遵循對比標準可確保內容在各種情況下都清晰易讀。Color Contrast Checker 工具透過對您的色彩選擇提供即時回饋,協助您避開這些陷阱。

如何在 PDF 中檢查色彩對比

在 PDF 中檢查色彩對比包含三個關鍵步驟:識別文字與背景色彩、依 WCAG 標準進行測試,以及必要時進行調整。使用合適的工具,這個流程很簡單。以下是使用 Color Contrast Checker 的逐步指南,無論使用何種軟體(Adobe Acrobat、Microsoft Word 或 Canva 等)建立的 PDF 都適用。

  1. 從 PDF 中擷取色彩。在 Adobe Acrobat 或瀏覽器等檢視器中開啟您的 PDF。使用色彩選擇工具(例如 Adobe Acrobat 中的滴管或 ColorZilla 等瀏覽器擴充功能)來取樣文字與背景的精確十六進位值。例如,若您的文字是深藍色 (#1A237E) 搭配淺灰色背景 (#E0E0E0),請記下這些數值。
  2. 開啟 Color Contrast Checker。在瀏覽器中前往 /color/color-contrast-checker/。該工具可立即載入,無需安裝或註冊。
  3. 輸入前景(文字)色彩。在「Foreground」欄位中輸入文字色彩的十六進位值(例如 #1A237E)。或者,點擊色彩選擇器以視覺方式選取色彩。
  4. 輸入背景色彩。在「Background」欄位中重複相同步驟以輸入背景色彩(例如 #E0E0E0)。
  5. 檢查對比比例。工具將顯示對比比例(例如 7.2:1),並標示是否符合一般與大型文字的 WCAG AA 與 AAA 標準。例如,7.2:1 的比例在一般文字上同時通過 AA 與 AAA。
  6. 必要時調整色彩。若比例過低,請調整前景或背景色彩。工具會即時更新,讓您能立即看到每次變更的效果。例如,將文字加深為 #0D1B60 搭配相同的背景 (#E0E0E0),比例可提升至 9.2:1。
  7. 分別測試大型文字。對於標題或大型文字(18.66 px 或 14 pt 粗體),WCAG 允許較低的 3:1 比例。使用該工具驗證這些元素同樣符合標準。例如,標題使用 #3F51B5 搭配 #FFFFFF 時,比例為 4.6:1,符合大型文字的 AA 標準。
  8. 更新您的 PDF。確認色彩符合標準後,請將變更套用至原始文件。儲存 PDF 並再次測試,以確保沒有其他對比問題。

PDF 色彩對比的常見陷阱

即使是經驗豐富的設計師也可能忽略 PDF 中的對比問題。以下是一些常見錯誤以及避免方法:

問題 失敗原因 修正方式
白色背景上的淺灰色文字 對比比例通常低於 2:1,連最寬鬆的標準都無法通過。 將文字加深至至少 #757575(在白色上對比為 4.5:1)。
彩色背景上的彩色文字 某些色彩組合(例如紅配綠)雖然鮮明,但對比偏低。 使用 Color Contrast Checker 測試實際組合。調整色相或飽和度以改善比例。
忽略大型文字 設計師常假設大型文字自動具備無障礙性,但某些組合(例如 #5C6BC0 配 #E8EAF6)無法達到 3:1。 使用該工具測試所有文字大小,包括標題。
假設印刷色彩與螢幕一致 PDF 中的 RGB 色彩印刷後可能變深或變淺,進而影響對比。 測試印刷樣本,或使用 RGB to CMYK converter 預覽印刷色彩。
忽略互動元素 對比偏低的按鈕或表單欄位(例如白底淺藍)可能難以辨識。 單獨測試所有互動元素,因為它們常使用不同的配色。

簡化 PDF 色彩對比測試的工具

雖然 Color Contrast Checker 是測試個別色彩組合最快的方式,但其他工具能協助簡化整份 PDF 的流程。以下說明它們如何融入您的工作流程:

  • Adobe Acrobat Pro:內建無障礙檢查工具,可標示對比問題。但它無法像 Color Contrast Checker 一樣提供即時回饋,因此您需要手動調整色彩並重新測試。
  • PDF Accessibility Remediation Tool (CSU):可透過單一登入 (SSO) 在 https://www.csusb.edu/pdf-remediation 存取的系統級工具。它會掃描 PDF 中的對比問題及其他無障礙瑕疵,但最好在初步使用 Color Contrast Checker 測試後再使用。
  • ColorZilla(瀏覽器擴充功能):讓您直接從瀏覽器中開啟的 PDF 取色。可快速擷取十六進位值,再輸入 Color Contrast Checker。
  • WebAIM Contrast Checker:類似 Color Contrast Checker 的免費線上工具,但功能較少。適合快速檢查,但缺少我們工具的即時調整功能。

對大多數使用者而言,Color Contrast Checker 是最佳的起點,因為它提供即時回饋並允許快速反覆調整。一旦確認色彩符合 WCAG 標準,您可以使用 Adobe Acrobat 或 CSU 補救服務來驗證整份文件。

WCAG 對比比例要求

WCAG 2.2 為不同類型的文字定義了特定的對比比例門檻。了解這些要求有助於您決定在 PDF 中優先測試哪些元素。下表摘要說明關鍵標準:

文字類型 最低對比比例 (AA) 強化對比比例 (AAA)
一般文字(18.66 px 或 14 pt 以下) 4.5:1 7:1
大型文字(18.66 px 或 14 pt 粗體以上) 3:1 4.5:1
裝飾性文字(標誌、停用元素) 無最低要求 無最低要求
UI 元件(按鈕、表單欄位) 3:1 4.5:1

例如,白色背景上的 12 pt 文字 (#333333) 對比為 15.3:1,符合 AA 與 AAA 標準。然而,同樣背景上 16 pt 標題使用 #757575 時,比例為 4.6:1,通過 AA 但未達 AAA。Color Contrast Checker 會清楚標示這些結果,讓您能依專案需求決定要符合哪個等級。

請注意,這些比例適用於感知對比,而非僅僅是色彩之間的數學差異。例如,黃色 (#FFFF00) 在白色 (#FFFFFF) 上比例為 1.07:1,雖然色彩視覺上截然不同,但所有標準都不及格。請務必依賴工具的計算結果,而非視覺估算。

在不同 PDF 製作工具中測試色彩對比

檢查色彩對比的流程會因您用來製作 PDF 的軟體而略有不同。以下是針對幾個最常見工具所提供的專屬說明:

Adobe Acrobat Pro

  1. 在 Adobe Acrobat Pro 中開啟您的 PDF。
  2. 前往 工具 > 輔助功能 > 完整檢查
  3. 執行輔助功能檢查工具,它會在「對比」項目下標示出對比問題。
  4. 針對每個被標示的問題,記下文字與背景顏色,使用滴管工具取樣其十六進位值。
  5. 將這些數值輸入 色彩對比檢查工具,以驗證比率並視需要進行調整。
  6. 更新來源文件(例如 InDesign 或 Word)中的顏色,然後重新產生 PDF。

Microsoft Word

  1. 開啟您的 Word 文件,並選取要測試的文字。
  2. 記下字型顏色(例如透過「常用」索引標籤中的色彩選擇器)。
  3. 檢查文字方塊或頁面的背景顏色(例如透過「設計」索引標籤)。
  4. 將這些顏色輸入到色彩對比檢查工具中。
  5. 如果比率過低,請在 Word 中調整顏色並重新測試。
  6. 將文件匯出為 PDF(檔案 > 匯出 > 建立 PDF/XPS),然後再次驗證 PDF 中的顏色。

Canva

  1. 在 Canva 中開啟您的設計,並選取文字元素。
  2. 點擊工具列中的色票,查看文字顏色的十六進位值。
  3. 記下文字方塊或頁面的背景顏色(點擊背景以查看其十六進位值)。
  4. 將這些數值輸入到色彩對比檢查工具中。
  5. 如果比率不足,請在 Canva 中調整顏色並重新測試。
  6. 將設計下載為 PDF(分享 > 下載 > PDF 標準),然後在匯出的檔案中驗證顏色。

Google Docs

  1. 開啟您的 Google 文件,並選取要測試的文字。
  2. 點擊工具列中的文字顏色圖示,查看十六進位值(或使用像 ColorZilla 這類瀏覽器擴充功能來取樣)。
  3. 記下頁面或文字方塊的背景顏色。
  4. 將這些數值輸入到色彩對比檢查工具中。
  5. 視需要在 Google 文件中調整顏色,然後匯出為 PDF(檔案 > 下載 > PDF)。
  6. 開啟 PDF 並再次驗證顏色,因為 Google 文件的匯出過程有時會稍微改變顏色。

成功處理 PDF 色彩對比的最終訣竅

確保 PDF 中的色彩對比是持續進行的流程,但以下訣竅能協助您避開常見的陷阱並簡化工作流程:

  • 提早並經常測試。 在設計過程中就檢查對比,而非只在最後才檢查。這能節省時間,並避免臨時補救。
  • 使用一致的調色盤。 為您的品牌或專案定義一組無障礙色彩並堅持使用。像 調色盤產生器 這類工具能協助您從一開始就建立符合 WCAG 標準的調色盤。
  • 不要依賴灰階。 有些設計師認為將 PDF 轉換為灰階就能顯示對比問題,但這並不總是正確的。灰階可能會掩蓋低對比組合,而這類組合對色盲使用者來說仍有問題。
  • 與真實使用者一起測試。 可能的話,邀請低視力或色盲使用者檢視您的 PDF。他們的回饋能點出自動化工具可能遺漏的問題。
  • 記錄您的色彩選擇。 保留 PDF 中所有文字與背景配對的十六進位值與對比比率紀錄。這能讓日後更新文件或建立類似設計時更加容易。

將色彩對比檢查工具整合到您的 PDF 製作流程中,能確保您的文件對所有使用者都可存取、符合法律標準,並且在任何情境下都易於閱讀。無論您是在設計表單、報告或教育資源,花時間驗證色彩對比雖是小小一步,卻能帶來巨大的差異。

相關指南:輕鬆在 Figma 中檢查色彩對比以提升無障礙性

相關閱讀:如何在 Discord 中取得色彩漸層

相關閱讀:如何正確地在 Figma 中檢查色彩對比