色彩對比檢查器

以即時樣本檢查 WCAG AA 和 AAA 對比度。

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

在你的瀏覽器中本機執行

  • 即時結果
  • 0上傳
  • 1 次點擊即可複製
  • 免費無需帳戶
實際使用

可以放心的地方

  • 0上傳
    • 你的輸入留在你的裝置上
    • 不會傳送任何資料進行處理
  • 即時輸出
    • 結果在工作區即時更新
    • 變更輸入並立即比較
  • 1 次點擊即可複製
    • 複製結果
    • 無需帳戶或安裝
規格

色彩對比檢查器 規格一覽

輸入
前景和背景顏色。
輸出
對比度比率及兩種文字大小的 AA 或 AAA
方法
WCAG 相對亮度和對比度計算
輸入與預覽
可貼 hex；16px 與 24px 樣本
價格
免費
處理位置
在你的裝置上
使用方法

色彩對比檢查器 怎麼用

  1. 1

    設定兩個顏色

    選文字顏色與背景顏色，就是你打算搭配的那一組。

  2. 2

    查看對比結果

    示範區以 16 與 24 像素顯示這組配色，下方是對比值與四項 WCAG 判定的通過或不通過。

  3. 3

    複製判定結果

    一個「複製結果」按鈕把對比值與四項判定一起帶走，方便寫進紀錄。

問題

常見問題

這可以在不上傳任何東西的情況下運作嗎？

可以。此工具會在瀏覽器分頁內處理你的輸入。不會傳送到處理伺服器，也不會儲存在帳戶中。

我可以在複製前變更結果嗎？

可以。調整任何可用的控制項，結果就會更新。只有在輸出符合你的需求時才複製。

支援哪些瀏覽器？

目前版本的 Chrome、Edge、Firefox 和 Safari 支援此處使用的瀏覽器功能。非常舊的瀏覽器可能缺少所需的 API。

背景說明

AA 與 AAA 各自代表什麼

WCAG 要求一般文字 4.5:1、大字 3:1 才通過 AA，7:1 才通過 AAA。大字指 24px，粗體則為 18.66px。

  • 對比是與文字背後真正的顏色相比，因此卡片、按鈕與圖片上的文字要分開檢查。
  • 數字通過不等於好讀。字重太細、字級太小，都會比數字看起來更難閱讀。

完整規格

色彩對比檢查器 的完整規格
輸入前景和背景顏色。
輸出對比度比率及兩種文字大小的 AA 或 AAA 結果。
方法WCAG 相對亮度和對比度計算。
輸入與預覽兩色旁邊都有 hex 文字框可貼品牌色。樣本用你選的兩色實畫 16px 正常與 24px 粗體。
價格免費。由工作區外標示清楚的廣告支援。
處理位置在你的瀏覽器分頁中。你的輸入絕不會被上傳。
下一步

用同一批檔案繼續做

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