Colour Contrast Checker
Check text and background colours against WCAG AA and AAA, with fixes that pass.
Free. Runs in your browser, no sign-up.
Type HEX such as #1A2B3C or RGB such as 26, 43, 60.
–contrast ratio
Large heading text
Body text at 16px. Book your free consultation today and see how we can help your business.
Small print at 13px, like opening hours or terms.
Button outline| Use | Level AA | Level AAA |
|---|---|---|
| Normal text | ||
| Large text (24px, or 18.7px bold) | ||
| Icons, borders and form controls | No AAA level |
Closest colours that pass
Same hue as your text colour, with only the lightness changed.
How to use it
- Enter your text colour and background colour as HEX or RGB, or use the colour pickers.
- Read the ratio and the pass or fail result for each WCAG level.
- If a check fails, use a suggested colour, which keeps your hue and changes only the lightness.
Good to know
- Contrast is one part of accessibility. A page also needs readable font sizes, clear structure, keyboard access and text alternatives for images.
- Large text means at least 24px regular or about 18.7px bold. Text over photos or gradients needs checking against the lightest and darkest parts behind it.
Questions
What contrast ratio do I need?
WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text and user interface parts such as button borders. Level AAA asks for 7:1 and 4.5:1.
How is the ratio calculated?
Each colour is converted to its relative luminance, and the ratio is (lighter + 0.05) divided by (darker + 0.05), as defined in WCAG 2. The result runs from 1:1 to 21:1.
Related reading
Rather have a designer do it? Logos, brand identities and social kits by vetted professionals.
Request a quote