多數人檢查網站配色，靠的是盯著螢幕看順不順眼，文字色跟背景色搭起來會不會刺眼、看起來夠不夠清楚。但這件事其實不是美感問題，而是一組算得出來的數字。把同一組配色丟進檢測工具，常常會發現螢幕上明明看得很清楚的字，數值卻連及格線都摸不到。
這組數字有個正式名稱叫網頁色彩對比度，用來衡量文字色與背景色之間的相對亮度差異，範圍從 1:1（兩色完全相同）到 21:1（純黑配純白）。國際無障礙標準 WCAG 對這組數字訂了明確門檻，一般文字至少要達到 4.5:1 才算合格，差 0.1 都算沒過，肉眼再怎麼覺得清楚也沒用。看懂這組數字怎麼算、門檻怎麼訂，再搭配幾款免費工具實測，你就能自己把整個網站的配色一項一項驗過一輪。
先從對比度這組數字本身怎麼定義講起，再一路拆到門檻、檢測步驟，以及最容易被漏掉的角落。
網頁色彩對比度是什麼？怎麼算出這組比值？
把同一段文字放在不同背景上，人眼會覺得「這個比較清楚」，但這種感覺沒辦法拿來跟別的網站比較，也沒辦法訂成規範。網頁色彩對比度要解決的正是這個問題，把文字色跟背景色兩種顏色的相對亮度拿來做比較，換算成一個從 1:1 到 21:1 的比值，1:1 代表兩種顏色完全相同，等於沒有對比；21:1 是黑白對比的極限值，也就是純黑文字配純白背景。
這個比值有個特性容易被忽略。不管是深色字配淺色底，還是淺色字配深色底，只要兩種顏色不變，算出來的比值都一樣，對比度比的是兩色的亮度差距，不是誰在前面、誰在後面。
相對亮度公式，藏在對比度背後的計算方式
這組比值不是憑印象抓出來的，背後有一條國際標準訂好的公式，算法是把兩種顏色相對亮度中較亮的那個加上 0.05，除以較暗那個加上 0.05，寫成算式就是（L1+0.05）/（L2+0.05），L 代表的是相對亮度。
相對亮度本身也不是直接拿螢幕上看到的 RGB 數值加加減減。作法是先把每個顏色的紅、綠、藍三個色版分別做一次非線性轉換（sRGB 顯示器本身不是線性輸出，得先校正回來），再依人眼對三種顏色的敏感度給不同權重加總：紅色佔 0.2126、綠色佔 0.7152、藍色佔 0.0722，人眼對綠色最敏感，權重也給得最高。
這一串換算讀起來繞，但重點其實很簡單，這是一個有國際標準公式撐腰的數字，不是設計師憑經驗估的，也不需要自己拿計算機算。後面會介紹的免費工具都會自動幫你跑完整套公式，你只要看得懂結果就好。
WCAG AA 與 AAA 的對比度門檻差異
公式算得出數字，卻沒告訴你這個數字要多高才算過關，這件事由 WCAG（網頁內容無障礙規範）訂出兩個等級。一般文字在 AA 等級要達到 4.5:1，AAA 等級要達到 7:1。
多數人不知道的是，這個門檻不是所有文字統一適用，字級夠大的文字，門檻會放寬。所謂的「大字」有明確定義，字級達 18pt（約 24px）以上的一般字重，或是 14pt（約 18.67px）以上的粗體字，都算大字。大字在 AA 等級只要 3:1，AAA 等級 4.5:1 就過關，同樣是及格線，大字比一般內文寬鬆了不少。
也不是每一段文字都會被這條規定盯上。幾種情況本來就排除在檢測範圍外：還沒啟用的 UI 元件，例如反灰的停用按鈕；純粹裝飾用途的文字；沒有人看得到的隱藏文字；圖片中屬於其他視覺內容一部分的文字，例如照片背景裡剛好出現的招牌字；還有品牌 Logo 或標誌上的文字。這些都不受對比度規定約束，搞懂這幾個例外，才不會把力氣花在不需要達標的地方。
台灣網站也要達標嗎？官方無障礙規範怎麼定？
這套門檻聽起來像是國際上的技術規範，跟台灣網站沒什麼關係，但這其實是一個誤會。
台灣的網站無障礙規範由數位發展部（前身為國家通訊傳播委員會 NCC）旗下的無障礙網路空間服務網訂定並公告，其中檢測等級 AA 對應指引 4.3、檢測等級 AAA 對應指引 4.6，門檻值直接沿用 WCAG 同一套算法，一般文字 AA 4.5:1、AAA 7:1，大字 AA 3:1、AAA 4.5:1，數字完全沒有另外訂一套。
換句話說，公務機關網站、政府標案要求的無障礙檢測，用的就是同一組公式跟同一套門檻，不是另外發明的在地標準。這也代表前面講的對比度算法跟後面會介紹的免費檢測工具，一樣可以直接拿來驗證台灣網站有沒有達到官方要求，不用另外找專屬工具。
3 步驟檢測網頁色彩對比度，看是否過 AA
檢測網頁色彩對比度不是丟一個網址給工具、按下按鈕就結束的一次性動作，而是一個會不斷重複的循環，先拿到顏色的實際數值，丟進工具算出比值，沒過就換色重測，三個步驟繞一圈，才算把一組配色驗完。下面拆開這三個步驟怎麼做。
步驟一：先抓出文字與背景的實際顏色色碼
檢測的第一步不是打開設計稿，而是打開瀏覽器的開發人員工具。原因很直接，設計稿上訂的顏色，跟網頁上實際套用出來的顏色常常有落差，可能是 CSS 疊加了透明度，也可能是工程實作時色碼打錯。用滑鼠右鍵點選文字，選擇「檢查」叫出開發工具，點選對應的文字元素，開發工具會列出這個元素目前實際套用的顏色色碼；背景色也用同樣方式，點選該區塊的容器元素查出色碼。兩組 hex 值都抓到手上，才進得了下一步。
步驟二：把顏色代入免費工具，算出對比度比值
拿到兩組色碼之後，貼進 WebAIM 的 Contrast Checker，這是網頁無障礙圈長年公認的標準免費工具。把文字色跟背景色的 hex 值分別貼進兩個欄位，畫面就會立刻顯示出對比度數字，還有一般文字、大字在 AA、AAA 各個等級是否通過的勾選結果，一目瞭然。如果懶得切換視窗，Chrome 開發工具本身在點選顏色時也會直接顯示對比度數字跟通過與否，不用另外開網頁。如果你懂一點技術，想把檢測放進自動化流程，WebAIM 這款工具也提供 API 參數，可以把色碼直接丟進去、拿到結構化的回傳結果，不必每次手動貼上。
步驟三：沒過門檻就換色重測，直到綠燈
如果測出來的數字沒過門檻，下一步是調整顏色，不是放棄設計。Chrome 開發工具的顏色挑選器裡有個對比度區塊，展開之後會畫出 AA、AAA 的目標線，滑鼠點一下建議色，顏色就會自動吸附到最接近門檻、又跟原本色調最接近的可過關顏色，不用自己一次一次猜。如果想保留更多主導權，也可以手動拖曳色調滑桿，一邊拖一邊看對比度數字即時變化，直到看到通過的標示。調完之後別急著收工，回頭把新色碼貼回檢測工具重新驗一次，確認真的過關，這一輪才算完成。
除了 WebAIM，還有哪些免費工具能交叉驗證？
只用一款工具、逐一點測所有文字，遇到頁面一多會做不完，不同工具其實擅長的情境不一樣。單色比對用 WebAIM 最快，整頁一次掃描要換工具，放進開發流程自動跑又是另一種需求，依照自己的情境挑對工具，才不會把時間都花在重複勞動上。
WAVE：一次掃出整頁的對比度問題
WAVE 是另一款免費工具，玩法跟 WebAIM 不太一樣，不用一組一組貼色碼，直接貼上網址，它就會把整個頁面掃過一遍，把所有對比度不足的文字位置直接標示在畫面上，比逐一點測快上不少。不過它也有明確的限制，遇到背景是漸層、加了濾鏡效果、或是半透明疊層造成的對比問題，WAVE 判斷不出來，只抓得到用 CSS 直接定義樣式的文字跟圖示，遇到這類複雜背景，還是得靠人工肉眼加上手動檢測補一輪。
Chrome DevTools 與 Lighthouse：開發過程順手測
如果本來就在用 Chrome 開發工具改版面，其實不用切換工具。「問題」分頁跟「CSS 總覽」面板可以一次列出整頁甚至整站套用的對比度問題，開發過程順手就能檢查，不必事後另外排一輪測試。到了上線前要做整體健檢，Lighthouse 的無障礙稽核更適合，跑完會產生一份報表，附上截圖標出哪些配色組合通過、哪些沒通過，適合當作上線前最後一關的把關動作。
axe DevTools：適合放進開發流程自動跑的進階選項
再進階一點的選項是 axe DevTools。Lighthouse 無障礙稽核底層引擎的其中一個來源就是 axe，它本身也有獨立的瀏覽器擴充功能，另外還有能整合進持續整合流程的版本。它涵蓋的規則集比單純的對比度檢測完整得多，比較適合已經有開發、測試流程的團隊，把無障礙檢查當成例行動作，每次部署前自動跑一輪，而不是等網站做完才想到要測。
不是過了 AA 就整站安全，這幾個地方最容易漏測
多數網站測完內文段落的對比度，就以為整站合規，這其實是最容易漏測的一步。對比度規定管的不只是大段落文字，還有幾個角落經常被忽略。
連結文字：顏色是唯一線索時，還要多一道對比
很常見的一種設計是把連結拿掉底線，純粹靠顏色跟旁邊的內文做區別，這種做法要多顧一道規定。連結文字本身跟背景的對比度一樣要達到 4.5:1，這點跟一般文字沒有差別；但因為連結唯一的識別線索是顏色，它跟周圍內文文字之間也至少要有 3:1 的對比，讀者才分得出這裡有一個可以點的連結，而不是普通文字。滑鼠移過去、或用鍵盤 Tab 鍵聚焦到連結時，也得出現一個不是靠顏色傳遞的視覺提示，例如浮現底線，單靠顏色變深變淺不算數。
這三個條件常常互相打架。舉個例子，內文是深灰色 #333333，連結原本設計成淺藍色 #6699CC，跟白色背景對比夠了，但跟旁邊深灰內文的對比只有 2:1 出頭，不到 3:1 的門檻；把連結顏色加深到 #336699 讓它跟內文的區隔夠了，卻可能讓連結跟白色背景的對比從原本的合格值往下掉。調整任何一邊，都得回頭把另外兩邊重新測一次，不能顧此失彼。
按鈕與圖示：非文字元件也有 3:1 門檻
很多人測完文字就收工，忘了按鈕外框、表單輸入框的邊框線，還有具有功能性的圖示，像是購物車、放大鏡、選單漢堡圖示，這些非文字元件跟旁邊的背景顏色，同樣至少要有 3:1 的對比，才看得出邊界在哪裡、按鈕長什麼樣子。這裡還有一個常被漏掉的細節，hover（滑鼠移過去）、focus（鍵盤聚焦）這些互動狀態，顏色通常會變，每一種狀態都要各自拿出來重新測一次，不能只測預設狀態就算過關。很多網站按鈕預設顏色測過關，滑鼠移上去變色之後反而不合格，自己都沒發現。
四捨五入陷阱：差一點點也不算過關
最後一個容易誤判的地方，是對比度數字的四捨五入。#777777 是網頁上很常見的一種灰色，拿去配白色背景，實測出來的對比度大約是 4.47:1。很多人看到 4.47 心裡會想這麼接近 4.5，應該算過吧，但 WCAG 的規定講得很明確，這個數字不能四捨五入湊到門檻，差 0.03 一樣算沒過。差一點也是沒過，想通過就得把顏色再調深一階，不是睜一隻眼閉一隻眼放行。
APCA 這套新演算法，網站現在需要跟上嗎？
檢測工具圈這幾年一直在討論一套新的演算法，叫 APCA（Advanced Perceptual Contrast Algorithm）。它跟 WCAG 2 現行公式最大的不同，是不再算出一個單一的比值，而是給一個有正負號的 Lc 值，正負號用來區分是深色底配淺色字、還是淺色底配深色字，而且計算時還會把文字的字級、字重一併考慮進去，不像現行公式，不管字大字小、粗體細體，用的都是同一套亮度比對。
這套演算法一度是 WCAG 3.0 草案裡的候選方案，但截至最新一版工作草案，視覺對比這部分具體要採用哪套演算法，W3C 仍未拍板定案，WCAG 3.0 整體都還在工作草案階段，距離正式定案還有一段時間。這代表現階段要判斷網站是否合規，標準仍然是本文一路講下來的 WCAG 2 AA、AAA 門檻，APCA 目前還不是可以拿來對外聲稱合規的正式依據，值得追蹤但不必急著換算法。
倒是檢測之後怎麼快速修這件事，已經有工具開始往自動化推進，部分設計工具的外掛已經能在挑色時直接建議一個最接近門檻、又最貼近原本色調的顏色，省下自己一次次試色的工夫。跟前面提到的開發工具顏色挑選器邏輯很像，只是這次是在設計階段就先擋下問題，不用等到開發完才回頭補救。
網頁色彩對比度這件事，最怕的心態是上線前測一次就好。品牌色改版、新增一個按鈕元件、換一組行銷活動的主視覺配色，都可能讓原本過關的組合悄悄跌出門檻之外，每一次配色異動，都值得回頭把取色、計算、調整這三個步驟重跑一輪，而不是等到有人反映看不清楚才想起這件事。把它當成每次改版的固定習慣，而不是一次性的檢查清單，才是真正把這組數字用在刀口上。