Color Contrast Checker

Check contrast ratio. WCAG compliance.

▶Về công cụ này

This tool checks foreground/background contrast ratio in one click. Three features: 1) Select colors for instant contrast ratio, 2) WCAG 2.1 AA/AAA compliance for normal/large text, 3) Useful for accessibility and UI color selection.

Giao diện công cụ

Mẫu văn bản Aa 123
Tỷ lệ tương phản —
WCAG AA (Văn bản thường 4.5:1) —
WCAG AA (Văn bản lớn 3:1) —
WCAG AAA (Văn bản thường 7:1) —

Cách sử dụng

  1. Select foreground and background colors with picker
  2. Contrast ratio is displayed instantly
  3. Check WCAG 2.1 AA/AAA compliance

Khi nào nên dùng

Accessibility compliance, UI color selection, text readability, WCAG verification.

Ví dụ

White on black = 21:1, #666 on #fff = 5.74:1.

Câu hỏi thường gặp

What is WCAG?

Web Content Accessibility Guidelines. Int'l standard for web accessibility by W3C. Referenced in legal requirements.

Good contrast ratio?

WCAG 2.1: normal text 4.5:1 (AA), 7:1 (AAA). Large text 3:1 (AA), 4.5:1 (AAA).

AA vs AAA?

AA = minimum accessibility. AAA = stricter (e.g. 7:1 contrast). Most sites aim for AA.

How is contrast ratio calculated?

(L1+0.05)/(L2+0.05). L1=brighter relative luminance, L2=darker. Max 21:1 (white/black), min 1:1 (same color).

Công cụ liên quan

Bộ công cụ

Color & Design Set