How to check colour contrast in 3 steps
- Enter the two colours — the text colour and the background colour it sits on, by picker or HEX code.
- Read the ratio and the badges — AA is the standard most websites should meet; AAA is the stricter level.
- Adjust until it passes — darken the text or lighten the background a step at a time; the preview updates live so you can see the effect on real text.
Why contrast is a rule, not a taste
The Web Content Accessibility Guidelines (WCAG) set minimum contrast so that text stays readable for people with low vision, colour-vision deficiency, ageing eyes — and everyone reading a phone in bright sunlight. Level AA is written into many accessibility laws and procurement rules: normal text needs a ratio of at least 4.5 : 1, and large text (18 point or 14 point bold and above) at least 3 : 1. Level AAA raises those bars to 7 : 1 and 4.5 : 1. A ratio of 1 : 1 means the colours are identical (invisible text); 21 : 1 is black on white, the maximum possible.
How it works
Each colour is converted to its relative luminance: the RGB channels are linearised (undoing gamma) with the WCAG formula — channel ÷ 12.92 when the channel is at most 0.03928, otherwise ((channel + 0.055) ÷ 1.055)2.4 — then combined as L = 0.2126·R + 0.7152·G + 0.0722·B. The contrast ratio is (lighter L + 0.05) ÷ (darker L + 0.05). Green dominates the weighting because human eyes are most sensitive to it, which is why pure green text looks brighter than pure blue at the same numeric intensity. The maths runs entirely in your browser.
Worked example
Black text on a white background scores 21.00 : 1 — the maximum. Greys are the interesting borderline: #767676 on white scores 4.54 : 1 and just passes AA for normal text, while one step lighter, #777777, scores 4.48 : 1 and just fails. A single HEX step can be the difference between accessible and not — which is exactly why checking beats guessing.
Frequently asked questions
Is this contrast checker free?
Yes — free, unlimited and without signup. Everything is calculated in your browser.
What ratio should my website text aim for?
At least 4.5 : 1 for body text (WCAG AA). Aim for 7 : 1 (AAA) when you can, especially for long reading. Headings and other large text need at least 3 : 1.
Does contrast apply to logos and icons too?
WCAG exempts logos, but essential icons and interface controls have their own 3 : 1 guideline against adjacent colours. Body text, links and form labels are what this checker is for.
My brand colour fails on white. What can I do?
Keep the brand colour for large headings and graphics, and use a darker shade of the same hue for body text. The Loona Color Picker's tints-and-shades strip gives you those darker steps; re-check the shade here.
Is checking with this tool enough for legal compliance?
It verifies the contrast requirement precisely, but WCAG covers much more (keyboard access, alt text, focus order and so on). Treat a pass here as one requirement properly met, not a full audit.
More free photo tools
Compress photos to an exact KB size — 50KB, 100KB, 200KB.
Resize by pixels, cm or inches, with a print DPI setting.
Free crop plus ready ratios — 1:1, 4:3, passport and more.
Convert JPG, PNG and WebP both ways, with quality control.
Fix brightness, contrast and sharpness in seconds.
Turn a photo background white, blue or light grey.
Turn one or more photos into a single PDF file.
Add a text watermark — set size, colour, opacity, position or tile it.
Pick any colour and copy its HEX, RGB, HSL and HSV values.
Harmonious colour palettes from any base colour, in one click.
Build linear gradients and copy the CSS code instantly.