All guidesDesign Tips

Colour and Contrast for Infographics: A Practical Guide

The 60-30-10 proportion, what colour can and cannot carry on its own, the contrast ratios worth checking, and designing for colour-blind readers — with an honest note about which of this a tool will do for you.

Infographic Generator AIMay 02, 20268 min read

In short

  • Contrast is the one thing on this page worth actually measuring: 4.5:1 for body text and 3:1 for large text are the WCAG AA thresholds.
  • Nothing in this product checks contrast for you. A brand kit applies your colours faithfully, including unreadable ones.
  • Never let colour be the only thing carrying a distinction — add a shape, a label or a direction as well.
  • The 60-30-10 split is a useful starting proportion, not a rule, and it is about restraint rather than about those particular numbers.

The 60-30-10 split, three ways

Sixty per cent ground, thirty per cent for type and structure, ten per cent for the one thing you want looked at.

Dominant
60%
#FFFFFF
Secondary
30%
#1E293B
Accent
10%
#EAB308

Contrast is aimed for, not certified

The generator is instructed to keep every piece of text readable against what sits behind it, working to WCAG AA as a target. Nothing here measures a contrast ratio or certifies a result, so check the palette yourself if you have a compliance requirement to meet.

1. What a tool will and will not do for you

Worth establishing before the advice, because this genre routinely blurs it. Saving a brand kit means your colours, typeface and logo are applied to everything you make afterwards, which removes the hex-code fiddling. It does not evaluate the result. There is no contrast checker here, no alt-text field, and nothing that measures or certifies accessibility — so if your brand accent is a pale yellow, every sheet will faithfully render text nobody can read. Everything below is a check you make, not a feature you switch on.

2. The 60-30-10 proportion

A common failure is using too many colours at equal weight, which leaves a reader with no idea where to look. A workable starting split is roughly 60% of the sheet in a neutral ground, 30% in a structural colour for cards and headers, and 10% in a single accent reserved for the figure that matters. The specific numbers are not sacred; the discipline is. One accent, used once, is what makes a number look important — the same accent used nine times makes nothing look important.

3. Contrast ratios, and why this is the part to measure

The Web Content Accessibility Guidelines set 4.5:1 as the minimum contrast between body text and its background at AA, and 3:1 for large text — roughly 24px, or 19px bold. These are worth knowing because they are the one part of visual design with an actual number attached, and because a sheet is often read on a phone in bright light, where a combination that looked fine on your monitor disappears. Any free contrast checker will give you the ratio from two hex values in a few seconds. Do it before publishing, not after somebody tells you.

4. Colour cannot be the only signal

Around one in twelve men and one in two hundred women have some form of colour vision deficiency, most often affecting red and green — which are, unhelpfully, the two colours everyone reaches for to mean bad and good. Never let colour alone carry the distinction. Add an arrow, a plus or minus, a distinct line style, a direct label on the mark. This is worth doing even for readers with full colour vision, because it also survives being printed in greyscale, photocopied, or screenshotted at low quality.

5. Colour associations are real, and weaker than usually claimed

Blue reads as institutional and steady, green as growth or health, red as warning or loss, at least to readers used to Western business conventions. That is worth knowing and worth using, and it is a much smaller effect than colour-psychology articles suggest — nobody trusts a report because it was set in navy. Choose colours that do not fight the content, then stop thinking about it and spend the time on what the sheet actually says.

6. A practical order to work in

Pick a neutral ground first, light unless there is a reason. Choose one accent, and check it against that ground with a contrast tool. Give every other element a greyscale value, so the sheet still reads with all colour removed — if it does not, the layout is relying on colour to do structural work. Then add the accent back in one place. A sheet that works in greyscale works everywhere; one that only works in colour is one bad projector away from being useless.

Save the palette once

Your colours, typeface and mark applied to everything composed after. Checking the contrast is still yours.

Set up a brand kit free

All guidesEvery tool and guide on one page