Toollet
依想做的事或應用程式名稱搜尋搜尋聯絡我們
價格

對比檢查器

選擇文字和背景顏色,檢查其對比比例是否達到 WCAG AA 和 AAA 門檻。分別查看一般文字和大型文字的結果,並使用所選顏色預覽。

# 前綴可省略。不支援 Alpha。

# 前綴可省略。不支援 Alpha。

可執行的操作

檢查兩種顏色的比例

選擇文字和背景顏色,查看精確至小數點後兩位的對比比例。

比較 AA 和 AAA 門檻

分別查看一般文字和大型文字的結果,並使用所選顏色預覽。

與黑色和白色比較

開啟選用的詳細資料,比較文字顏色在黑色和白色背景上的對比。

使用方式

  1. 輸入文字顏色

    選擇 HEX、RGB、HSL、HSV 或 CMYK,再輸入文字顏色。選擇色票會將輸入切換為 HEX。

  2. 選擇背景顏色

    輸入 3 位或 6 位數的 HEX,或使用色彩選擇器。# 前綴可省略。

  3. 檢查對比

    選取「檢查對比」查看比例、文字預覽和 AA/AAA 結果。變更任一顏色後請重新檢查。

適用情境

檢查背景上的內文

輸入頁面使用的顏色,檢查一般文字是否達到所需比例。

比較標題顏色

考慮標題配色時,請參考大型文字結果和預覽。

如何查看結果

AA 和 AAA 比例

AA 要求一般文字至少達 4.5:1、大型文字至少達 3:1。AAA 要求一般文字至少達 7:1、大型文字至少達 4.5:1。結果使用未四捨五入的比例。

大型文字的定義

大型文字至少為 18 pt,或 14 pt 粗體。在 CSS 中相當於 24px,或約 18.7px 粗體。預覽使用 16px 和 24px 的一般字重文字。

檢查範圍

此功能檢查兩種不透明 sRGB 顏色之間的文字對比,不會評估圖片背景、Alpha 混合、非文字元素或整個頁面的符合性。

常見問題

對比比例通過就代表整個頁面符合規範嗎?

此結果只涵蓋兩種所選顏色之間的文字對比。整個頁面的符合性須另外評估。

黑白比較會顯示什麼?

此比較會檢查所選文字顏色對黑色和白色的對比,並顯示比例較高者。這與所選背景的結果分開計算。

可以檢查透明文字或圖片上的文字嗎?

不支援 Alpha 和圖片背景。請輸入不透明的文字和背景顏色。

輸入與輸出

文字顏色
HEX、RGB、HSL、HSV 或 CMYK 數值,或使用色彩選擇器。CMYK 為未使用 ICC 設定檔的估算值。
背景
3 位或 6 位數 HEX,或使用色彩選擇器。不支援 Alpha。
結果
對比比例、一般和大型文字的 AA/AAA 結果,以及文字預覽。結果不提供儲存功能。

目前設定

搜尋工具