Colour contrast checker.
Pick a text colour and a background to see whether they pass WCAG AA and AAA, how they look at real sizes, and the nearest colours that would pass. Free, no sign-up.
Contrast ratio
4.54:1
Passes AA for all text, and AAA for large text.
WCAG results
- Normal text, AAWCAG 1.4.3 · at least 4.5:1Pass
- Large text, AAWCAG 1.4.3 · at least 3:1Pass
- Buttons, icons and borders, AAWCAG 1.4.11 · at least 3:1Pass
- Normal text, AAAWCAG 1.4.6 · at least 7:1Fail
- Large text, AAAWCAG 1.4.6 · at least 4.5:1Pass
At real sizes
Large heading text
Body text at 18px. If this is hard to read here, it'll be harder on a phone in sunlight.
Small print at 14px is the first thing to become hard to read.
Through colour-blind eyes
About 1 in 12 men and 1 in 200 women have some colour blindness. Simulated at full strength.
- Typical vision 4.54:1
- Protanopia (red-blind) 4.54:1
- Deuteranopia (green-blind) 4.54:1
- Tritanopia (blue-blind) 4.54:1
Choosing colours for a whole site? The palette generator checks every pairing at once.
What the results mean
Normal text, AA: 4.5:1
The standard most websites aim for. Body text, labels, links and anything smaller than 24px (or 19px bold) needs at least 4.5:1 against its background.
Large text: 3:1
Bigger text is easier to read, so text at 24px or more, or 19px and bold, only needs 3:1 at level AA, and 4.5:1 at AAA.
Buttons, icons and borders: 3:1
Since WCAG 2.1, the parts of a control you need to see to use it, like a button's outline, an icon or a form field's border, need 3:1 against whatever is next to them.
AAA: 7:1
The enhanced level. Few standards require it, but it's worth aiming for on long reading and for older audiences, whose contrast sensitivity drops with age.
Questions about colour contrast
What contrast ratio does my website need?
At least 4.5:1 for normal text, and 3:1 for large text, buttons and icons. That's WCAG level AA: the level UK public sector websites have to meet, and the one accessibility guidance points everyone else to.
What counts as large text?
WCAG defines large text as at least 18 point (24px) at a regular weight, or 14 point (about 19px) in bold. Anything smaller is normal text and needs the higher ratio.
Why does #777777 grey fail on white?
It comes out at 4.47:1, just under the 4.5:1 that AA needs. One shade darker, #767676, passes at 4.54:1, which is why it's this checker's starting example: the lightest grey you can use for text on white. Pale grey text is one of the most common accessibility failures on the web.
Is this the WCAG 2.2 formula?
Yes. The contrast formula hasn't changed since WCAG 2.0, so a pass here is a pass for 2.0, 2.1 and 2.2. WCAG 3 is still a draft, and how it will measure contrast hasn't been settled.
How accurate is the colour-blindness preview?
It uses a widely cited model (Machado and colleagues, 2009) to simulate the three main types at full strength. Real colour vision varies a lot, so treat it as a guide: colours that differ only in hue, like red and green at the same lightness, are the ones to watch.
Can I check a whole palette at once?
Yes. Our free palette generator checks every pairing a website uses, like text on cards and labels on buttons, in one go, and fixes any that fail.
Accessible by design.That's how we build.
Tell us about your project and we'll come back within one working day with ideas and a fixed-price quote.
Get a free quote →