If you have ever run a website through an accessibility audit and seen "colour contrast" listed as a failure, you are not alone. Colour contrast is consistently one of the most common WCAG failures found on the web — and one of the easiest to fix once you understand the numbers.
This guide explains exactly what the WCAG contrast requirements are, what they mean in practice, and how to test and fix your colours for free.
What Is WCAG and Why Does It Matter?
WCAG stands for Web Content Accessibility Guidelines, a set of technical standards published by the W3C (World Wide Web Consortium) to make web content accessible to people with disabilities. WCAG is the standard referenced by accessibility laws worldwide, including the ADA in the United States, the European Accessibility Act, and EN 301 549.
There are three levels: A (minimum), AA (standard), and AAA (enhanced). Level AA is the one most organisations target and most regulations require. Level AAA is best practice but rarely mandated by law.
The WCAG Colour Contrast Ratio — What It Means
A colour contrast ratio measures the luminance difference between two colours — specifically between a text colour and its background. The ratio is expressed as a number like 4.5:1 or 7:1.
The formula uses relative luminance — a measure of how much light a colour appears to emit. Pure white has a luminance of 1, pure black has a luminance of 0. The ratio is calculated as:
(Lighter luminance + 0.05) ÷ (Darker luminance + 0.05)
You don't need to do this manually. Enter your two hex codes into the free WCAG contrast checker and the tool calculates the ratio instantly.
WCAG AA Requirements — The Legal Standard
WCAG 2.1 Level AA requires:
- Normal text: minimum contrast ratio of 4.5:1
- Large text: minimum contrast ratio of 3:1
Large text is defined as 18pt (24px) or larger, or 14pt (18.5px) bold or larger. This applies to all visible text on your website — body copy, navigation links, buttons, form labels, placeholder text, captions, and error messages.
4.5:1 is a meaningful threshold. Classic black text (#000000) on white (#FFFFFF) achieves 21:1 — the maximum possible ratio. Many popular design choices like light grey text (#999999) on white only achieve 2.85:1 — well below the 4.5:1 minimum.
WCAG AAA Requirements — Enhanced Standard
WCAG 2.1 Level AAA requires:
- Normal text: minimum contrast ratio of 7:1
- Large text: minimum contrast ratio of 4.5:1
AAA is significantly more restrictive. The same black on white achieves 21:1 and passes AAA easily, but many brand colour combinations that pass AA will fail AAA — particularly mid-tone colours used as accent text.
Most websites aim for AA across the board and selectively push critical content (body copy, primary navigation, key calls to action) toward AAA where the palette allows.
What WCAG Contrast Applies To
The contrast requirement applies to text and images of text against their background. It does not apply to:
- Purely decorative elements with no informational purpose
- Logos and brand marks (though good contrast is still recommended)
- Disabled form controls (greyed-out buttons that are not interactive)
- Text that is part of a photograph or complex image
It does apply to everything else — including text inside buttons, text overlaid on background images, icon labels, and placeholder text in form fields.
Common WCAG Contrast Failures
Light grey body text: #999999 on white = 2.85:1 — fails AA. Fix: darken to #767676 (4.54:1) or use #666666 for comfortable reading.
White text on a mid-blue button: #FFFFFF on #4A90D9 = 2.98:1 — fails AA. Fix: darken the blue to #1A5F9E or use dark text instead.
Placeholder text in form fields: Most browsers render placeholder text at around 50% opacity — making even dark placeholder colours fail. Fix: explicitly set placeholder colour to at least #767676.
Text over background images: If text sits on a photograph, the contrast varies across the image. Fix: add a semi-transparent dark overlay (60-80% opacity black) under the text, or use a solid colour text container.
How to Check and Fix WCAG Contrast
- Open the free colour contrast checker
- Enter your text colour and background colour as hex codes
- Read the ratio and pass/fail result
- If failing, use the Auto-fix button to generate a passing alternative close to your original colour
- Test every text/background combination on your site — body copy, buttons, links, navigation, form fields, alerts
Checking Your Entire Brand Palette
If you have multiple brand colours used in different contexts, use the Palette Contrast Grid — available in the contrast checker — to add all your colours and see every possible combination's ratio in a single table. This is particularly useful for design systems where multiple colour pairings are used across components.
Summary — WCAG Contrast Requirements
Test your colours free: webassetsuite.com/contrast-checker
Related guides:
- WCAG contrast checker — free AA & AAA test
- ADA compliance colour checker
- WCAG AA vs AAA — which do you need?