Check text and background colour contrast against WCAG AA and AAA accessibility levels, for normal and large text. Runs entirely in your browser.
Aa Bb Cc
The quick brown fox jumps over the lazy dog.
Planning a new website?
We design fast, mobile-first websites that look sharp on every screen and turn visitors into enquiries.
Colour contrast is the difference in brightness between text and its background. Low contrast text is hard to read for people with low vision, colour blindness, ageing eyes, or anyone reading a phone in bright sunlight.
This free WCAG contrast checker calculates the contrast ratio between any two colours and shows whether they pass WCAG AA and AAA for normal and large text. A live preview shows real text on your background, and a swap button flips the colours in one click.
Accessible contrast is a legal requirement for many public sector and large business websites, and it makes every website easier to use.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. Enter your text and background colours above to see the ratio and which levels pass.
Check every text colour you use, including buttons, links, placeholder text and text on images.
Type a HEX code or use the picker.
Use the exact background behind the text.
See the contrast ratio and pass or fail for each WCAG level.
Darken the text or lighten the background until you reach at least AA.
WCAG compares the relative luminance (perceived brightness) of the two colours.
Ratio = (L1 + 0.05) / (L2 + 0.05)L1 = luminance of the lighter colourL2 = luminance of the darker colourRange: 1:1 (none) to 21:1 (black on white)Large text means at least 24px regular, or 18.66px bold (18pt or 14pt bold).
Fixing light grey text on white.
The minimum ratios set by the Web Content Accessibility Guidelines.
| Element | AA minimum | AAA minimum |
|---|---|---|
| Normal body text | 4.5:1 | 7:1 |
| Large text (24px+, or 18.66px+ bold) | 3:1 | 4.5:1 |
| UI components and icons | 3:1 | Not defined |
| Logos and decorative text | No requirement | No requirement |
| Disabled controls | No requirement | No requirement |
Good contrast improves readability for everyone, not just users with impairments.
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. 7:1 meets the stricter AAA level.
AA is the widely required standard. AAA is stricter and recommended for body text where possible, but not required for whole sites.
Text at least 24px regular or about 18.66px bold, equivalent to 18pt or 14pt bold.
In many countries public sector sites must meet WCAG AA, and accessibility laws increasingly apply to businesses too. Check the rules where you operate.
Not directly, but accessible, readable pages keep visitors engaged, and Lighthouse audits flag low contrast.
Yes. Use the swap button to flip text and background colours.
We audit and fix accessibility issues, from contrast to keyboard navigation, so your site works for every visitor. Explore our accessible web design services.