Contrast Checker — WCAG AA & AAA

Pick a foreground and background colour, see the contrast ratio in real time and whether the pair meets WCAG 2.1 AA or AAA targets for normal and large text.

What is contrast ratio?

Contrast ratio is a number from 1:1 (no contrast — same colour on same colour) to 21:1 (black on white) that measures how visually distinct two colours are. WCAG (Web Content Accessibility Guidelines) sets minimum ratios that text must meet for users with low vision or in difficult lighting conditions to read it comfortably.

WCAG 2.1 sets two compliance levels: AA (the legal floor in most jurisdictions — 4.5:1 for normal text, 3:1 for large) and AAA (best practice, 7:1 normal / 4.5:1 large). 'Large text' is 18pt or larger, or 14pt bold or larger. This tool computes the ratio using the official sRGB relative-luminance formula and shows pass/fail for each level.

How to use this tool

Pick the text (foreground) colour and the background colour using either the colour pickers or by typing hex values directly.
Read the contrast ratio at the top right and the AA/AAA pass/fail badges below. Green badges pass; red badges fail.
Adjust the colours until you hit at least AA Normal (4.5:1) for body text. Aim for AAA (7:1) when you can — it makes a real difference for users with mild vision impairment.

Frequently asked questions

What's the legal minimum?

In the EU (Web Accessibility Directive 2018) and in the US (Section 508, ADA case law), the minimum is WCAG 2.1 AA. For text, that's 4.5:1 for normal-size and 3:1 for large. Public-sector sites must comply; private-sector compliance is increasingly required by case law.

Do icons need contrast too?

Yes — WCAG 2.1 added a 3:1 minimum for non-text elements (icons, form borders, focus indicators) that convey meaning. Plain decorative images are exempt, but anything users need to perceive must meet 3:1.

What counts as 'large text'?

WCAG defines large as 18pt or larger (24px at default browser settings) for normal weight, or 14pt or larger (~18.66px) for bold. Headings usually qualify; body text usually does not.

Why is dark text on dark background hard to fix?

When both colours are dark, you have very little luminance to work with — small adjustments produce small ratio changes. Often the answer is to lighten the background significantly (a card with a slightly lighter tone) rather than tweak the text colour.

Are gradients and images covered?

Text on a gradient or image needs to meet contrast against the worst spot of the underlying surface. Add a solid overlay or a translucent panel behind the text to ensure readability — auditing 'against a gradient' inevitably finds a failing spot if the gradient is wide enough.

Common use cases

Where checking contrast prevents accessibility issues.

Auditing a brand palette

When a brand picks colours for marketing, designers rarely check if the brand-on-brand-background combination passes WCAG. Run all combinations through the checker before locking the design system.

Picking a button colour

A primary CTA needs strong contrast against both the page background AND its own text colour. The checker quickly reveals whether your button colour passes AA against white text or needs adjustment.

Choosing a code-block syntax theme

Syntax highlighting often fails WCAG even when the rest of the site passes. Run the most-used token colours (keywords, strings) against your code-block background to surface the failures before users complain.

Validating dark mode

Dark mode designs frequently use too-low contrast for body text. Test your dark-mode foreground/background pair: 4.5:1 isn't optional just because the page is dark.

Tips and shortcuts

Habits that make accessible colour choices the default.

Aim for AAA on body text

AA is the legal minimum; AAA is what your low-vision users actually want. The cost is usually a small darkening of body text or lightening of background — barely noticeable to designers, transformative for users.

Use system colours for body text

Default 'black' (#000) on white gives 21:1 — the maximum. Slate-900 on white gives 17:1, still excellent. Stay close to those defaults for body copy and reserve coloured text for accents and links.

Test focus indicators too

The :focus outline must contrast at 3:1 against the background. Default browser blue (often #0066ff) usually passes against white but fails against dark or coloured surfaces. Override with a custom outline that you've verified.

Don't rely on hover state for accessibility

Many users (touch, keyboard) don't see hover states. The default (non-hover) appearance must already be accessible; hover is an enhancement, not a fallback.