Accessibility · Guide

WCAG Color Contrast — AA & AAA Explained

5 min readUpdated January 2025Developer Tools

Colour contrast is one of the most common accessibility failures on the web. This guide explains WCAG 2.1 contrast requirements, how to measure contrast ratios, and how to fix problems before they reach users.

Free Online Color Contrast Checker

Check any colour pair against WCAG AA and AAA standards instantly. Runs in your browser.

Open Color Contrast Checker →

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are internationally recognised standards published by the W3C that define how to make web content accessible to people with disabilities. WCAG 2.1 is the current standard referenced by most accessibility laws including the ADA, Section 508, and the EU Web Accessibility Directive.

Colour contrast is covered under WCAG Success Criterion 1.4.3 (Normal text) and 1.4.6 (Enhanced contrast). Failing these criteria is one of the most frequently cited accessibility issues in audits.

What is a contrast ratio?

A contrast ratio measures the difference in luminance (brightness) between two colours — typically text and its background. It's expressed as a ratio like 4.5:1, where a higher number means more contrast.

1:1 — identical colours (no contrast — invisible text)
4.5:1 — WCAG AA minimum for normal text
7:1 — WCAG AAA for normal text (highest standard)
21:1 — black text on white background (maximum possible)

WCAG contrast requirements

Level	Text type	Min ratio	Text size
AA	Normal text	4.5:1	Below 18pt / 14pt bold
AA	Large text	3:1	18pt+ / 14pt+ bold
AAA	Normal text	7:1	Below 18pt / 14pt bold
AAA	Large text	4.5:1	18pt+ / 14pt+ bold
AA	UI components & icons	3:1	Against adjacent colour

18pt = 24px at standard screen resolution. 14pt bold = approximately 18.67px bold. Large text gets a lower minimum because it's easier to read at lower contrast.

How to check colour contrast

Open the colour contrast checker
Enter your foreground (text) colour as a hex code
Enter your background colour
The tool instantly shows the contrast ratio and whether it passes AA and AAA for both normal and large text

You can also use the share URL feature to send a specific colour pair to a client or colleague for review.

Common contrast failures and fixes

Common problem	Typical ratio	Fix
Light grey text on white	~2:1	Darken text to #767676 or darker
Brand colour on white (light blue/green)	2–3:1	Darken the brand colour or use on dark bg
White text on yellow	~1.1:1	Use dark text on yellow, not white
Placeholder text in inputs	Often fails	Use #767676 minimum on white
Disabled buttons	Below 3:1	Exempt if clearly non-interactive

What is exempt from contrast requirements?

Not everything needs to pass contrast checks. WCAG exempts:

Decorative text — text that conveys no information (purely visual)
Inactive UI components — disabled buttons and form elements
Logotypes — text that is part of a logo or brand mark
Incidental text — text in photos or complex background images

Why contrast matters beyond compliance

Low contrast affects far more people than those with diagnosed visual impairments. It degrades readability for everyone in bright sunlight, on low-quality screens, when tired, or when viewing from an angle. Meeting WCAG contrast standards makes your site better for all users, not just accessible users.

Research shows that 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Low contrast combined with relying solely on colour to convey meaning creates a significant barrier.

Frequently asked questions

Does contrast apply to icons without text?

Yes, under WCAG 1.4.11 (Non-text Contrast, Level AA). Icons that convey meaning need a 3:1 contrast ratio against their adjacent colour. Purely decorative icons are exempt.

What about text on images or gradients?

You must ensure contrast is sufficient at every point where text overlaps the image or gradient. This is why overlaying white text on photos usually requires a dark overlay — the lightest part of the photo must still pass the contrast check.

AA or AAA — which should I aim for?

AA is the legal minimum in most jurisdictions and a realistic target for most sites. AAA is aspirational — it's difficult to achieve across all elements including interactive components. Aim for AA everywhere and AAA for body text where possible.

Try it now — free & private

Runs entirely in your browser. No sign-up, no uploads, no tracking.