How to Check Colour Contrast for Accessibility (WCAG Explained)

If text does not stand out enough from its background, people with low vision, colour-blindness, or just a phone in bright sunlight cannot read it. Contrast is one of the easiest accessibility problems to measure and fix.

What “contrast ratio” means

Contrast is expressed as a ratio between the lightness of two colours, from 1:1 (identical, invisible) to 21:1 (pure black on pure white). It is calculated from the relative luminance of each colour, which weights green more heavily than red or blue because that is how human vision works. You do not need to do the maths — a checker does it — but it is why two colours that look different can still fail.

The WCAG thresholds

• AA, normal text: 4.5:1 — the common minimum, and what most organisations are expected to meet.
• AA, large text: 3:1 — “large” means about 24px, or 19px bold, and above.
• AAA, normal text: 7:1 — a stricter target for content that needs to be readable by as many people as possible.

These apply to text and to meaningful UI elements like icons and form borders. Purely decorative graphics are exempt.

How to check a colour pair

Take the text colour and the colour directly behind it (not the page background if there is a card or overlay in between) and put both into a contrast checker. It will give you the ratio and tell you which levels pass. Check the states people actually see: hover, visited links, placeholder text, disabled buttons, and text over images.

Fixing a pair that fails

• Darken the text or lighten the background — usually you only need to nudge the lightness, keeping the hue, so the brand still looks right.
• Add a solid backing behind text that sits on a photo or gradient.
• Increase weight or size — large text has a lower threshold, so bumping a subheading to bold can bring it into compliance.
• Never rely on colour alone to convey meaning (e.g. red/green for error/success) — add an icon or label for people who cannot distinguish them.

Check yours now

Paste any HEX, RGB or HSL colour into our Color Converter and it shows the contrast ratio against white and black text with an AA/AAA badge, plus a matching palette if you need an accessible accent colour. It runs entirely in your browser.