顏色對比檢查器

在下面輸入您的顏色組合,使用我們的顏色對比度檢查器對其進行測試,並立即查看它們是否符合可訪問性標準。

Preview

Normal Text (16px)

Large Text (24px)

Contrast Ratio

21.00:1

WCAG Compliance

Normal Text

✓ AA Pass
✓ AAA Pass

Large Text (18pt+ or 14pt+ bold)

✓ AA Pass
✓ AAA Pass

UI Components & Graphics

✓ AA Pass

WCAG Standards

Normal Text

  • AA: 4.5:1 minimum
  • AAA: 7:1 minimum

Large Text

  • AA: 3:1 minimum
  • AAA: 4.5:1 minimum

UI Components

  • AA: 3:1 minimum

Common Combinations

Black on White
White on Blue
White on Dark Gray

我們的顏色對比檢查器的工作原理

使用 RGB 十六進位值輸入前景和背景顏色,或直接使用顏色選擇器選取它們。

 你可以:

  • 調整 Alpha 以變更前景色的透明度。
  • 使用亮度滑桿使顏色看起來更亮或更暗。

然後,我們的工具計算對比度並根據 WCAG 準則進行檢查:

  • WCAG 2.0 AA 級
  • 正常正文至少為 4.5:1
  • 對於大文字至少 3:1
  • WCAG 2.1(UI 與圖形)
  • 圖示、邊框和其他介面元件至少為 3:1
  • WCAG AAA 級
  • 普通文字至少 7:1
  • 對於大文字至少 4.5:1

大文 表示:

  • 14 磅(約 18.66 像素)加粗,或者
  • 18 pt(約 px)或更大

您可以使用拾色器中的吸管從螢幕上的任何內容中獲得準確的顏色。它可以輕鬆測試真實的設計、按鈕或背景。

對於僅依靠顏色來突出的鏈接,請使用我們的顏色對比度檢查器以確保它們符合可訪問性標準並易於每個人閱讀。