若要檢查圖片中的色彩對比，請使用滴管或色彩選擇器取樣文字顏色與背景顏色，將兩個十六進位值輸入 WCAG 2.x 對比檢查器，然後讀取對比比例以及 AA 與 AAA 的通過或未通過判定。回傳的數字是單一分數，可告訴你本文、按鈕、錯誤訊息以及其他圖片內文字，對視力較差、色覺缺陷者，以及在陽光下使用廉價螢幕的人是否清晰可讀。
設計師與開發人員經常會遇到這個問題。一個主視覺橫幅出貨時帶有半透明覆蓋層置於照片之上。一個按鈕存在於帶有柔和漸層的卡片中。一份 PDF 報告使用了在網站上看起來沒問題、但列印後失去對比的品牌顏色。在每個案例中，實際元素並不像 CSS 規則那樣整齊地宣告其顏色——你必須查看實際像素並自行取出數值。一旦你取得兩個十六進位代碼，剩下的工作就是數學運算，而這個運算就是《網頁內容可及性指南》指定的同一套運算。
為何圖片色彩對比測試在進入檢查器之前需要一個步驟
CSS 有內建的做法。開啟 devtools，讀取 color 與 background-color 屬性，你就無需猜測地取得兩個十六進位值。圖片不會給你那個東西。一張照片可能在單一文字背後有五十種灰階，設計工具的螢幕擷圖可能顯示尚未轉為設計令牌的顏色，而已平面化的 PDF 可能將文字埋入某個圖層，使得原本的顏色消失。因此在任何檢查器能夠執行其工作之前，你需要將像素轉換為十六進位。
那個額外步驟正是讓「從圖片取得色彩對比」與「從 CSS 取得色彩對比」成為不同工作流程的原因。大多數作業系統與瀏覽器都內建某種形式的滴管——macOS 有 Digital Color Meter、Windows 有內建的 Color Picker、Chrome DevTools 有色彩滴管，而大多數設計工具（Figma、Sketch、Photoshop）也都包含滴管。幾個免費的網頁型圖片色彩選擇器也可以從你點擊的任何像素取出十六進位值。輸出是一個六位數的十六進位代碼，你可以直接貼到對比檢查器中。
以白話解說 WCAG 對比公式
一旦兩個十六進位值到手，數學運算便在你的瀏覽器中執行，並遵循每個 WCAG 2.x 檢查器所使用的相同公式。每個色彩通道會先從 sRGB 轉換為線性光，然後使用權重 0.2126（紅）、0.7152（綠）以及 0.0722（藍）合併為相對亮度。對比比例為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較淺顏色的亮度，L2 是較深顏色的亮度。比例永遠介於 1:1（相同顏色）與 21:1（純黑對純白）之間。
要實際查看運算過程，以前景 #767676 配背景 #ffffff 為例。單一 sRGB 通道值為 118（滿分 255），或約 0.4627。因為該值高於 0.04045，所以會經過伽瑪展開：((0.4627 + 0.055) / 1.055)^2.4 ≈ 0.181。這裡三個通道相等，所以 #767676 的相對亮度為 0.181。白色的亮度為 1.0。比例即為 (1.0 + 0.05) / (0.181 + 0.05) = 1.05 / 0.231 ≈ 4.54:1。這僅略高於 AA 一般文字 4.5:1 的下限，所以白色背景上的中灰色本文標籤勉強通過。
同一套運算也說明了為何「差一點就通過」的顏色在現實中如此常見。調暗一階至 #777777，比例降至約 4.48:1，便跌破 AA 門檻。重點很清楚：單一一個十六進位數字就能翻轉判定結果，這正是你必須檢查而非目測的原因。如需更深入的運算解說，WCAG 對比比例公式與門檻指南會一步步拆解 sRGB 轉線性的過程。
從圖片取樣顏色並執行檢查
- 在任何圖片檢視器、設計工具或瀏覽器分頁中開啟你要測試的圖片。如果文字位於螢幕擷圖、PDF 頁面或設計稿上，該圖片就是你的起點。
- 使用滴管取樣文字顏色。直接點擊字母中最乾淨、最具代表性的填充區域。在 macOS 中，請開啟 Digital Color Meter；在 Windows 中，請使用內建的 Color Picker 或瀏覽器擴充功能；在 Chrome DevTools 中，請點擊任何顏色值旁的色票，然後選擇滴管。
- 複製取得的十六進位值——通常是像 #767676 或 #111111 這樣的六位數代碼。將其記為前景顏色。
- 以同樣方式取樣背景顏色。點擊文字所在表面的像素，遠離字母以免取到反鋸齒邊緣。複製該十六進位值作為背景顏色。
- 開啟色彩對比檢查器，在文字顏色欄位中輸入前景十六進位（例如 #111111），然後在背景欄位中輸入背景十六進位（例如 #ffffff）。
- 讀取對比比例以及一般文字、大型文字和 UI 元件的 AA/AAA 通過或未通過標籤。調整任一顏色，重新讀取標籤，直到你所需的等級通過為止。
如果你要檢查不只一組——例如一個五色的品牌調色盤對上白色背景——請對每種組合重複最後三個步驟，而非猜測哪些組合安全。批次測試花費幾分鐘，卻能發掘肉眼容易忽略的問題。
WCAG 對比門檻一覽
下表的門檻是每個檢查器都會報告的數值，並清楚對應到該工具所顯示的通過與未通過標籤。
| 符合等級 | 一般文字 | 大型文字 | UI 元件與圖形 |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
大型文字的定義為至少 18 點（24 像素）一般字重，或至少 14 點（約 18.66 像素）粗體。3:1 非文字規則涵蓋表單欄位邊框、聚焦外框、傳達意義的圖示，以及任何其他使用者需要識別的圖形物件，依據 W3C 的WCAG 2.1 對比（最低）規範。
解讀通過與未通過標籤
一個好的檢查器不只會輸出一個比例，它還會告訴你該比例在各等級代表什麼。對一般文字而言，任何 4.5:1 以上顯示 AA 通過；任何 7:1 以上顯示 AAA 通過；低於這些則全部顯示未通過。對大型文字，AA 通過降至 3:1，AAA 通過降至 4.5:1。對 UI 元件，3:1 是唯一門檻，未通過意味著表單欄位、聚焦外框或圖示將難以辨識。
一個有用的習慣是在不破壞設計的前提下，盡可能達成最高等級。AA 在大多數司法管轄區是法定下限，但 AAA 為最廣泛的受眾提供舒適的閱讀體驗。如果本文能達到 7:1 而不犧牲品牌識別，這比勉強達到 4.51:1 便宣告完成來得更穩固。如需更多關於將原始比例轉為最終判定的內容，WCAG 對比檢查器：從比例到通過或未通過的解說是實用的夥伴。
比例無法涵蓋的部分
對比比例是基於亮度的單一數字，因此它有一些值得了解的盲點。
它無法衡量色相，所以兩個色相差異極大——例如紅綠對比——若亮度相似仍可能未通過，即便某些觀察者覺得它們很不同。這也是為什麼 WCAG 不建議僅依賴顏色單獨傳達意義。請將顏色與文字標籤、圖示或底線搭配。
它無法妥善處理漸層或半透明覆蓋層。字母背後的有效背景在整個元素中會變化，而比例假設的是一個平坦表面。安全做法是取樣一個字母可能位於的最淺與最深背景像素，並檢查最差情況。
它對「圖片作為背景」的處理也不甚理想。一個標題置於滿版照片之上，其背後可能有數十種可能的背景亮度。請取樣最長文字後方最亮與最暗的區域，兩者皆檢查，確保最差情況仍能通過你所需的門檻。
它同樣無法察覺佔位文字、停用狀態，或通過數學運算但實務上失敗的纖細裝飾字型。請雙重檢查任何預期使用者閱讀但不會採取行動的內容。如需更長的陷阱清單，色彩對比檢查器秘訣與常見錯誤指南會逐一深入探討。
為何對比對真實讀者重要
對比是可用性需求，而非美觀需求。大約每十二位男性中就有一位、每兩百位女性中就有一位具有某種形式的色覺缺陷，還有數百萬人在低視力、白內障下閱讀，或在陽光下使用廉價螢幕。足夠的亮度對比是讓本文、按鈕與錯誤訊息對他們全體保持清晰的關鍵。
在許多地方這同樣是法律要求。《美國身心障礙者法案》常規應用於美國網站，《Section 508》強制規定聯邦機構必須遵守，歐洲標準 EN 301 549 則直接引用 WCAG 規範公共部門網站。通過對比分數是跨越該門檻最便宜、最快速的方法。
上述所有步驟在使用像色彩對比檢查器這類工具時，皆在你的瀏覽器本機執行，因此你可以測試來自任何來源的調色盤、設計令牌與螢幕擷圖，無需上傳任何東西。取樣兩個像素，貼上十六進位值，讀取標籤——這就是完整的工作流程。