Contrast Checker
Check if text and background colours have enough contrast to meet WCAG AA and AAA.
Large text — 24px
Normal text, 16px. The quick brown fox jumps over the lazy dog.
Runs in your browser — your data never leaves your device.
About the Contrast Checker
Low-contrast text is hard to read on phones in sunlight, for older visitors and for people with low vision. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios, and good contrast also simply makes a site feel clearer.
Enter the text colour and background colour to see the ratio, a live preview and a pass or fail for each WCAG level.
How to use the Contrast Checker
- Enter the text colour and background colour (HEX, RGB or a colour name), or use the pickers.
- Read the contrast ratio and the AA / AAA results.
- If a check fails, darken the text or lighten the background and watch the ratio update. Use Swap colours to test the reverse.
How it works
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker one. Luminance = 0.2126 R + 0.7152 G + 0.0722 B, using linearised sRGB values.
WCAG 2 thresholds:
- AA: 4.5 : 1 for normal text, 3 : 1 for large text (24 px, or 18.66 px bold) and UI parts.
- AAA: 7 : 1 for normal text, 4.5 : 1 for large text.
Examples
- Black on white: 21 : 1 — passes everything.
#777777on white: 4.47 : 1 — just fails AA for normal text;#767676gives 4.54 : 1 and passes.
Frequently asked questions
Which level should I aim for?
AA is the common target for websites and many accessibility laws. AAA is stricter and recommended for long reading text.
Does this check images or gradients?
No. It compares two solid colours. For text on images, test against the lightest and darkest parts behind the text.