Guidelines for creating clear and consistent images, with an emphasis on accessibile colour choices.
Note: this document is a work in progress.
(Expect it to change.)
Guiding principles
- Make images that are so simple, you could draw them on a blackboard
- Start with black and white
- Vary your line thickness, so that you don’t need colour to tell which parts are most important
- Whenever you can, put text in captions, not in images
- Focus on one idea per image
Colour
Main colours
For lines: use black, pink, then blue.
For filled areas: use blue at 75% opacity, blue at 50% opacity, or grey.
#000000 |
#DDDDDD |
#FF88CC |
#FFC3E5 (≈ 50%) |
#0088CC |
#BFD8EF (≈ 50%) |
Additional colours
If the main colours are insufficient, use orange ( #EE7733
) and, if necessary, green ( #009988
).
Note: using these colours will diminish the clarity and accessibility of your image.
Colours for multiple filled shapes
When there are several adjacent areas to colour (like on a map), use colours from either of these gradients:
#6B1242 |
#12426B |
#B3427E |
#427EB3 |
#DF7FB2 |
#7FB2DF |
#F5BCDB |
#BCDBF5 |
#FDECF5 |
#ECF5FD |
(These gradients were created with gradstop.js; see “How to avoid equidistant HSV colors” by Gregor Aisch for relevant colour theory.)
Function plots
- Use black for the first plot
- Use pink for the second
- Use blue for the third
Highlighted sections of plots
- Use 3 pt pink for the highlighted part
- Use 2 pt black for the rest
Tangents
- Use 0.75 pt pink for tangents
- If you are showing a the process of approximation, use light pink for additional tangents
Note: all function and tangent lines should continue right to the edge of the graph.
Shading
- Use grey for primary shading
- Use blue at 50% opacity for additional shading
Structure
Line weights
Function plots | 2 pt |
Highlighted sections of plots | 3 pt |
Shapes | 0.75 pt |
Tangents | 0.5 pt |
Angle arcs & right-angle squares | 0.5 pt |
Brackets and arrows | 0.25 pt |
Axes
- Use a 0.5pt black line for the axes
- Place axis labels in-line with the axis (not beside them)
Tick marks
Guide lines
- Use a 0.5pt black dotted line (2 pt spacing)
- Note: guides indicating unbounded lines should continue to the edge of the graph.
Annotations
- Use 10pt TeX Gyre Pagella for equations
- Use lower case, except for proper nouns
- Note: give the equation for the primary function in the figure caption—don't include it in the image.
Indicating points
- Use a 4pt circle to indicate a point
- Use black for points on black lines or not on lines
- For points on coloured lines, match the colour of the line
- To exclude a point from a line, use a white circle with a 1pt stroke
- For a point on a highlighted (3 pt) plot, use a 5 pt circle
- Note: aim to indicate only points that require captions and points that must be excluded from the plotted function.
Call-out arrows
- Use a small and simple arrowhead
- Use sharp corners
- Leave a gap between the tip of the arrow and the target point
- Align the butt of the arrow with the middle of the annotation
- Note: use arrows only when it is not possible to place an annotation near enough to a point.
Measurement arrows
Use lines with arrows to show curved measurements, and other measurements for which brackets are not appropriate
Measurement brackets
- Use a straight line with two 3 pt long arms connected to it at right angles
- Leave a small gap between the arms of adjacent brackets
Illustrations
Pictorial illustrations
Note: the
Noun Project can be a good source for Creative Commons licensed illustrations.
To do
- Plots with 3 axes
- outlines for 3D volumes
- colours for vectors
- colours for planes
- ‘See also’/‘resources’ section
See Also
Basics
These are both great introductions to the topic of colour accessibility for technical documents:
These are also good:
Contrast
Gradients
Other colour palettes
Tools
-
Simulating colourblindness
-
Making gradients, choosing colours
- Checking contrast
- tota11y from Khan Academy can check contrast on any site you visit (online)
- Accessible Colours can test specific colour pairs (online
- Colour contrast check can test specific colour pairs (online)
- Colorable is a more sophisticated colour distance tester by jxnblock (aka Brent Jackson); requires node.js, npm (desktop, open source)