在下面輸入您的顏色組合,使用我們的顏色對比度檢查器對其進行測試,並立即查看它們是否符合可訪問性標準。
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)或更大
您可以使用拾色器中的吸管從螢幕上的任何內容中獲得準確的顏色。它可以輕鬆測試真實的設計、按鈕或背景。
對於僅依靠顏色來突出的鏈接,請使用我們的顏色對比度檢查器以確保它們符合可訪問性標準並易於每個人閱讀。