免費轉換器

顏色對比度 檢查器 (WCAG)

檢查兩種顏色之間的對比度,確保符合 WCAG AA 和 AAA 無障礙標準。免費、即時,完全在瀏覽器中運行。

範例文字 — 普通大小

範例小文字 — 14px

對比度:21.00:1
WCAG AA普通文字通過
WCAG AA大文字通過
WCAG AAA普通文字通過
WCAG AAA大文字通過

關於此工具

根據 WCAG 2.1 輔助功能指南檢查前景文字和背景顏色之間的顏色對比。輸入十六進位代碼、RGB 值或 HSL 值形式的顏色,並立即查看正常和大文字尺寸下的對比度以及 WCAG AA 和 AAA 合規性的通過/失敗結果。

使用方法

  1. 使用顏色選擇器或十六進位輸入輸入或選擇前景色(文字)。
  2. 輸入或選擇您的背景顏色。
  3. 立即查看對比度和 WCAG 2.1 AA/AAA 通過/失敗結果。
  4. 調整顏色直到達到所需的合規等級。

常見問題

WCAG 合規性需要多少對比?
WCAG AA 要求普通文本為 4.5:1,大文本(18pt+ 或 14pt+ 粗體)為 3:1。 WCAG AAA 要求普通文本為 7:1,大文本為 4.5:1。最大可能比例為 21:1(黑底白字)。
為什麼色彩對比度很重要?
足夠的對比度可確保弱視、色盲或在明亮陽光下觀看螢幕的使用者也能閱讀文字。這也是 ADA 和歐盟無障礙法規對許多網站的法律要求。
WCAG 中什麼被視為「大文本」?
大文本定義為 18pt (24px) 及以上的常規粗細,或 14pt (18.66px) 及以上的粗體文字。大文本的對比度要求較低,因為它本質上更容易閱讀。
該工具是否檢查非文字元素的對比?
WCAG 2.1 要求 UI 元件和圖形物件(按鈕、圖示、表單欄位)的對比度為 3:1。您也可以使用此工具來驗證這些內容 - 只需輸入組件和背景顏色即可。