網頁內容可訪問性指南 (WCAG) 2.2 為一般內文定義了 4.5:1 的最低對比度比率，為大字體定義了 3:1 的比率（在 AA 級），並為 AAA 級定義了 7:1（一般文字）或 4.5:1（大型文字）的比率，該比率以前景色與背景亮度的數值比表示。在 Chrome 中檢查色彩對比以確保可訪問性，代表在設計發布前，必須驗證頁面上每一組文字與背景配對都符合這些精確的門檻。最快的方法是在任何 Chrome 分頁中開啟色彩對比檢查工具，輸入你的兩種顏色值，並透過其 AA 與 AAA 通過或未通過徽章讀取即時比率。
設計師與開發人員通常要等到視力較差的利害關係人標記某個段落難以閱讀，或可訪問性稽核工具產生一長串失敗清單時，才會發現對比問題。到了那個階段，重新調整元件顏色通常意味著重寫 CSS 變數、匯出更新後的素材，並重新提交螢幕擷圖。在設計仍於 Figma 中，或 CSS 仍在編寫時執行對比檢查，可以消除大部分這類重工。Chrome 自然成為執行此操作的場域，原因很簡單：渲染後的頁面就在這裡，因此你在瀏覽器中看到的顏色，就是使用者實際體驗到的顏色。
為何對比在 Chrome 中至關重要
Chrome 渲染了超過三分之二的網頁，因此任何在 Chrome 中存在的可訪問性問題，都會影響大多數使用者。當前景與背景顏色在亮度尺度上過於接近時，視力較差的讀者、年長的使用者、在強烈陽光下閱讀的任何人，或具有色彩視覺缺陷的人，都會難以解析文字。根據 WCAG 2.2 對比（最低）的理解說明，對比比率是使用相對亮度值計算的，而非僅憑視覺判斷，因此兩個在經過校準的螢幕上看起來合適的顏色，仍可能無法通過公式檢驗。
Chrome DevTools 在 Elements 面板中內建了對比讀數，但僅會評估你目前選取的單一元素。稽核整個設計系統、按鈕狀態、表單輸入、警示與懸停狀態，則需要檢查數十組配對。專用的檢查工具可讓你在目前工作的瀏覽器分頁中，快速循環檢視這些配對，無須離開。
Chrome 內建提供的工具
| 工具 | 尋找位置 | 功能說明 | 最佳用途 |
|---|---|---|---|
| DevTools 對比資訊 | Elements 面板、選色器 | 顯示目前選取元素的比率 | 針對單一規則進行抽樣檢查 |
| Lighthouse 可訪問性稽核 | DevTools Lighthouse 分頁 | 掃描頁面中的 WCAG 違規，包括對比問題 | 整頁稽核與報告 |
| Chrome 擴充功能 | Chrome 線上應用程式商店 | 在即時頁面上疊加對比警示 | 對已完成頁面進行視覺掃描 |
| 色彩對比檢查工具 | 任何瀏器分頁 | 使用 AA 與 AAA 徽章測試任意顏色配對 | 設計與編碼期間的反覆運算 |
在建置階段的多數可訪問性工作中，最後一列是最實用的。它不需要開啟 DevTools，適用於從樣式指南或 Figma 中取得的顏色，並提供與 Chrome 本身相同的 WCAG 比率公式。
使用色彩對比檢查工具在 Chrome 中檢查可訪問性對比
- 開啟新的 Chrome 分頁，並前往色彩對比檢查工具。
- 點擊前景色塊，使用選色器挑選文字顏色，或直接輸入十六進位值，例如 #111111。
- 點擊背景色塊，以同樣方式挑選背景顏色，例如純白的 #ffffff。
- 讀取以大數字顯示的對比比率，並查看一般文字與大型文字旁的 AA 與 AAA 徽章。
- 若徽章顯示未通過，請調整其中一個顏色，即時觀察比率更新，並在兩個徽章於你所需的等級通過時停止。
實際範例：背景 #ffffff（RGB 255, 255, 255）上的前景 #111111（RGB 17, 17, 17）。#111111 的相對亮度約為 0.0046，而 #ffffff 的相對亮度為 1。比率公式為 (1 + 0.05) 除以 (0.0046 + 0.05)，可化簡為 1.05 除以 0.0546，得出對比比率為 19.23 比 1——遠高於一般文字 7:1 的 AAA 門檻。這就是為何近黑色搭配純白，仍是內文排版最安全的起點調色盤。
解讀 AA 與 AAA 結果
檢查工具會為每組配對輸出兩個通過或未通過的徽章：一個用於一般文字，一個用於大型文字。WCAG 將大型文字定義為 18 點（約 24px）及以上，或粗體時 14 點（約 18.66px）及以上。一般文字則遵循更嚴格的 4.5:1（AA）或 7:1（AAA）規則。標題、英雄區文案與按鈕標籤通常符合大型文字的定義，僅需 3:1（AA）或 4.5:1（AAA）。
一個有用的習慣是，在檢查前先確認每個介面的目標等級。行銷登陸頁面通常僅以 AA 為目標，而政府與醫療保健網站則通常以 AAA 為目標，以符合 Section 508 的規範。同一組十六進位配對可能通過某個等級但未通過另一個等級，因此徽章讀數應與專案文件化的目標一致。
常見未通過的色彩配對
有幾種色彩組合在 mockup 中看起來很有風格，但無法通過對比公式。白底上的淺灰佔位符文字、從品牌調色盤中提取的柔和連結顏色，以及影圖片上的低透明度疊加層，全都低於 4.5:1 的標準。一個快速的檢查方法是將設計 token 轉換為十六進位值，並將每組配對透過檢查工具進行測試。若配對未通過，請加深前景、調亮背景，或兩者同時調整，然後重新檢查。通常反覆運算兩到三次，就能找到既保留品牌風格又能通過 AA 的配對。
對於正在配置 CSS 變數的開發人員而言，同樣的迴圈也適用。定義一次 token、在元件中引用它，並依賴檢查工具在 token 定案前確認所選配對。這能保持設計系統的一致性，並讓未來的稽核更快速，因為每個 token 都已記錄通過的比率。
將檢查工具與相關工具搭配使用
對比是完整可訪問性工作流程中的一環。當對比檢查通過但品牌仍需要更多選項時，色彩調色盤產生器可從選定的基礎顏色建構互補、類似與三等分的配色方案，這在設計需要既有色相的更深與更淺變化時非常實用。對於從幕擷圖或相片中提取顏色的設計師，有關在 Adobe Illustrator 中從影像萃取調色盤的實用指南，逐步說明能產生準備好送入對比檢查工具之十六進位值的滴管工作流程。
若顏色在 RGB 中通過對比，但專案也需要印刷輸出，請將它們透過RGB 轉 CMYK 轉換器執行，以查看同一組配對在印刷時的呈現效果，在印刷後色偏往往會降低感知對比。將對比檢查工具與 CMYK 轉換器結合使用，可為螢幕與印刷成品進行完整的上機前檢查。
建立以 Chrome 為核心的可訪問性習慣
團隊能做的最有效單一改變，是在每一組新色彩配對核准前（而非核准後）透過對比檢查工具執行。Chrome 在設計審查、程式碼審查與內容編輯期間本來就是開啟的，因此專用的檢查工具分頁消除了切換至其他應用程式的摩擦。請以對待程式碼檢查警告的方式對待 AA 與 AAA 徽章：紅色徽章會阻擋合併，黃色徽章會提示需記錄在案的例外，綠色徽章則是預期結果。
將此習慣與一份書面樣式指南搭配使用，其中列出內文、標題、連結、按鈕與警示的核准通過比率。未來的稽核會變得更快，因為對比的說明已記錄在案，新進團隊成員也能在不重新推導數值的情況下，比對現有元件。隨著時間推移，對比檢查將不再是獨立任務，而是悄然融入每個色彩決策之中。
若你正在權衡選項，在 Figma 中輕檢查色彩對比以確保可訪問性對此有詳細說明。
若你正在權衡選項，在 PDF 中輕鬆檢查色彩對比以確保可訪問性對此有詳細說明。