Home·Colour tools·Colour Contrast Checker

Colour Contrast Checker

Calculates the contrast ratio between a background and a text colour and tells you whether it passes the web accessibility thresholds (WCAG AA and AAA), with a live text preview so you can judge it by eye too.

🎨 Everything runs in your browser. No install, no sign-up.

A heading looks like this

Body text reads at about this weight.

Small text like a caption gets this small — insufficient contrast shows up here first.

Contrast ratio

3.68 : 1

Only usable at large sizes

Fail

AA body

4.5:1

Pass

AA large

3:1

Fail

AAA body

7:1

Fail

AAA large

4.5:1

What the levels mean

  • · AA 4.5:1 — the baseline for web accessibility. Body text has to clear this.
  • · 3:1 — from 18pt (or 14pt bold) the threshold drops.
  • · AAA 7:1 — the stricter level, sometimes required for public-sector sites.
  • Contrast is decided by difference in lightness, not by hue. That is why white text on yellow is unreadable even though the colours are different.

What this tool does

  • Contrast ratio from 1 to 21
  • AA and AAA pass or fail
  • Separate verdict for large text
  • Auto-adjust lightness until it passes

Other colour tools

Colour Blindness SimulatorHow a colour looks with colour vision deficiencyColour Palette GeneratorPull colours that work with a base colour, by ruleColour Shades GeneratorTurn one colour into a 50–900 scaleColour MixerFind the colour between two colours

Colours may look slightly different depending on your screen and its colour profile.