ManyColor Contrast Checker
Check the contrast ratio between text and background against WCAG AA and AAA.
AA
AAA
How to check a colour pair
- Set the text colour and the background colour with the pickers, or type a hex value such as
#1a1a1a. - Read the contrast ratio and the four results: AA and AAA, each for normal and for large text.
- Look at the sample heading and paragraph to judge it with your own eyes as well.
- Use Swap colours to test the pair the other way round. The ratio stays the same; how it feels may not.
The WCAG thresholds
The Web Content Accessibility Guidelines set minimum contrast between text and its background. Level AA is the standard most laws and organisations require; AAA is stricter and suits long reading.
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text — 24 px, or 18.66 px bold, and up | 3 : 1 | 4.5 : 1 |
| Icons, form borders, chart lines | 3 : 1 | — |
Logos, purely decorative text and disabled controls are exempt. Placeholder text in a form field is not — it must meet the same ratio as other text.
How the ratio is calculated
Each colour is first turned into a relative luminance, a number from 0 for black to 1 for white that reflects how bright it appears. Green contributes most, then red, then blue: L = 0.2126 R + 0.7152 G + 0.0722 B, using gamma-corrected channel values. The ratio is then (lighter + 0.05) ÷ (darker + 0.05).
The scale runs from 1 : 1, where the two colours are identical, to 21 : 1 for black on white.
Reference points worth knowing
| Text on white | Ratio | Result |
|---|---|---|
Black #000000 | 21 : 1 | Passes everything |
Grey #595959 | 7.0 : 1 | The lightest grey that passes AAA |
Grey #767676 | 4.54 : 1 | The lightest grey that passes AA |
Grey #777777 | 4.48 : 1 | Fails AA for normal text |
Pure red #FF0000 | 4.0 : 1 | Passes for large text only |
Fixing a pair that fails
- Darken the text rather than changing its hue. Lowering the lightness keeps a brand colour recognisable.
- Check both themes. A colour that works on white often fails on a dark background, and the reverse.
- Do not lean on size. Making text large to scrape past 3 : 1 still leaves it hard to read in sunlight or on a cheap screen.
- Test real states — links, hover and focus colours, error messages, and text laid over images or gradients, where the background changes from place to place.
Why it matters
Low contrast is one of the most common accessibility failures on the web. It affects people with low vision and colour blindness first, and then everyone reading a phone outdoors. To build a palette of tints and shades to test, use the Color Picker & Converter.
Free online colour contrast checker
The ManyHand Colour Contrast Checker computes the WCAG contrast ratio between a text colour and a background colour and tells you whether it passes AA and AAA for normal and large text. AA requires 4.5:1 for normal text and 3:1 for large; AAA requires 7:1 and 4.5:1. Use the pickers or type any hex value and see a live preview update instantly. It all runs in your browser — nothing is uploaded.
Is it free?
Yes — completely free, with no sign-up, download or watermark.
What is "large" text?
At least 24px, or 18.66px if bold.
Is anything uploaded?
No — everything runs in your browser.
More free tools: Color Converter · All tools