WCAG 對比檢查器

WCAG AA 與 AAA，兩種字級各自標示。

免費 - 無需註冊 - 在你的裝置上執行

在你的瀏覽器分頁中執行

  • AA與 AAA
  • 2種字級
  • WCAG亮度公式
  • 0上傳
規格

WCAG 對比檢查器 規格一覽

輸入
文字色與背景色
計算方式
相對亮度，再取比值
回報的等級
AA 與 AAA，兩種字級
不在範圍內的
一條準則，不是符合性
價格
免費
需要帳戶
無
處理位置
在你的裝置上
使用方法

WCAG 對比檢查器 怎麼用

  1. 1

    填入這組配色

    填入前景與背景色。

  2. 2

    讀 AA 與 AAA

    讀 AA 與 AAA。

  3. 3

    記錄或修改

    記錄，或改顏色。

問題

常見問題

對比度通過就代表符合 WCAG 嗎？

不代表。符合性涵蓋很多成功準則，這個面板只回答其中一組配色的對比那一條，在整份稽核裡只佔一小塊。

該做到 AA 還是 AAA？

多數規範寫的是 AA；AAA 更嚴，整套設計不見得做得到。面板兩個等級都標，怎麼取捨由你決定。

圖示和邊框也能測嗎？

面板比較的是你填進去的兩個顏色。非文字對比另有一條要求、門檻不同，請分開記錄。

運算在哪裡進行？

在這個瀏覽器分頁裡。兩個顏色不會被上傳，也沒有帳戶或紀錄留著你測過什麼。

背景說明

把它用在稽核裡

對比度用 WCAG 的相對亮度公式算出，再對 AA 與 AAA 兩個等級、兩種字級分別標示，旁邊有這組配色的樣本可以看。

  • 把配色、對比度和等級一起記下來，後面的人才重做得出同一個測試。
  • 測使用者真正看到的狀態：游標停留、已瀏覽和停用各是一組配色。
  • 文字壓在照片上沒有單一背景值，測後方最不利的那一塊。
  • 在某一個主題下通過的設計 token，換到另一個主題要重測。

完整規格

WCAG 對比檢查器 的完整規格
輸入文字的顏色，以及它後方的背景色。
計算方式先取兩色各自的 WCAG 相對亮度，再算兩者的比值。
回報的等級AA 與 AAA，各自標示一般字級與大字級。
不在範圍內的非文字對比、焦點可見性、結構，以及其他所有成功準則。
價格免費。由工作區外標示清楚的廣告支援。
需要帳戶不需要。
處理位置在你的瀏覽器分頁中。你的輸入絕不會被上傳。
下一步

用同一批檔案繼續做

全部色彩工具： SPOTTOOLS 的色彩工具