What is a WCAG contrast ratio?

A contrast ratio is a numerical value (from 1:1 to 21:1) that describes how much a foreground color stands out against its background. The WCAG (Web Content Accessibility Guidelines) uses this ratio to determine if color combinations are readable by people with visual impairments.

What do AA and AAA levels mean?

AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. AAA is the highest accessibility standard, while AA is the minimum recommended level for most websites.

How is the contrast ratio calculated?

The contrast ratio is calculated using the WCAG 2.1 relative luminance formula. Each color is converted from sRGB to linear RGB using gamma correction, then the relative luminance is computed as L = 0.2126R + 0.7152G + 0.0722B. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.

Is my data sent to a server?

No. Theme Contrast Checker runs 100% in your browser using JavaScript. No color data, no images, and no personal information ever leaves your device. It even works offline once the page has loaded.

100% Client-Side

Check Color Contrast for
WCAG Compliance

Instantly calculate contrast ratios and verify AA/AAA accessibility levels for any color pair. No signup, no uploads — runs entirely in your browser.

🎯

WCAG 2.1 Accurate

Uses the official WCAG relative luminance formula with proper sRGB gamma correction for precise contrast ratios.

⚡

Instant Results

See contrast ratio, accessibility level, and live preview update in real time as you pick or type colors.

🔒

100% Private

All calculations run in your browser. No data is sent to any server. Works offline once loaded.

Foreground (Text)

Background

Contrast Ratio

21.00:1

AAA

Passes WCAG AAA for normal and large text.

Normal text (AA)Pass

Normal text (AAA)Pass

Large text (AA)Pass

Large text (AAA)Pass

Live Preview

Heading Sample

This paragraph shows how your chosen text color looks against the background. Check readability at different sizes.

Smaller text is harder to read and needs higher contrast.

Frequently Asked Questions

Everything you need to know about Theme Contrast Checker.

Check Color Contrast forWCAG Compliance