WCAG分析器 逐一檢測整套調色盤的無障礙對比度合規性
逐一分析調色盤中各顏色組合的WCAG對比度，清晰標註AA、AAA達標情況，幫你全面掌控整站配色的無障礙合規水平。
待分析的調色盤
對比度矩陣
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
WCAG 2.1 圖例
AAA 級
對比度 ≥ 7:1 - 優秀
AA 級
對比度 ≥ 4.5:1 - 標準
AA 大字級
對比度 ≥ 3:1 - 大字級
不通過
對比度 < 3:1 - 不合規
逐一分析調色盤中各顏色組合的WCAG對比度，清晰標註AA、AAA達標情況，幫你全面掌控整站配色的無障礙合規水平。
WCAG分析器 逐一檢測整套調色盤的無障礙對比度合規性 只顯示與其功能相關的控制項和結果。可用選項會隨工具和輸入內容而不同。
支援的格式
運作方式
步驟 1
開啟 WCAG分析器 逐一檢測整套調色盤的無障礙對比度合規性，準備介面要求的輸入
步驟 2
依照需要的結果調整可見控制項
步驟 3
在複製、匯出或再次使用前檢查結果
應避免的常見錯誤
- 如果某個格式或選項沒有出現在介面中，不要預設該功能支援它。
- 在品牌、介面或正式檔案中使用前，請檢查得到的數值。
- 如果結果用於文字或 UI，也要檢查對比度。
專家提示
- 比較不同方案時保留來源值和結果。
- 使用工具實際顯示的格式，不要自行估算轉換結果。
- 在手機和平板上允許文字和控制項換行。
資料處理
資料處理方式取決於所使用的功能。網站的同意、分析和帳戶服務與顏色操作分開管理。
這個工具能做什麼
逐一分析調色盤中各顏色組合的WCAG對比度，清晰標註AA、AAA達標情況，幫你全面掌控整站配色的無障礙合規水平。 WCAG分析器 逐一檢測整套調色盤的無障礙對比度合規性 專注於這項工作，不會預設介面中沒有顯示的功能。使用頁面提供的控制項取得需要的結果，並在把數值帶到其他工具、樣式表、設計檔案或文件之前先進行檢查。
準備合適的輸入
從 WCAG分析器 逐一檢測整套調色盤的無障礙對比度合規性 要求的輸入開始，依頁面可能是顏色、數值、圖片或設定。本頁列出的格式為 Palette, HEX, CSS Variables, JSON。如果某種格式或選項沒有出現在介面中，不要把它視為這項具體功能已經支援的內容。
讀取並檢查結果
請在所執行操作的脈絡中讀取結果。把它與來源值比較，並檢查影響計算的設定。對重要的視覺工作，不要只根據色彩代碼判斷，也應在最終要使用的真實介面中查看實際效果。
在手機和平板上使用
WCAG分析器 逐一檢測整套調色盤的無障礙對比度合規性 使用網站的響應式版面。在窄螢幕上，標題、說明、breadcrumbs 和控制項可以自動換行，以避免較長翻譯被截斷。不過，最終仍應在實際要使用的裝置和情境中檢查顯示效果。
在專案中再次使用結果
確認結果後，只使用 WCAG分析器 逐一檢測整套調色盤的無障礙對比度合規性 實際提供的操作，例如介面中存在時的複製或匯出。如果之後可能需要還原設定，請保留來源值；對 UI 顏色，也應記錄顏色用途以及需要符合的對比度要求。
相關工具
指南和教學
透過詳細指南學習如何使用我們的工具。
常見問題
透過詳細指南學習如何使用我們的工具。