Developer🔒 Runs in your browser

Color Contrast Checker

Check WCAG AA/AAA color contrast compliance

Text Color

Background Color

Preview Title Text

This is how body text will look with these colors.

And this is small text for reference.

Contrast Ratio

21.00:1

WCAG AA

Normal text✓ Pass

Large text (18px+)✓ Pass

UI components✓ Pass

WCAG AAA

Normal text✓ Pass

Large text (18px+)✓ Pass

About Color Contrast Checker

The Color Contrast Checker evaluates the contrast ratio between two colors according to WCAG 2.1 guidelines. It tells you whether your color combinations meet AA or AAA accessibility standards for normal text, large text, and UI components. Everything runs in your browser.

Frequently Asked Questions

What is a good contrast ratio?

WCAG AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Higher ratios mean better readability.

What is the difference between AA and AAA?

AA is the minimum recommended standard for most web content. AAA is a stricter standard that provides better readability for users with visual impairments. Meeting AAA is ideal but not always required.

How is the contrast ratio calculated?

The contrast ratio is computed using the relative luminance of each color as defined by WCAG 2.1. The formula compares the lighter and darker colors on a scale from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).