Making a diagram readable for everyone

A diagram that fails for some readers usually fails quietly: nobody says they could not read it, they just get less out of it than you intended. Most of the fixes are quick and make the diagram clearer for everyone.

Never let colour be the only signal

This is the big one. If green means approved and red means rejected, and that is the only difference between two boxes, roughly one in twelve men and one in two hundred women will not reliably see the distinction.

The fix is not to stop using colour. It is to always pair it with something else:

• Put the word in the box. “Approved” and “Rejected” are unambiguous in any palette.
• Use different shapes as well as different colours.
• Use a dashed outline for one and a solid outline for the other.

Colour should reinforce meaning, never carry it alone.

Check the contrast

Text on a coloured shape needs enough contrast against that shape. WCAG asks for a ratio of 4.5:1 for normal text and 3:1 for text at 18pt or above.

In practice: dark text on a pale fill is almost always fine, and pale text on a mid-tone fill almost never is. White text on a light blue looks acceptable on a good monitor and disappears on a projector.

The templates here use dark text on pale fills for exactly this reason. If you change a fill to something darker, change the text colour too.

Make the text bigger than feels necessary

Diagram text is nearly always too small, because you are looking at it full-screen on a good monitor while you draw.

Rough guides: nothing below 12pt in anything that will be printed; nothing below 18pt in anything that will be projected. If a label does not fit at that size, the shape should be bigger or the label should be shorter.

Give it a title and a caption

A diagram embedded in a page or a document should have a heading above it and a short caption explaining what it shows. This helps everybody skim, and it gives anybody using a screen reader something to work with.

Alt text that actually says something

“Flowchart” is useless. Alt text should convey what the diagram says, not what kind of picture it is.

For a simple diagram, describe the path: “Flowchart: an order is received, stock is picked, the box is packed, then inspected. If it passes it is dispatched; if not it is repacked and inspected again.”

For a complex one, write a short summary in the alt text and put the full description in the surrounding text, where everybody benefits from it. A diagram that needs three hundred words of alt text is usually a diagram that needs a paragraph of explanation next to it anyway.

The SVG export includes the diagram’s title, so give your diagram a real title rather than leaving it as “Untitled diagram”.

Check it in greyscale

Print it in black and white, or take a screenshot and desaturate it. Anything that becomes ambiguous was relying on colour alone.

This takes ten seconds and catches most colour problems at once.

Do not put meaning only in position

“The items on the left are current, the ones on the right are planned” is invisible to anyone reading the diagram linearly rather than spatially. Label the groups: put a container round each with a heading.

Keep the reading order sensible

A diagram read top to bottom or left to right is easier for everybody. Where the flow has to double back, an explicit arrow makes it followable; an implied jump does not.

Print, and look at it

Half of these problems are obvious on paper and invisible on screen: text too small, colours too close, a shape that ran off the edge. Export a PDF and look at it at actual size before you send it anywhere.