BluebirdBluebird
Home/Color Contrast Checker

Color Contrast Checker

Check WCAG AA and AAA color contrast between text and background, with a live preview.

  • Runs in your browser
  • No upload on server
  • Free, forever
How this works
  1. 1
    Pick two colours

    Set a foreground (text) and background. Use the eyedropper or paste hex codes.

  2. 2
    Read the ratio

    The tool shows the contrast ratio and whether it passes WCAG AA and AAA for small and large text.

  3. 3
    Nudge until it passes

    If it fails, darken/lighten one colour a step at a time — the meter updates live.

Watch: see how colours read side by side
AaAa
  1. Pick text color
  2. Pick background
  3. Check the ratio
Contrast ratio
16.30 : 1
The quick brown fox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. The five boxing wizards jump quickly.
WCAG compliance
  • AA — Normal textPass
  • AA — Large text (18pt+)Pass
  • AAA — Normal textPass
  • AAA — Large textPass
  • Graphics & UI componentsPass
How this works
  • Pick a text color and background color.
  • The ratio updates live, alongside WCAG AA and AAA checks.
  • Aim for at least 4.5:1 for normal body text.

Rate Color Contrast Checker

One tap. Anonymous. Helps others find the good tools.

No account, no email, no tracking — just a 1–5 number.

Be the first to rate