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 中取色。接著您可以調整色彩直到達到所需比例,確保文件對所有讀者皆具無障礙性。

為何色彩對比在 PDF 中至關重要
色彩對比是數位無障礙性的核心要求。根據 W3C 網頁內容無障礙指引 (WCAG) 2.2,對比不足是視障使用者最常見的障礙之一。在 PDF 中,這個問題更加嚴重,因為此格式常用於手冊、合約或教育資料等長篇內容。若文字難以閱讀,使用者可能完全放棄該文件,使其失去原本的用途。
除了法規遵循外,良好的對比也能提升所有人的可讀性。WebAIM 專案的研究顯示,低對比是最常被回報的無障礙問題,影響白內障、青光眼患者,甚至暫時性視覺疲勞的使用者。PDF 常被列印或在不同亮度的螢幕上檢視,遵循對比標準可確保內容在各種情況下都清晰易讀。Color Contrast Checker 工具透過對您的色彩選擇提供即時回饋,協助您避開這些陷阱。
如何在 PDF 中檢查色彩對比
在 PDF 中檢查色彩對比包含三個關鍵步驟:識別文字與背景色彩、依 WCAG 標準進行測試,以及必要時進行調整。使用合適的工具,這個流程很簡單。以下是使用 Color Contrast Checker 的逐步指南,無論使用何種軟體(Adobe Acrobat、Microsoft Word 或 Canva 等)建立的 PDF 都適用。
- 從 PDF 中擷取色彩。在 Adobe Acrobat 或瀏覽器等檢視器中開啟您的 PDF。使用色彩選擇工具(例如 Adobe Acrobat 中的滴管或 ColorZilla 等瀏覽器擴充功能)來取樣文字與背景的精確十六進位值。例如,若您的文字是深藍色 (#1A237E) 搭配淺灰色背景 (#E0E0E0),請記下這些數值。
- 開啟 Color Contrast Checker。在瀏覽器中前往 /color/color-contrast-checker/。該工具可立即載入,無需安裝或註冊。
- 輸入前景(文字)色彩。在「Foreground」欄位中輸入文字色彩的十六進位值(例如 #1A237E)。或者,點擊色彩選擇器以視覺方式選取色彩。
- 輸入背景色彩。在「Background」欄位中重複相同步驟以輸入背景色彩(例如 #E0E0E0)。
- 檢查對比比例。工具將顯示對比比例(例如 7.2:1),並標示是否符合一般與大型文字的 WCAG AA 與 AAA 標準。例如,7.2:1 的比例在一般文字上同時通過 AA 與 AAA。
- 必要時調整色彩。若比例過低,請調整前景或背景色彩。工具會即時更新,讓您能立即看到每次變更的效果。例如,將文字加深為 #0D1B60 搭配相同的背景 (#E0E0E0),比例可提升至 9.2:1。
- 分別測試大型文字。對於標題或大型文字(18.66 px 或 14 pt 粗體),WCAG 允許較低的 3:1 比例。使用該工具驗證這些元素同樣符合標準。例如,標題使用 #3F51B5 搭配 #FFFFFF 時,比例為 4.6:1,符合大型文字的 AA 標準。
- 更新您的 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
- 在 Adobe Acrobat Pro 中開啟您的 PDF。
- 前往 工具 > 輔助功能 > 完整檢查。
- 執行輔助功能檢查工具,它會在「對比」項目下標示出對比問題。
- 針對每個被標示的問題,記下文字與背景顏色,使用滴管工具取樣其十六進位值。
- 將這些數值輸入 色彩對比檢查工具,以驗證比率並視需要進行調整。
- 更新來源文件(例如 InDesign 或 Word)中的顏色,然後重新產生 PDF。
Microsoft Word
- 開啟您的 Word 文件,並選取要測試的文字。
- 記下字型顏色(例如透過「常用」索引標籤中的色彩選擇器)。
- 檢查文字方塊或頁面的背景顏色(例如透過「設計」索引標籤)。
- 將這些顏色輸入到色彩對比檢查工具中。
- 如果比率過低,請在 Word 中調整顏色並重新測試。
- 將文件匯出為 PDF(檔案 > 匯出 > 建立 PDF/XPS),然後再次驗證 PDF 中的顏色。
Canva
- 在 Canva 中開啟您的設計,並選取文字元素。
- 點擊工具列中的色票,查看文字顏色的十六進位值。
- 記下文字方塊或頁面的背景顏色(點擊背景以查看其十六進位值)。
- 將這些數值輸入到色彩對比檢查工具中。
- 如果比率不足,請在 Canva 中調整顏色並重新測試。
- 將設計下載為 PDF(分享 > 下載 > PDF 標準),然後在匯出的檔案中驗證顏色。
Google Docs
- 開啟您的 Google 文件,並選取要測試的文字。
- 點擊工具列中的文字顏色圖示,查看十六進位值(或使用像 ColorZilla 這類瀏覽器擴充功能來取樣)。
- 記下頁面或文字方塊的背景顏色。
- 將這些數值輸入到色彩對比檢查工具中。
- 視需要在 Google 文件中調整顏色,然後匯出為 PDF(檔案 > 下載 > PDF)。
- 開啟 PDF 並再次驗證顏色,因為 Google 文件的匯出過程有時會稍微改變顏色。
成功處理 PDF 色彩對比的最終訣竅
確保 PDF 中的色彩對比是持續進行的流程,但以下訣竅能協助您避開常見的陷阱並簡化工作流程:
- 提早並經常測試。 在設計過程中就檢查對比,而非只在最後才檢查。這能節省時間,並避免臨時補救。
- 使用一致的調色盤。 為您的品牌或專案定義一組無障礙色彩並堅持使用。像 調色盤產生器 這類工具能協助您從一開始就建立符合 WCAG 標準的調色盤。
- 不要依賴灰階。 有些設計師認為將 PDF 轉換為灰階就能顯示對比問題,但這並不總是正確的。灰階可能會掩蓋低對比組合,而這類組合對色盲使用者來說仍有問題。
- 與真實使用者一起測試。 可能的話,邀請低視力或色盲使用者檢視您的 PDF。他們的回饋能點出自動化工具可能遺漏的問題。
- 記錄您的色彩選擇。 保留 PDF 中所有文字與背景配對的十六進位值與對比比率紀錄。這能讓日後更新文件或建立類似設計時更加容易。
將色彩對比檢查工具整合到您的 PDF 製作流程中,能確保您的文件對所有使用者都可存取、符合法律標準,並且在任何情境下都易於閱讀。無論您是在設計表單、報告或教育資源,花時間驗證色彩對比雖是小小一步,卻能帶來巨大的差異。
相關指南:輕鬆在 Figma 中檢查色彩對比以提升無障礙性。
相關閱讀:如何在 Discord 中取得色彩漸層。
相關閱讀:如何正確地在 Figma 中檢查色彩對比。