Colour Contrast and Accessible Design

If people cannot read your text, nothing else about the design matters. Colour contrast, the difference in lightness between text and its background, is one of the simplest aspects of accessibility to get right and one of the most often ignored. Fashionable pale grey type, white text on bright brand colours and captions over photographs all cause problems for a large number of readers, not just those with a diagnosed sight condition.

This guide explains why contrast matters, what the commonly used standards say, and how to check and adjust your brand colours without losing their character.

Who low contrast affects

It is easy to think of accessibility as a niche concern. In practice, poor contrast affects a wide group of people:

• People with low vision, cataracts or other eye conditions.
• People with colour vision deficiency, which is relatively common, particularly among men.
• Older readers, as the eye's sensitivity to contrast tends to decline with age.
• Anyone reading on a phone in bright sunlight, on a cheap or dim screen, or on a poor-quality print.

Good contrast helps all of them, and it makes text quicker and more comfortable to read for everyone else too. It is rarely a trade-off between accessibility and good looks.

The standards in plain English

The most widely used benchmark is the Web Content Accessibility Guidelines (WCAG), published by the W3C. They express contrast as a ratio between two colours, from 1:1 (no difference, such as white on white) to 21:1 (black on white).

At the commonly targeted AA level, the key requirements are:

• Normal body text: a contrast ratio of at least 4.5:1.
• Large text: at least 3:1. "Large" means roughly 18 point and above, or about 14 point and above if bold.
• Interface elements and meaningful graphics: things such as form field borders, icons that convey information and the parts of a chart people need to understand should have at least 3:1 against their surroundings.

The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text. Many organisations aim for AA as a baseline, and public sector websites in the UK are expected to meet accessibility requirements based on WCAG. Even if no rule applies to you directly, these figures are a sensible, well-tested target.

Although WCAG was written for the web, the same thinking works for print, signage and presentations.

How to check your colours

You do not need to calculate ratios by hand. Free contrast checkers are widely available online and built into many design tools and browser developer tools. Enter the hex values of your text and background colours and the tool will tell you the ratio and whether it passes AA and AAA at normal and large sizes.

Check every combination you actually use, not just your main one. A typical brand might have:

• Body text on the main background.
• Links and buttons in the brand colour.
• White text on a coloured button or banner.
• Secondary text, such as captions, dates and placeholder text in forms.

Secondary text is where most sites fail. Light grey for dates and captions feels refined, but it is often well below 4.5:1.

When your brand colour does not pass

Many popular brand colours, particularly mid-tone oranges, yellows, light greens and turquoises, do not have enough contrast with white for body text. That does not mean you have to abandon them.

Use it where it is large or decorative

A colour that fails for small text may pass at 3:1 for large headings, or be perfectly fine for backgrounds, illustrations, borders and accents that do not carry essential information.

Add a darker or lighter working shade

Create a darker version of the brand colour for text and links on light backgrounds, and if needed a lighter one for use on dark backgrounds. Readers will still recognise the brand; they simply will not have to squint. Record these shades in your style guide alongside the main colour, as we recommend in our piece on brand identity on a small budget.

Swap the text colour

If white text on your brand colour fails, dark text on the same colour may pass comfortably. Bright yellow with black text is a classic example of a combination that is both striking and readable.

Do not rely on colour alone

Contrast is only half the picture. If colour is the only way information is conveyed, people with colour vision deficiency may miss it. Common examples include:

• Links within a paragraph that differ from the surrounding text only by colour. An underline solves this.
• Form errors shown only by turning a border red. Add a clear message and an icon.
• Charts where categories are distinguished only by hue. Label lines and segments directly, or use patterns and position as well. Our guide to infographics people actually read covers this in more detail.

Watch out for images and overlays

Text over photographs is a frequent problem because the background changes from one part of the image to the next. A headline that is readable over a dark sky may disappear where it crosses a white building. Placing a solid or semi-transparent dark panel behind the text, or choosing a calmer area of the image, keeps it consistently legible. Check the worst point, not the best.

Build it into the process

The cheapest time to fix contrast is when the palette is first chosen. Check combinations as part of any brand or website project, list approved pairings in your guidelines, and include a quick contrast check in your sign-off routine. Once it becomes habit, it takes minutes, and your work will be clearer for every reader.