What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.

What contrast ratio do I need for accessibility?

For WCAG AA compliance (the legal standard in many countries), you need at least 4.5:1 for body text and 3:1 for headings 18px or larger. AAA (gold standard) requires 7:1 for body text.

How do I use the color contrast checker?

Enter your text color and background color using hex codes or the color picker. The tool instantly calculates the contrast ratio and shows pass/fail results for both AA and AAA standards.

Is this contrast checker free?

Yes, completely free with no sign-up. All calculations happen in your browser using the WCAG luminance contrast formula.

Free Color Contrast Checker

Check if your color combinations meet WCAG AA and AAA accessibility standards

Colors

Text Color

Background Color

—

Contrast Ratio

WCAG Compliance

Normal Text

—

Requires 4.5:1

Large Text

—

Requires 3:1

AAA

Normal Text

—

Requires 7:1

AAA

Large Text

—

Requires 4.5:1

Live Preview

The quick brown fox

This is how your body text will look with these color settings. Good contrast makes your content readable for all users, including those with visual impairments. Aim for WCAG AA as a minimum — AAA for primary text.

This is small text at 14px. Harder to read at lower contrast ratios — users with low vision rely on this meeting accessibility standards.

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for readable text. AA is the legal standard in many countries. AAA is the gold standard for maximum readability. Large text (18pt+ or 14pt+ bold) has lower requirements than normal text.

Need help designing an accessible website?

Accessibility improves both user experience and SEO. Book a free call to discuss how we can build a website that works for everyone.

Book Your Free Strategy Call →