Choose a text color and a background color to see the contrast ratio and whether it passes WCAG AA and AAA for normal and large text.
🔒 100% private — nothing is uploaded
Large text preview
Normal text preview — the quick brown fox jumps over the lazy dog.
AANormal text
Pass
Requires 4.5:1
AALarge text
Pass
Requires 3:1
AAANormal text
Pass
Requires 7:1
AAALarge text
Pass
Requires 4.5:1
How the contrast checker works
Adjust either color and every result updates instantly — no button to press, nothing sent anywhere.
1
Pick your colors
Use the color pickers or type a hex value for your text and background.
2
Read the ratio
See the exact WCAG contrast ratio, from 1:1 up to a maximum of 21:1.
3
Check pass / fail
Instantly know whether it meets AA and AAA for both normal and large text.
Understanding the numbers
The contrast ratio compares the relative luminance of your two colors using
the official WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1
is the lighter color's luminance and L2 is the darker one's. Luminance itself is
computed by linearising each sRGB channel and weighting them
0.2126·R + 0.7152·G + 0.0722·B to match human perception of brightness.
Normal text needs a ratio of at least 4.5:1 for AA and
7:1 for AAA. Large text — 18.66px (14pt) bold or 24px (18pt)
and up — is easier to read, so it only needs 3:1 for AA and
4.5:1 for AAA.
Meeting these thresholds keeps your text legible for people with low vision or color
deficiencies, and is a core requirement of accessibility standards like the ADA, Section 508
and the European EN 301 549.
🔒
Private by design. Your colors never leave your device. Every calculation runs right here in your browser — nothing is uploaded or stored.
Frequently Asked Questions
What is a good contrast ratio?▼
For normal text, aim for at least 4.5:1 to meet WCAG AA and 7:1 for the stricter AAA level. Ratios range from 1:1 (no contrast) up to 21:1 (black on white).
What counts as large text?▼
Large text is roughly 24px (18pt) and up, or 18.66px (14pt) and up when bold. Because it's easier to read, it only needs 3:1 for AA and 4.5:1 for AAA.
What's the difference between AA and AAA?▼
AA is the standard most websites and laws aim for. AAA is a higher bar for enhanced accessibility. The checker shows pass or fail for both, for normal and large text.
How is the contrast ratio calculated?▼
It uses the official WCAG formula, which compares the relative brightness of your two colors. The result is rounded down so a color that's fractionally short of a threshold is never shown as passing.
Can I quickly try color combinations?▼
Yes. Use the color pickers or type hex values, hit Swap colors to flip text and background, or press Random to sample new pairs. Every result updates instantly.
Is my data uploaded anywhere?▼
No. Your colors never leave your device. Every calculation runs right here in your browser — nothing is uploaded or stored.