Colour Contrast and Readable Design

Why contrast matters

Contrast is the difference in brightness between text (or another element) and its background. Low contrast makes content hard to read for people with low vision or some forms of colour vision difference. It also affects almost everyone at some point: a phone screen in bright sunlight, a cheap projector, or an old monitor can turn pale grey text on white into guesswork.

Marketing often leans on soft palettes and light text for a refined look. That look is not worth much if the message cannot be read.

What contrast ratio means

Contrast is usually expressed as a ratio between two colours, from 1:1 (no difference, such as white on white) up to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios at different levels. The commonly cited level AA requirements are:

• Normal text: at least 4.5:1 against its background.
• Large text: at least 3:1. WCAG defines large text as roughly 18 point and above, or 14 point and above when bold. In browser terms that is about 24 pixels, or about 18.7 pixels bold.
• Interface components and meaningful graphics: at least 3:1, for things like input borders, icons that carry meaning and chart elements. This was added in WCAG 2.1.

There is also a stricter level AAA, which asks for 7:1 for normal text. Check the current version of the guidelines for the exact wording, since the details are published and updated by the W3C.

You do not need to calculate these by hand. Free contrast checker tools let you enter two colour values and report the ratio and whether it passes. Browser developer tools often show it too.

Where marketers run into trouble

Common trouble spots include:

• Light grey body text or captions on white.
• White text on a pale photo or a brand colour that is mid-toned.
• Text placed directly over an image where the background varies from dark to light.
• Buttons whose label and background colour are too similar, especially in a hover or disabled state.
• Hint text inside form fields, which is often pale grey, and thin form borders that almost disappear.
• Links that differ from surrounding text only by a slightly different shade.
• Pastel shades on a coloured promotional banner.

A good habit is to check your brand’s main colour combinations once, record which pairings pass for text and which pass only for large text or decoration, and put that in your brand guidelines. That saves repeated checking and keeps designers from reinventing the problem. If you have a written approach to brand consistency, a short “approved colour pairs” table is a useful addition.

Do not rely on colour alone

Colour vision deficiency is fairly common, and it is more often found in men than in women. The principle is clear: some people cannot tell certain colours apart, and screen readers do not convey colour at all.

So never use colour as the only way to communicate something. Examples and fixes:

• Error messages in forms. If a field turns red on error, also add an icon and text such as “Enter a valid email address”.
• Links in body text. If links are only a different colour from the surrounding text, add an underline or another non-colour cue.
• Charts and graphs. Use labels, patterns or direct data labels, not just a colour legend.
• Status indicators. “Green means open, red means closed” should be accompanied by the words “open” and “closed”.
• Product options. If a swatch indicates a colour choice, also name the colour in text.
• Calls to action. A bright button is fine, but the label should still say what it does. See also our advice on how to write a call to action.

A useful test is to view your design in greyscale. If anything important disappears, add another cue.

Readable design beyond contrast

Contrast is one part of readability. The rest is largely about making text comfortable to read.

• Size. Aim for body text that is comfortable on a phone without zooming. Sixteen pixels is a common minimum for web body text. Allow users to enlarge text without the layout breaking.
• Line length. Very long lines are tiring. Roughly 50 to 75 characters per line is a widely used guideline.
• Line spacing. A little extra space between lines helps, particularly for readers with dyslexia.
• Alignment. Left-aligned text is generally easier to read than fully justified text, which can create uneven gaps. Centre alignment works for short headings, not long paragraphs.
• Fonts. Choose clear, familiar typefaces. Highly decorative or very thin fonts are harder to read at small sizes.
• Spacing and whitespace. Give elements room. Cramped layouts are hard to scan.
• Headings. Use real headings in order to chunk content, not just larger bold text.
• Motion. Avoid flashing content, and give users a way to stop moving or autoplaying elements.

These principles also support mobile optimization, since small screens and glare make readability problems obvious.

Dark mode and background images

Many people use dark mode or high-contrast settings. In email and web, test that your logo and graphics still work against a dark background. Logos with transparent backgrounds and dark text can vanish. When placing text over an image, add a solid or semi-opaque panel behind the text, or choose images with a consistently quiet area, rather than hoping the photo works.

A quick checklist

1. Check body text, headings, links and buttons against their backgrounds.
2. Confirm important text meets at least 4.5:1, or 3:1 for large text.
3. Check form field borders and icons reach 3:1.
4. View the design in greyscale.
5. Make sure links, errors and states have a non-colour cue.
6. Preview on a phone outdoors or at low brightness if you can.

Contrast checkers are a good guide but not a full judgement. A passing ratio on thin, tiny text may still be hard to read, so use your own eyes and ask others to look as well.