Color and type for infographics

Color and type decide whether a well-planned infographic gets read. The short version: use one neutral color for most things, one accent for what matters, two typefaces at most, and sizes that still work on a phone. Everything below explains how to apply that without the piece looking dull.

Start in grayscale

Design the first full draft in black, white and grays. It forces the hierarchy to come from size, weight and position instead of color, and those are the cues that survive printing in black and white, screenshots and color vision deficiency. When the grayscale version reads well, add color to point at the message.

A small palette

Most strong infographics use fewer colors than you'd expect:

1. A dark neutral for text and key marks.
2. One or two light neutrals for backgrounds, gridlines and secondary data.
3. One accent color for the thing the reader should look at.
4. Optionally, a second accent for a contrast ("this year" versus "last year").

The accent works because it is rare. When every bar is a different color, readers look for a meaning in the colors and don't find one. When one bar is orange and the rest are gray, nobody needs a legend to know where to look.

If the piece belongs to a brand, use the brand's accent for emphasis, not for every element. Brand palettes are often too saturated to use across a whole chart.

Match the palette to the data

Color in a chart has a job, and the job decides the palette:

• Categories with no order (countries, product lines) need distinct hues of similar strength, so none looks more important than another.
• Values from low to high (population density, temperature) need a sequential palette: one hue that runs from light to dark. Readers see darker as more.
• Values above and below a midpoint (change from last year, above or below average) need a diverging palette: two hues running out from a neutral middle.

A rainbow palette for a low-to-high scale is the classic mistake. Rainbow hues have no natural order, and yellow looks brighter than the blue beside it, so the eye invents boundaries that aren't in the data.

Keep color meanings fixed

Once a color means something, it should mean that everywhere in the piece. If "2024" is teal in the first chart, it is teal in every chart. If teal also means "Europe" in the next section, readers will connect things that aren't connected.

Avoid relying on red against green for good and bad. Red-green color vision deficiency is the most common type, and the two can look nearly the same to many readers. Pair color with a label, a sign (+ or −) or a position.

Contrast is a number

Text needs contrast with its background, and you can measure it. The Web Content Accessibility Guidelines ask for at least 4.5:1 for normal text and 3:1 for large text and for chart marks people need to see. Light gray text on white is the most common failure. Our contrast cheat sheet shows what those ratios look like with real samples, and the accessibility guide covers the rest.

Text placed over photos or gradients is where contrast fails unnoticed, because it passes in one spot and fails a few pixels away. Put a solid panel behind it.

Two typefaces at most

A typical infographic needs:

• A headline face with some character. A heavy grotesque, a condensed sans or a strong serif all work.
• A text face for body, labels and source lines. A clear sans serif with distinct numerals is the safe choice.

Many pieces use one family in several weights and look better for it. Adding a third or fourth typeface rarely adds meaning and usually makes the piece look assembled from parts.

Check the numbers specifically. Infographics are full of them, and some fonts have a 1 that looks like a 7 or old-style figures that dip below the baseline. Tabular (fixed-width) numerals help when figures sit in columns.

A type scale

Pick a few sizes and stick to them. For a vertical web infographic about 1,200 pixels wide, a workable starting point:

These numbers assume the image is shown at roughly half its size on a phone. Test at the size people will actually see. If the source line is unreadable on a phone at that point, it is too small.

For print, think in points: body text at 9 to 11 pt is normal in reports, but a poster read from a meter or two away needs much larger type.

Hierarchy without shouting

Readers should see three levels at most at a glance: the headline, the big numbers or main chart, and everything else. Ways to create that hierarchy, roughly from strongest to weakest:

1. Size.
2. Weight.
3. Color.
4. Position (top and left come first in left-to-right languages).
5. Space around an element.

All caps, underlines, outlines, shadows and italics are weaker and noisier. Use them for one thing each, if at all.

Check it on the real screen

Export at the final size and look at it on a phone and on a laptop. Print it in grayscale if it will ever be printed. Then fix whatever you had to squint at. The mistakes guide lists the problems we see most often at this stage.

Questions