Question 1

What contrast ratio do I actually need?

Accepted Answer

WCAG 2.2 Level AA — the standard referenced by the UK Equality Act, the European Accessibility Act and the US ADA — requires 4.5:1 for normal text, 3:1 for large text (18.66px bold or 24px regular and above) and 3:1 for meaningful icons, borders and form outlines. Level AAA raises text to 7:1 and large text to 4.5:1.

Question 2

What counts as 'large text'?

Accepted Answer

24px (18pt) regular weight or 18.66px (14pt) bold and above. The threshold exists because thicker letterforms remain legible at lower contrast. Note it's based on rendered size, so a heading that shrinks on mobile may fall below the threshold and need the stricter 4.5:1 ratio.

Question 3

Does contrast apply to buttons, icons and form fields?

Accepted Answer

Yes. WCAG 1.4.11 requires 3:1 for user interface components and meaningful graphics — button borders, toggle states, focus indicators, chart lines and icons that convey information. Purely decorative graphics and disabled controls are exempt, though a disabled control still needs to be identifiable.

Question 4

Why does my pale grey placeholder text fail?

Accepted Answer

Light grey on white is the most common accessibility failure on the web. #999999 on white gives just 2.85:1 — below AA for any text size. Placeholder text is held to the same standard as body text, and it's also poor practice to rely on it for labelling. Use a visible label and darken the placeholder to at least #767676.

Question 5

Is white text on a bright colour usually accessible?

Accepted Answer

Often not. White on mid-tone brand colours — many oranges, yellows, teals and pinks — lands between 2:1 and 3.5:1. Either darken the background substantially or switch to dark text on top. Yellow and light green almost always need dark text.

Question 6

Does the contrast checker account for colour blindness?

Accepted Answer

Indirectly. Contrast ratio is based on luminance, which most forms of colour blindness perceive normally, so good contrast helps everyone. But it won't catch a red/green pairing that's identical in luminance — that's why you should never use colour alone to convey meaning. Add text, an icon or a pattern.

Question 7

How do I test contrast on gradients and images?

Accepted Answer

Test the worst-case point — the lightest part of the gradient behind light text, or the brightest area of a photo. If that fails, add a semi-transparent overlay or a solid text panel. Text sitting directly on a photograph almost never passes reliably across all screen sizes.

Question 8

Is dark mode more accessible than light mode?

Accepted Answer

Not inherently. Dark mode helps some people with light sensitivity and hinders others with astigmatism, who see 'halation' around light text on dark backgrounds. Offer both, and check each theme separately — a palette that passes in light mode routinely fails when inverted.

Question 9

Does font weight affect real-world legibility?

Accepted Answer

Yes, though WCAG doesn't measure it. Thin and light font weights look considerably fainter than the maths suggests, particularly on lower-resolution screens. If you're using a 300-weight font, aim comfortably above the minimum rather than sitting exactly on 4.5:1.

Colour Contrast Checker (WCAG)

How it works

How it works

A worked example

How to interpret your result

Common real-world uses

Frequently asked

Related calculators