PFVPFV Tools
All tools

Contrast Checker

Check colour contrast against WCAG AA and AAA accessibility thresholds.

  • wcag
  • accessibility
  • a11y
  • contrast
  • colour

About Contrast Checker

Colour contrast is one of the most measurable parts of web accessibility. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio between text and its background — running from 1:1 (no contrast) to 21:1 (pure black on pure white) — and set thresholds for what counts as readable. AA-level text requires at least 4.5:1, large text at least 3:1, and AAA bumps those to 7:1 and 4.5:1.

These thresholds aren't arbitrary: they're based on how much contrast people with reduced vision actually need to read body copy comfortably. Designs that pass them are easier to read for everyone, especially on glare-prone screens or in bright sunlight. This checker computes the exact WCAG ratio between any two colours and tells you which conformance levels you pass.

How to use

Set the foreground colour and the background colour, either by clicking the swatches to use the native colour picker or by typing a HEX value into the input. The big sample text panel at the top previews exactly how the combination will look at multiple sizes — headlines, body copy, and small print.

The contrast ratio appears as a single number with a verdict ("AAA", "AA", "AA Large only", or "Fails WCAG"). The per-check panel breaks the result down into the five WCAG checks: AA and AAA for normal text, AA and AAA for large text (18 pt+ regular or 14 pt+ bold), and a 3:1 threshold for UI components like icons, focus rings, and form controls. Use the swap button between the inputs to flip foreground and background, and the URL updates as you go so you can bookmark or share a specific pair.

Frequently asked questions

  • What contrast ratio should I aim for?

    For body text, aim for at least 4.5:1 (WCAG AA) — and 7:1 if you want to comfortably clear AAA. For large text (18 pt+ regular or 14 pt+ bold), the thresholds drop to 3:1 (AA) and 4.5:1 (AAA). UI components like form-field borders, focus rings, and icons need at least 3:1 against their backgrounds.

  • What counts as "large text"?

    WCAG defines large text as 18 pt or larger at regular weight, or 14 pt or larger at bold weight. In CSS terms that's roughly 24px regular or 19px bold. Anything smaller has to clear the stricter normal-text thresholds, so the most-frequent failure is body copy that's just a shade too light.

  • How is the ratio calculated?

    It uses the WCAG 2.1 formula: each colour is converted to a relative luminance (a perceptual lightness on a 0–1 scale), then the ratio is (L_lighter + 0.05) / (L_darker + 0.05). The result runs from 1:1 (no contrast) to 21:1 (pure black on pure white) and is symmetric — swapping foreground and background doesn't change the number.

  • Does WCAG apply to non-text content?

    Partially. The 3:1 "UI components & graphics" threshold covers icons, form-field borders, focus indicators, and meaningful chart elements. Decorative graphics, logos, and disabled controls are exempted. The 4.5:1 / 7:1 numbers are specifically about readable text.

  • Why does my brand colour fail against white but pass against black?

    Most mid-range brand colours are too light to clear 4.5:1 against white but easily clear it against black, simply because there's much more luminance gap between any mid-tone and black than between the same mid-tone and white. The pragmatic fix is to use white text on the brand colour as a button, and reserve the brand colour for headings, icons, or dark-on-light hyperlinks only when it's dark enough.

More Colour tools