色彩對比度檢查器

在瀏覽器中檢測WCAG顏色對比度

這款顏色對比度檢測器可測量文字顏色與背景顏色之間的WCAG對比度比率，並即時告知該顏色組合是否通過普通文字、大文字及UI元件的AA和AAA等級。輸入十六進位值、編輯RGB或HSL欄位、拖動亮度滑桿，或使用取色滴管從螢幕上擷取任意顏色——比率、通過/失敗矩陣和即時預覽均會在輸入時同步更新。

其原理與設計師已信賴的工具相同——採用與WebAIM和Adobe Color相同的WCAG計算公式——但額外提供即時可讀預覽、APCA（WCAG 3）評分以及一鍵修復不達標顏色對的功能。所有運算均在本地JavaScript中執行：您的顏色永遠不會離開您的裝置，也無需任何帳號。

WCAG AA與AAA門檻詳解

WCAG對比度比率從1:1（兩種相同顏色）到21:1（白底黑字）不等。AA等級——ADA和508條款等大多數法律要求的標準——要求普通文字達到4.5:1，大文字達到3:1。AAA等級則將標準提升至7:1和4.5:1。大文字指18pt（24px）及以上，或14pt（約18.66px）及以上的粗體文字。

通過/失敗矩陣會分別列出每個門檻，讓您一眼看出：白底上的#767676灰色以4.54:1通過AA正文文字標準，但未達到AAA所需的7:1。若您的團隊需要滿足法律合規要求（ADA、EN 301 549、508條款），AA是需要達到的標準。對於以閱讀為主的介面，在設計允許的情況下值得追求AAA。

預覽、修復並發布無障礙顏色對

數字只能說明一半，因此即時預覽會用您的確切顏色渲染真實的標題、正文、小字以及示例按鈕和標籤——親眼查看可讀性，而不僅僅讀取比率。當某個顏色對不達標時，「使其通過」建議功能會保留您的色調和飽和度，將亮度微調至最接近的能通過所選等級（AA、AA大文字或AAA）的顏色，並一鍵套用。您可以選擇調整文字顏色或背景顏色。

配對網格可接受完整的顏色板，並一目了然地顯示哪些顏色組合能通過——在建構設計系統時尤為實用，因為每對前景色和背景色都需要安全。無需逐一測試數十個顏色對，只需貼上您的顏色板，即可立即看到完整矩陣。

APCA：WCAG 3對比度預覽

除了傳統比率，本檢測器還顯示APCA Lc評分——為WCAG 3提出的感知對比度指標。APCA模擬眼睛實際閱讀深底淺字與淺底深字的方式，並考慮字重因素，能發現WCAG 2比率有時遺漏的可讀性問題。大致參考值：正文文字Lc 75+，大文字Lc 60+，大標題Lc 45+。

WCAG 3仍處於草案階段，尚未取代WCAG 2.2，因此當前合規意味著滿足4.5:1和3:1的門檻。在當前比率旁同時顯示APCA，讓您無需等待規範最終確定即可為將來做好準備。

圖示與UI元件的非文字對比度

對比度不僅適用於文字。WCAG 2.1 SC 1.4.11要求互動元件邊界——輸入框邊框、焦點指示器、切換狀態——以及有意義的圖示和圖形與相鄰顏色之間達到3:1的對比度。矩陣包含專門針對3:1門檻的UI和圖形檢測，讓您確認按鈕輪廓或圖示是否可見。

這是許多團隊在未意識到的情況下未通過審計的領域。淺灰色輸入框邊框（白底上的#D1D1D1僅為1.4:1）是WCAG 2.1的常見違規項，即便頁面上所有文字都通過了檢測。在此檢測UI元件只需幾秒鐘，可避免正式審計時出現意外。

與WebAIM、Adobe Color及Chrome DevTools的比較

WebAIM對比度檢測器（webaim.org）是引用最廣泛的免費無障礙工具，採用與本工具相同的WCAG 2公式。但它不顯示APCA，沒有即時文字預覽，無法自動修復不達標顏色對，也沒有用於同時測試多種顏色組合的配對網格。

Adobe Color無障礙工具顯示AA/AAA通過/失敗結果並包含色盲模擬器，但需要免費的Adobe帳號才能儲存作品，也無法自動建議通過顏色。

Chrome DevTools在元素面板顏色選擇器中有對比度比率標識，適合瀏覽器內檢查——但僅限於DevTools內部使用，無法分享特定顏色對的連結。

本檢測器無需登入，同時顯示WCAG 2比率和APCA Lc評分，以您選擇的顏色渲染即時預覽，並支援在單一視圖中測試完整的顏色板網格。所有計算均在本地JavaScript中執行——您的顏色永遠不會離開您的裝置。