Colour Contrast Checker

How to use the Colour Contrast Checker

1. Pick a foreground (text) colour with the colour picker, or type a hex value such as #F4F4F5.
2. Set the background colour the same way.
3. Watch the live preview and the contrast ratio update as you change either colour.
4. Read the WCAG 2.1 AA and AAA pass/fail badges for normal and large text.
5. Use Swap colours to reverse foreground and background, or Suggest AA foreground if you need a quick fix that meets AA for body text.

If you enjoy what we do, consider supporting us. Every little bit means the world! Support Catpool on Ko-fi

What it is for

Accessible colour contrast helps people with low vision, colour vision differences, or bright outdoor screens read your content without strain. WCAG 2.1 sets minimum contrast ratios between text and its background. For normal text you generally need at least 4.5:1 for AA and 7:1 for AAA. Large text (roughly 18pt regular or 14pt bold and above) can use 3:1 for AA and 4.5:1 for AAA.

This checker is useful when you are choosing colours for a site theme, a UI kit, marketing graphics, or slides. Paste the hex values from a mock-up, compare them against a dark or light panel, and adjust until the badges show Pass for the level you need. If you are exploring palettes first, try the Colour Palette Generator, then bring favourite swatches here to verify contrast.

Why it runs in your browser

Contrast is calculated locally with the standard relative luminance formula for sRGB. Your colour choices never leave the tab, so you can check brand colours, client drafts or unpublished themes without uploading anything to a remote service.

Tips

Favour checking real combinations you will ship, such as body text on cards, labels on buttons and captions on photos, not only logo colours on a white artboard. Large decorative headings may pass at a lower ratio while the same colour fails for paragraph text. When in doubt, aim for AA on normal text; AAA is a higher bar used for enhanced accessibility.

Common questions

What counts as large text?

Under WCAG, large text is at least 18 point (or 14 point if bold), or the CSS equivalents your design tool uses. The preview shows a larger sample so you can judge both cases at a glance.

Does a Pass guarantee a perfect design?

No. Contrast is one accessibility check. You still need clear layout, focus styles, readable type size and meaningful labels. Treat this tool as a fast filter before you publish.

What does Suggest AA foreground do?

It nudges the current foreground lighter or darker against your background until the ratio reaches at least 4.5:1 for normal text, or falls back to white or black if needed. You can still fine-tune the hex afterwards.

Can I use three-digit hex codes?

Yes. Values such as #FFF are expanded to six digits automatically when you leave the field.

Related: Colour Palette Generator, Developer, Catpool home.