Color Contrast Checker

Instantly check if your color combinations meet WCAG accessibility standards

Color Inputs

Preview

Results

—
Contrast Ratio
1:1 min 3:1 4.5:1 7:1 21:1 max

WCAG 2.2 Standards

How It Works

How contrast is calculated

1

Your hex colors are converted to sRGB values on a 0–1 scale.

2

Relative luminance is computed for each color using the official WCAG formula.

3

The ratio is: (lighter + 0.05) ÷ (darker + 0.05), giving a number from 1 to 21.

4

Result is checked against WCAG thresholds for each text size and component type.

What the ratio levels mean

1:1
Identical colors — completely invisible text
3:1
Minimum for large text & UI components
4.5:1
Standard for normal body text (AA)
7:1
Enhanced readability for all users (AAA)
21:1
Maximum — pure black on white

I built this tool because accessibility shouldn't be an afterthought — it should be part of every design decision from the start. Paste your colors, check your ratios, and create experiences that everyone can enjoy. 🎨

Built by Ajay K. · Digital BigHit · ☕ Buy me a coffee · WCAG 2.2 Guidelines →