Infographics and Charts That Read in Five Seconds

Most readers give a chart about five seconds. In that time they read the headline, glance at the shape, and either get the point or scroll past. A good chart is built for those five seconds. Everything else on it is there so a skeptic can check your work afterward.

One chart, one message

Before you open any software, write the finding as a sentence. "Road repair spending fell by half in five years." "The library now costs each resident $31 a year." "Water rates here are higher than in four of the five nearest towns."

That sentence becomes the chart's headline. A label like "Road Repair Spending, FY2022 to FY2026" tells the reader nothing about what happened. The descriptive title can sit underneath as a smaller subtitle. The headline tells the reader what to see. Then the chart proves it.

If you cannot write the sentence, you are not ready to make the chart. And if you have two findings, make two charts. A chart that tries to show spending, staffing and population growth at once shows nothing in five seconds.

Pick the plain chart type

Fancy charts slow readers down. These cover nearly every civic story:

Horizontal bars are underrated. The labels read left to right like normal text, they fit long names like "Parks and Recreation," and they work at phone width.

Honest axes

This is where charts lie, sometimes by accident.

Picture two bars: $1,000,000 and $1,050,000. Start the axis at zero and they look almost the same, which is true: a 5 percent difference. Start it at $950,000 and the second bar looks twice as tall as the first. Same numbers, false picture.

Line charts are different. A line is read by its slope, so a line chart can start above zero when the change you are showing is real but small relative to the total (a temperature, an enrollment count that moves between 4,100 and 4,300). Label the axis clearly so nobody thinks it starts at zero.

Other habits that keep you honest:

• Use the same scale when you put two charts side by side. Otherwise a reader compares heights that mean different things.
• Do not cherry-pick the window. Starting a trend in the one unusual year makes any change look dramatic. If you picked a start year for a reason (a new law took effect), say so in the subtitle.
• Adjust for inflation or population when the comparison needs it, and label the chart "in 2026 dollars" or "per resident." A budget that grew 12 percent in five years may have shrunk in real terms.
• Show gaps. If a year of data is missing, leave a visible gap. Do not draw a smooth line across it.

The source line

Every chart gets a source line in small type at the bottom. It names who produced the data, which document or dataset, and the period. It is how a reader checks you, and it is a big part of why anyone trusts a chart from an independent writer.

If you calculated something (a per-resident figure, a percent change), add "Analysis by" with your name, and explain the math in the article or a linked note.

Cut everything that does not carry data

Then take things off. Remove heavy gridlines or make them faint. Remove the border around the chart. Remove the legend by labeling bars and lines directly. Remove decimal places nobody needs ($1.2 million reads faster than $1,203,442.17). Remove shadows, gradients and 3D effects entirely.

What stays: the headline, the subtitle, the data, direct labels, the axis labels that matter, the source line, and your attribution line.

Color: accessible and meaningful

Use color to point at something. A good default: every bar in a calm gray except the one the headline is about, which gets your accent color. The eye goes straight to it.

Two accessibility rules:

1. Text needs contrast. WCAG 2.2 success criterion 1.4.3 sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The W3C defines large text as at least 18 point, or 14 point bold. Chart labels are usually small, so aim for 4.5:1 or better. Light gray text on white usually fails.
2. Color is never the only signal. Red-green color blindness is common. If "over budget" is red and "under budget" is green, also label them, or use position, or use a pattern. A chart should still make sense printed in black and white.

ColorPicker Studio helps you choose colors and check them for accessibility before they go into a chart. Pick your accent and your gray, then check each text color against its background. Save the set and reuse it so all your charts look like they came from the same place.

Size for where it will live

Design at the size readers will see. A chart that looks fine on your 27-inch monitor turns to dust on a phone. Check it at about 400 pixels wide. If the labels are unreadable, use fewer bars, shorter labels or a vertical layout. For social posts, a square or vertical version may need its own layout.

And because a chart is a complex image, give it short alt text with the finding, and put the full numbers in a table or text on the page.