Contrast Checker — WCAG AA & AAA Color Contrast

What the WCAG levels mean

The Web Content Accessibility Guidelines define minimum contrast ratios so text stays readable for people with low vision or colour deficiencies. There are two levels:

AA is the standard most sites aim for: at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal text and 4.5:1 for large text.

What counts as "large" text?

Large text is roughly 24px and up, or about 18.66px if bold. Because larger letters are easier to read, they are held to a lower contrast requirement.

How contrast ratio is measured

The ratio compares the relative luminance of your two colours. It runs from 1:1 (the same colour, invisible) up to 21:1 (pure black on pure white). The higher the number, the easier the text is to read. Relative luminance is a weighted measure of how bright a colour appears to the human eye — green contributes most, blue least — which is why two colours that look equally "dark" can have very different contrast against white.

Why contrast matters

Low-contrast text is one of the most common accessibility failures on the web, and it affects far more people than just those with diagnosed vision impairments. Anyone reading on a phone in bright sunlight, on a dim laptop, or simply with ageing eyes benefits from sufficient contrast. Meeting WCAG isn't only about compliance — it's about your content actually being readable for the widest possible audience. Many regions also have legal accessibility requirements (such as the ADA in the US or the European Accessibility Act) where WCAG AA is the practical benchmark.

How to fix a failing colour pair

If your colours don't pass, you have a few options without abandoning your palette. Darken the text colour or lighten the background (or vice versa) until the ratio clears the threshold — small lightness changes often make the difference. Increasing the font size or weight can move you from the normal-text requirement to the more lenient large-text one. And if a brand colour simply can't pass against white, reserve it for large headings, icons or decorative elements rather than body copy, and pair body text with a darker, higher-contrast variant. Use the swap button above to test the reverse pairing instantly.

Frequently asked questions

What contrast ratio do I need for WCAG?

AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

At least 18pt (about 24px), or 14pt (about 18.66px) if bold. Large text has a lower contrast requirement because bigger letters are easier to read.

How is contrast ratio calculated?

It compares the relative luminance of the two colours, from 1:1 (identical) to 21:1 (black on white). Higher means more readable.

Should I aim for AA or AAA?

AA (4.5:1) is the standard most sites target and what accessibility laws generally reference. AAA (7:1) is stricter and worth aiming for where you can, especially for long-form reading.

My brand colour fails on white — what now?

Use it for large headings, icons or accents rather than body text, and pair body copy with a darker variant. Darkening the colour slightly often clears AA while staying on-brand.

WCAG contrast checker