Free tool No sign-up
Colour Contrast Checker
Check WCAG 2.1 contrast ratios between any two colours — instant AA / AAA pass-fail with a live preview.
accessibilitywcagcontrastcolora11y
Why colour contrast matters
Accessibility for everyone
Roughly 1 in 12 men and 1 in 200 women have some form of colour-vision deficiency. Strong contrast keeps content readable for users with low vision, glare on screens, or aging eyes.
Legal compliance
WCAG 2.1 is referenced by the ADA, EAA, Section 508, and many regional laws. Failing contrast checks is one of the most common reasons sites get accessibility complaints.
Real-world readability
Phones in sunlight, dim laptop screens, projectors — high contrast survives every viewing condition. Low-contrast UIs fall apart the moment they leave the designer's monitor.
Better visual hierarchy
Treating contrast as a system — not an afterthought — forces clearer typography decisions and makes calls-to-action stand out without resorting to bright accent colours alone.
How to use this checker
01
Pick your foreground colour
Enter a hex code or click the swatch to use the colour picker. Both #rgb shorthand and #rrggbb formats are accepted — paste from Figma, your design tokens, or anywhere.
02
Pick your background colour
Set the background the foreground will sit on — a page surface, card, or button fill. The live preview updates instantly so you can see the actual combination at body and heading sizes.
03
Read the contrast ratio
The big number is your WCAG contrast ratio, from 1:1 (no contrast) to 21:1 (pure black on white). The verdict label tells you which WCAG tier the pair has reached.
04
Check AA / AAA pass-fail
Five compliance pills break the result down: AA and AAA for normal and large text, plus the 3:1 minimum for UI components and graphical objects.
Common WCAG ratios & targets
| Use case | Required ratio |
|---|---|
AA · Normal text | 4.5 : 1 |
AA · Large text (18pt+) | 3 : 1 |
AAA · Normal text | 7 : 1 |
AAA · Large text | 4.5 : 1 |
UI components & graphics | 3 : 1 |
Decorative / disabled | exempt |
Black on white | 21 : 1 |
Common grey-on-grey fail | 2.2 : 1 |
Brand violet on white | 7.07 : 1 |
White on brand violet | 4.96 : 1 |
Light grey on white | 1.6 : 1 |
Pure white on black | 21 : 1 |
Contrast patterns
Formula
/* WCAG contrast formula */ ratio = (L1 + 0.05) ÷ (L2 + 0.05) /* L1 = lighter relative luminance, L2 = darker */
AA pass
/* AA pass — body text */ color: #1a1a1a; /* near-black */ background: #ffffff; /* white */ /* ratio = 17.04:1 — passes AAA */
AA fail
/* Common failure — grey on grey */ color: #9ca3af; /* tailwind gray-400 */ background: #f3f4f6; /* tailwind gray-100 */ /* ratio = 2.20:1 — fails AA */
Large text
/* Large text (≥ 24px or ≥ 18.66px bold) */
h1 { color: #4f46e5; } /* indigo-600 */
/* on #ffffff → 7.07:1 — passes AAA Large */ Pro tips
01
Test on real backgrounds
A button might pass on white but fail on your hero image. Always test text against the actual background it lives on, including gradients and photos.
02
Don't rely on colour alone
WCAG 1.4.1 — never use colour as the only way to convey information. Pair red error text with an icon, underline links, add labels to coloured status dots.
03
Mind disabled & placeholder states
Designers often grey-out disabled buttons and placeholder text below 4.5:1. WCAG technically exempts disabled controls, but if users can't read placeholders, your form is broken.
04
Aim for AAA where it counts
AA (4.5:1) is the legal minimum. Push body copy and critical UI to AAA (7:1) when you can — it costs nothing and meaningfully helps low-vision users.