對比檢查器
選擇文字和背景顏色,檢查其對比比例是否達到 WCAG AA 和 AAA 門檻。分別查看一般文字和大型文字的結果,並使用所選顏色預覽。
可執行的操作
檢查兩種顏色的比例
選擇文字和背景顏色,查看精確至小數點後兩位的對比比例。
比較 AA 和 AAA 門檻
分別查看一般文字和大型文字的結果,並使用所選顏色預覽。
與黑色和白色比較
開啟選用的詳細資料,比較文字顏色在黑色和白色背景上的對比。
使用方式
輸入文字顏色
選擇 HEX、RGB、HSL、HSV 或 CMYK,再輸入文字顏色。選擇色票會將輸入切換為 HEX。
選擇背景顏色
輸入 3 位或 6 位數的 HEX,或使用色彩選擇器。# 前綴可省略。
檢查對比
選取「檢查對比」查看比例、文字預覽和 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 結果,以及文字預覽。結果不提供儲存功能。