Contrast · WCAG 2.1

♿ Color Contrast

Put a text colour on a background and see whether the contrast ratio clears WCAG. AA needs 4.5:1 for body text, while large text and AAA have their own thresholds.

Text (foreground)

Background

—: 1 contrast ratio

Aa · Xin chào 123

Đoạn chữ thường để kiểm tra khả năng đọc: The quick brown fox jumps over the lazy dog.

Buttona sample link

Contrast is computed from WCAG 2.1 relative luminance. AA needs ≥4.5:1 for normal text (≥3:1 for large ≥18.66px bold / ≥24px); AAA needs ≥7:1 (≥4.5:1 large). UI components & graphics need ≥3:1.