Colour contrast for readable text: the ratios, how to check, and how to fix a pair

You picked lovely colours for your website or poster, and then a customer says the price is hard to read. Or you squint at your own phone in the sun and the light grey text has gone. The colours are fine. The problem is contrast: how much the text stands out from what is behind it.

This guide explains contrast in plain words, the three numbers that matter, how to check any two colours, and how to fix a pair that fails without giving up your brand colour. The colour tool beside the guide follows along: type any colour code into it to see how it does as text.

What is a good contrast ratio for text?

Contrast is written as a ratio, from 1:1 (the same colour, invisible) to 21:1 (black on white). The web accessibility standard WCAG 2.2, from the W3C, sets the minimums most websites and many accessibility laws follow:

“Large” means 18 point, or 14 point bold. On a screen that is about 24 px, or about 18.5 px bold. Body text, prices, menu items and small print are normal text, so they need 4.5:1.

Two details catch people out. First, the numbers are not rounded: W3C says 4.499:1 fails 4.5:1. Second, the rule covers placeholder text in forms and text that appears on hover, not only the main text.

Contrast is not about taste. It is whether a tired person, on a cheap phone, in sunlight, can read your price.

How to check colour contrast

You need the two colour codes (like #F5B700), then any checker that uses the WCAG formula.

1. Type the colour into the tool beside this guide. It shows your colour as text on white and on near-black, and says whether it passes.
2. For any two colours, open the colour palette generator and use Check two colours. It marks normal text, large text and buttons as pass or fail.
3. On a live website, Chrome can show it too. Right-click the text, choose Inspect, then click the small colour square next to color in the Styles panel. The colour picker shows the contrast ratio, with lines marking the AA and AAA levels.

Try it

AaLogo yellow on white1.80 : 1Fails

AaNear-black on logo yellow10.56 : 1Passes

AaDeep gold on white5.22 : 1Passes

Try your own coloursTextBackground

Aa1.80 : 1Fails

What colour contrasts yellow the most?

This is the trap behind most failing websites. Bright yellow, lime, sky blue and pink are light colours. They look strong, but they are close to white in brightness, so they barely stand out on white.

Revathi runs a sweet shop in Salem with a warm yellow logo, #F5B700. On her new website she made the “Order on WhatsApp” link yellow, on a white page. It reads only 1.8:1: most of her customers’ eyes slide right past it.

The answer is to turn the pair around. Near-black text on her yellow reaches 10.56:1, enough for any text. So the colour that contrasts yellow the most is a very dark one: black, near-black or deep navy. Yellow works best as a background: a button, a price tag, a highlight strip, with dark text on it.

Pair	Contrast	Good for
Yellow #F5B700 text on white	1.8:1	Nothing: too faint
Near-black #101010 on yellow #F5B700	10.56:1	Any text
Deep gold #8A6700 text on white	5.22:1	Any text (AA)
White on deep gold #8A6700	5.22:1	Any text (AA)

How to fix a pair that fails

The usual mistake is to throw the colour away and pick another one. You don’t need to. Keep the hue (the “which colour” part) and only change how light or dark it is.

Revathi wanted her links to stay in her brand colour. Moving the same yellow down to a deep gold, #8A6700, gives 5.22:1 on white: it passes for normal text, and it still reads as her colour next to the yellow logo. In the palette tool, Fix the text colour does exactly this: it moves the text colour the shortest way lighter or darker, keeping its hue, until it reaches 4.5:1.

The same works for the other common failures:

• Light grey small print. Grey #999999 on white is only 2.84:1. A darker grey, #666666, reaches 5.74:1 and still looks soft.
• White on a bright red “sale” badge. White on #E53935 is 4.22:1: fine for a big badge, not for small text. A deeper red, #C62828, gives 5.62:1.
• Text over a photo. A busy photo has light and dark patches, so the ratio changes letter by letter. Put the text on a solid strip, or lay a dark see-through layer over the photo first.

Your logo itself is exempt: WCAG has no contrast rule for logo text. Everything else on the page, like the shop name in a heading or a price in your brand colour, still needs to pass.

Colour-blind safe colours: never use colour alone

About 1 in 12 men and 1 in 200 women are colour blind, and red and green are the colours most often confused. So a green “in stock” and a red “sold out” can look the same to many customers.

The fix is not a special palette. It is a habit: never let colour be the only signal. Add the words “Sold out”, an icon, or an underline on links. WCAG makes this its own rule (1.4.1, Use of Color), and its example is a form error shown only by a red border: add a short message, like “Enter a valid phone number”, and everyone can see it.

The palette tool’s See it as view shows your colours through the eyes of people with the common kinds of colour blindness. If two colours turn into the same muddy tone, give them a word or icon each. For choosing the colours in the first place, see brand colours for a small business.

Does contrast matter on posters and signs?

The WCAG numbers were written for screens, but the eye works the same on paper. A poster read from across the road, or a menu board in a dim corner, needs more contrast, not less. Use the same check: if a pair passes 4.5:1 on screen, it is a safe start for print. For more on posters, see poster and flyer design rules, and for sizing the pictures that go with them, how to reduce a photo’s size in KB.

Questions

What is a good contrast ratio for text?

At least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 18.5 px bold), under WCAG 2.2 level AA. The stricter AAA level asks for 7:1. Black on white is 21:1, the most possible.

How do I check colour contrast?

Type both colour codes into a WCAG contrast checker, like Check two colours in our colour palette generator. It gives the ratio and says whether it passes for normal text, large text and buttons. In Chrome you can also inspect any text and open its colour picker to see the ratio.

What colour contrasts yellow the most?

A very dark colour: black, near-black or deep navy. Near-black on a bright yellow reaches about 10 to 13:1. White on yellow is usually below 2:1, so keep yellow as a background with dark text on it.

Is 4.4:1 close enough for normal text?

No. WCAG does not round the ratio, so anything under 4.5:1 fails for normal text, even 4.49:1. A slightly darker shade of the same colour usually gets you over the line.

Do buttons and icons need contrast too?

Yes. Buttons, form field edges and icons need at least 3:1 against what is around them (WCAG 1.4.11). The text on a button is still text, so it needs 4.5:1 against the button colour.

Do logos have to meet the contrast rules?

No. WCAG makes an exception for text that is part of a logo. The rest of the page, including headings and prices in your brand colour, still needs to pass.

How do I make my colours safe for colour-blind people?

Don’t rely on colour alone: add words, icons or underlines to anything that shows meaning, like errors, sale prices or “sold out”. Then check that your main pairs have good contrast, since light-and-dark difference is what everyone can see.