What ratio is required for WCAG AA?

Runs entirely in your browser — nothing is uploaded

Color Contrast Checker

Check if your colors meet WCAG accessibility standards.

Text Color

Background Color

The quick brown fox jumps over the lazy dog.

Large text (18pt / 24px) requires a 3:1 ratio.
Normal text (14pt / 18px) requires a 4.5:1 ratio.

21:1

WCAG AA

Normal Text (4.5:1)

WCAG AA

Large Text (3.0:1)

WCAG AAA

Normal Text (7.0:1)

Overview & Architecture

Our Contrast Checker calculates exact contrast ratios and validates WCAG 2.1 AA and AAA compliance.

Step-by-Step Instructions

Select text and background colors.

Check contrast ratio and pass/fail badges.

WCAG 2.1 Validation: Instant AA (4.5:1) and AAA (7:1) ratio checks.

Got Questions?

Minimum 4.5:1 for normal text and 3:1 for large text.

Other high-quality utilities in the Design & UI category.

Visual builder for linear and radial CSS background gradients.

Extremely useful for designers resizing content for platforms (TikTok, YouTube).

Converts HEX to RGB/HSL and generates complementary colors.

Visual sliders to generate CSS code for complex box shadows.