色彩對比檢查是無障礙設計中的一項評分機制，會以前景與背景這組顏色配對，依對比比例公式計算出一個數值，再與網頁內容無障礙指引（WCAG）所定義的最低門檻進行比對。針對一般正文，WCAG AA 要求對比比例至少為 4.5:1，而 WCAG AAA 則將其提高至 7:1；大型文字（粗略來說是 18 pt 以上，或 14 pt 粗體）則在 AA 標準下可放寬至 3:1，在 AAA 標準下則為 4.5:1。Color Contrast Checker 會將這些精確的門檻套用到你所提供的任意兩組顏色上，讓你在發佈頁面之前，把憑感覺猜測的工作，換成一個可以驗證的數字。
為無障礙而設計並不是一個抽象的練習。大約每十二位男性中就有一位、每兩百位女性中就有一位，患有某種形式的色覺缺陷；還有更多讀者會在刺眼的陽光下使用手機、使用低階螢幕，或只是在一整天的辛勞後感到眼睛疲勞。對比正是同時接住這些使用者的安全網。當文字與背景之間缺乏足夠的亮度差異時，字型會糊在背景上，內容就會變得無法閱讀——無論你的品牌色在設計工具中看起來多麼漂亮。
WCAG 對比門檻的真正意涵
WCAG 所使用的對比比例是一個相對亮度的公式，通常會以像 4.5:1 或 7.43:1 這樣的數字來表示。數字越大，代表文字與背景之間的分離程度越高。數字越高，能夠舒適閱讀你內容的受眾就越廣。
| 內容類型 | WCAG AA | WCAG AAA |
|---|---|---|
| 一般文字（低於 18 pt，或 14 pt 一般字重） | 4.5:1 | 7:1 |
| 大型文字（18 pt 以上，或 14 pt 粗體） | 3:1 | 4.5:1 |
| 非文字 UI 元件與圖形物件 | 3:1 | 3:1 |
這些門檻直接來自 W3C 官方建議，也引用於我們姊妹篇指南 如何依 WCAG 合規檢查色彩對比。請將 AA 視為一般網頁內容在法律與道德上的底線，並將 AAA 視為正文文字在合理範圍內可以追求的延伸目標。
在瀏覽器中執行雙色對比檢查
從一個色彩概念到做出通過或不通過的判斷，最快的途徑就是使用 Color Contrast Checker。它完全在你的瀏覽器中執行，不會將任何資料傳出你的裝置；只要更動任一顏色輸入，比例就會立即更新。如果你正在比對一組從 Color Palette Generator 取得的品牌色配對，你可以直接從那邊把十六進位色碼貼過來，不必重新輸入。
- 設定前景色。開啟檢查工具，找到前景欄位，通常標示為「Text」或「Foreground」。你可以點擊色票以使用內建選色器，也可以直接輸入十六進位色碼（例如 #111111）。
- 設定背景色。對背景欄位執行同樣的動作。常見的起點是使用 #ffffff 作為白色，但任何表面的十六進位色碼都可以使用，包括帶有底色的卡片顏色或品牌襯底色。
- 讀取對比比例。當兩個欄位都填入有效顏色時，工具會立即顯示像 4.5:1 或 7.43:1 這樣的數字。這就是你這兩組輸入之間的相對亮度比例。
- 查看 AA 與 AAA 標記。在比例數字旁邊，留意是否有針對小型文字、大型文字，以及（若有顯示）UI 元件的通過或未通過指示。這些直接對應到上方表格中的 WCAG 門檻。
- 調整到符合你需求的等級。把前景調暗一點、把背景調亮一點，或兩者同時調整。由於比例會即時更新，你可以感受到每一次細微調整的效果，並在標記翻轉為通過時立即停手。
以審查員的方式解讀結果
一旦你取得比例數字，下一步就是把它對應到你實際上線的內容上。內文段落、表單標籤、按鈕文字，以及行內連結，至少都應該通過 4.5:1 的 AA 標準。行銷標題與主視覺區塊中的展示文字，通常可以採用較寬鬆的 3:1 大型文字門檻，但前提是文字真的達到 18 pt 或以上，或是 14 pt 並為粗體。圖示、聚焦框，以及表單欄位的邊框雖然不屬於「文字」，但 WCAG 仍要求達到 3:1，以便視力較低的使用者能夠辨識它們。
一個常見的陷阱是：當正文使用 13 pt 一般字重時，卻仍信任 AA 標記。在 WCAG 的定義下，這種組合屬於一般文字，需要 4.5:1 而非 3:1。如果你不確定你的內容落在哪個分類，請以實際上線的頁面為準來檢查字級與字重，而不是看設計檔，因為響應式 CSS 在行動裝置上可能會把文字縮小幾個點。
修正未通過的配對
當檢查工具回報未通過時，你有三個誠實的選項：加深文字顏色、調亮背景顏色，或是接受這項未通過結果，並將該內容限制為僅能以大型文字呈現。設計師往往為了保險起見，直接跳到高對比的黑白配對，但這通常會不必要地犧牲品牌風格。亮度的細微調整通常就能解決問題。
舉例來說，在白色 #ffffff 背景上使用像 #777777 這樣的中灰色前景。這組配對的對比大約是 4.48:1，以極些微的差距未達到 4.5:1 的小型文字 AA 標準。把前景調成 #767676 反而會讓比例更低，因此應該改為調整到 #6b6b6b 或 #595959，以跨過門檻但又不至於變成純黑。你最終落定的具體數字取決於你的色板，這也是為什麼把配對實際跑過檢查工具，會比相信一套通用建議來得更可靠。
如果你正在設計深色主題，請反過來思考這個邏輯。從接近純黑的表面開始，選擇偏亮的文字顏色，而不是再加深。像 #e0e0e0 搭配 #121212 這樣的配對就能輕鬆通過 AAA；而在同一個表面上使用像 #9e9e9e 這類偏暗的文字，比例往往會掉到 4.5:1 以下，即使它在視覺審查者眼中看起來仍然清晰可讀。
對比檢查在實際工作流程中的位置
對比是設計系統層級的議題，而不是一次性任務。最聰明的落實時機，是在你第一次把一組顏色配對定義為可重複使用的設計標記時，因為這樣只需做一次，就能保護每一個會用到它的元件。把你的基本正文文字配對跑過 Color Contrast Checker，把比例記錄在標記定義旁邊，後續審查者就能輕易察覺是否偏離標準。
你也可以在任何顏色轉換之後做對比檢查，藉此節省時間。把品牌色來回轉換到印刷色系，往往會讓顏色變暗或改變飽和度；關於這個流程面，請參考 如何在瀏覽器中將 RGB 轉換為 CMYK 而不損失色彩準確度。在印刷打樣上看起來沒問題的十六進位色碼，到了螢幕上可能會未通過對比標準，因此請在任何色彩系統轉換之後重新驗證，包括 如何將 RGB 轉換為 HEX 一文中涵蓋的 RGB 轉十六進位色碼轉換。
最後，請把對比分數與真實裝置測試搭配起來做。在陽光直射下用一支平價手機打開頁面，放大到 200%，並請一位不是設計師的同事大聲唸出一段內文。工具上的綠色標記是必要條件，但並非充分條件。眼睛測試能確認你實際上線的數字，表現是否與公式預測一致。
檢查對比時的常見陷阱
- 每個畫面只測一組配對。一個頁面會用到許多前景與背景的組合，每一組都需要自己的對比比例。
- 忽略懸停、聚焦與停用狀態。一個按鈕在靜止狀態下通過對比標準，並不代表它在懸停狀態下也通過——一旦懸停樣式把文字調亮，就可能會未通過。
- 忽略半透明疊加層。RGBA 文字疊在帶有圖樣的背景上時，實際上看起來會是一個混合後的顏色，而檢查工具多半會以原始十六進位色碼來評分，而不是以視覺上的實際結果。
- 假設每台螢幕都會顯示相同的顏色。廣色域螢幕與未經校色的筆記型電腦螢幕，會讓兩個顏色看起來彼此更接近；公式本身仍然是正確的，但你的視覺直覺檢查可能會誤導你。
請把每一組不同的配對都跑過檢查工具，把結果記錄在標記旁邊，並在每次品牌更新或主題變更而調整底層十六進位色碼時，重新檢視這份清單。這個習慣能讓無障礙從上線前最後一刻的倉促補救，轉變為一項能納入一般設計審查流程的例行檢查。
想進一步了解，請參考 在 Chrome 中檢查色彩對比以提升無障礙。