Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards (AA & AAA)

Preview Text
This is how your text will look with these colors
8.59:1
Contrast Ratio
AAA

WCAG AA

Normal Text (4.5:1)Pass
Large Text (3:1)Pass
UI Components (3:1)Pass

WCAG AAA

Normal Text (7:1)Pass
Large Text (4.5:1)Pass

Check contrast on any website instantly

Atoms extracts colors and checks contrast with a single hover. No manual color picking.

Install Atoms for Chrome

About WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with visual impairments. Our free contrast checker helps you verify your color combinations meet these standards.

WCAG Contrast Requirements

Why Contrast Matters

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is also difficult to read in bright sunlight or on low-quality displays. Meeting WCAG standards ensures your content is accessible to everyone.

Frequently Asked Questions

What is a good contrast ratio?

For most body text, aim for at least 4.5:1 (WCAG AA). For the best accessibility, target 7:1 or higher (WCAG AAA). Headlines and large text can use 3:1 minimum.

What counts as "large text"?

WCAG defines large text as 18pt (24px) or larger, or 14pt (18.66px) if bold. Large text has lower contrast requirements because it's easier to read.

How is contrast ratio calculated?

Contrast ratio compares the relative luminance of two colors. The formula produces a ratio between 1:1 (no contrast) and 21:1 (maximum contrast, black on white).