Accessible colour and contrast in infographics

Colour is the first thing people notice on an infographic and, too often, the first thing that lets readers down. Pale grey labels on white, red and green bars that look identical to some readers, a lovely pastel palette that vanishes on a projector. None of these are rare, and all of them are easy to fix once you know what to look for.

Accessible colour isn’t a separate style. It’s simply colour that works for more people, on more screens, in more light. Pages designed this way tend to look cleaner for everyone.

Contrast comes first

Contrast is the difference in lightness between text (or a shape) and whatever sits behind it. It matters more than the colours themselves.

The Web Content Accessibility Guidelines (WCAG), widely used as a reference, ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. For meaningful graphics, such as chart bars and icons that carry information, they ask for at least 3:1 against neighbouring colours. Free contrast checkers will give you the ratio for any two colours in seconds.

In practice:

• Body text and labels: dark on light, or light on dark. Mid-grey on light grey rarely passes.
• Text on coloured blocks: check each pairing. White on a deep blue usually works; white on yellow usually doesn’t.
• Thin lines and small icons: these need more contrast than you’d think, because there’s so little of them to see.
• Text over photos: place a solid or semi-solid panel behind the text rather than hoping the image is dark enough everywhere.

Never let colour carry meaning alone

Some readers see certain colours differently, most commonly finding reds and greens hard to tell apart. Others will see your infographic printed in black and white, or on a screen with odd colour settings. If a chart’s meaning depends only on hue, those readers lose it.

Give every colour-coded element a second signal:

Instead of only…	Add…
A red bar for “below target”	A label: “Below target”
A legend with coloured dots	Direct labels on each line or slice
Green and red ticks	Ticks and crosses, with different shapes
Two coloured map regions	A pattern or a label on each region

Direct labelling is the single most useful habit here. When the name of each series sits right beside its line or bar, nobody needs to match colours to a legend at all.

Build a palette that stays distinct

A good infographic palette is small. For most pages, you need:

• One or two neutrals for text, backgrounds and secondary shapes.
• One accent for the thing that matters most.
• A short set of category colours, if your charts compare groups. Three to five is plenty.

When choosing category colours, vary their lightness, not just their hue. A dark blue, a medium orange and a light teal stay distinguishable even in greyscale. A medium blue, a medium red and a medium green may collapse into one grey.

Avoid placing red and green next to each other as a pair of opposites. If you need a “good versus bad” pairing, blue and orange is a common, safer choice, and labels should still say which is which.

Sequential and diverging colour

Some charts use colour to show amount rather than category, such as a map shaded by rainfall.

• Sequential palettes go from light to dark in one hue. Lighter means less, darker means more. Keep the steps evenly spaced in lightness so the reader can judge differences.
• Diverging palettes use two hues meeting at a neutral middle, for data with a meaningful centre, such as above and below average. Make the midpoint a true neutral, like a light grey, and keep the two ends equally strong.

Five to seven steps is usually enough. More than that and neighbouring shades become hard to tell apart.

Test like your readers see it

Before you finish, run these quick tests:

1. Greyscale. Convert a copy to black and white. Can you still tell every category apart? Is every label readable?
2. Colour-blindness simulation. Many design tools and browser extensions can preview common types of colour vision deficiency. Look for pairs that merge.
3. Small screen, low brightness. Open it on a phone with the brightness turned down. Pale colours are usually the first to disappear.
4. Print. If it might be printed, print a draft on an ordinary office printer. Colours often come out darker and duller than on screen.

Fix any pairing that fails by changing lightness first, then adding labels or patterns.

Words that help colour do its job

Accessible design isn’t only visual. A few small writing habits support it:

• Put the main finding in the title, so the point doesn’t rely on spotting a coloured bar.
• Write short alt text for digital versions, naming the key figures.
• Keep legend labels plain: “2025” and “2026”, not “Series 1” and “Series 2”.

If your infographic is headed for social feeds, the shapes and sizes in infographic sizes for social media pair well with these colour checks, since small screens punish weak contrast first.

A palette checklist

Before you call the colours done:

• Every text and background pairing passes a contrast check.
• No chart relies on colour alone to carry meaning.
• Category colours differ in lightness as well as hue.
• Red and green are not used as the only signal for good and bad.
• The page still reads in greyscale.

Clear colour makes numbers friendlier for everyone. For where colour fits in the wider design process, see how to make an infographic.