Colour in charts

Categorical palettes

Use categorical colour when the data series represent distinct, unordered groups — different organisations, survey waves, response themes, or demographic segments. Each series gets one ramp colour. The order is fixed: it is not aesthetic preference, it is a deliberate sequence designed to maximise perceptual distinctiveness and minimise colour-blindness conflicts.

The six-step categorical sequence

Why this selection?

This is the mathematically optimal 6-colour combination from the Orbit token system — found by testing all possible step combinations across the six available hue families. Every entry passes WCAG 3:1 contrast against the chart background. Green leads using green-700 (dark olive, #566620) rather than the brand lime (green-400) because the lighter step fails 3:1. The sequence alternates warm and cool hues to maximise perceptual distinctiveness between adjacent entries. Red is excluded — it conflicts with green for red-green colour blind users and is reserved for error states.

Important limitation: no combination of 6 colours from the Orbit primitive token system achieves full grayscale distinctiveness between all pairs — the token system was designed for UI contrast (colour vs background), not data visualisation contrast (colour vs colour). This palette relies primarily on hue as the differentiator. Direct labels or distinct shapes are always required.

Contrast against light chart backgrounds

WCAG 1.4.11 (Non-text Contrast) requires 3:1 for graphical elements that convey information. All six entries in this palette pass that threshold.

All six entries pass 3:1 individually. However, the palette relies on hue as the primary differentiator between series — not luminance. Some pairs have similar brightness and will be hard to distinguish for users who cannot perceive colour differences. Direct labels on every series are always required. Distinct marker shapes are required for line and scatter charts.

What about more than 6 series?

If your chart genuinely requires more than 6 distinct categorical series, the chart is probably doing too much. Consider:

• Grouping minor categories into an “Other” series
• Breaking the chart into two or more smaller charts with a common axis
• Switching to a table, which handles many categories more cleanly than a chart
• Using a small-multiples layout instead of overlapping all series on one chart

If you’ve considered all alternatives and genuinely need more than 6, raise the case with the Design System Guild — don’t improvise colours outside the system.

Sequential palettes

Sequential palettes encode ordered, quantitative data — participation rates, response counts, density, magnitude. Use a single ramp stepping from a light step to a dark step. The reader should be able to read “lighter = less, darker = more” without needing to check the legend.

Sequential palettes are most commonly used in:

• Choropleth maps where regions are shaded by a single metric
• Heatmaps showing intensity across two dimensions
• Single-metric bar charts where the bars are shaded by value rather than by category

Recommended sequential palettes

Sequential accessibility note

Sequential palettes are generally more accessible than categorical ones for colour-blind readers, because the encoding is lightness rather than hue. However, step ranges that are too compressed (e.g. steps 300–500 only) may not provide enough perceptual difference. Always test across the full intended data range before publishing. Use at least 5 distinct lightness steps for any sequential scale with more than 4 data buckets.

Diverging palettes

Diverging palettes are for data with a meaningful midpoint — a value where “neither direction” is the reference, and the two directions carry distinct meaning. Common uses in engagement work:

• Sentiment: support/oppose, agree/disagree, positive/negative
• Change from baseline: above/below target, gain/loss
• Likert scale responses: from “strongly disagree” to “strongly agree”

The Open Point diverging palette runs from teal (positive or agreeing extreme) through a neutral midpoint to red (negative or opposing extreme).

Teal → Neutral → Red diverging palette

Why teal rather than green for diverging?

Green is the brand primary colour, which means readers associate it with “Open Point” and with “correct” or “positive” UI states. Using green as the diverging positive extreme is tempting — but it creates two problems.

First, in a diverging chart showing support/oppose sentiment, pairing green (positive) against red (negative) produces a palette that is almost completely unreadable for people with red-green colour vision deficiency. Teal and red are significantly more distinguishable for deuteranopic and protanopic readers because teal contains a strong blue component that red does not.

Second, the brand green (#BACE42) is a mid-range value that does not darken well into a “very positive” extreme while remaining perceptually consistent with the teal–red axis. Teal has a deeper dark step (teal-700) that works better as a “strongly agree” endpoint.

Use green in diverging charts only if the data is explicitly about Open Point brand health, where the brand association is intentional and appropriate.

Number of steps to use

Colour blindness and the categorical palette

Red-green colour vision deficiency — collectively, deuteranopia and protanopia — affects approximately 8% of men and 0.5% of women. In a population of 1,000 people, that is roughly 40–50 people who cannot reliably distinguish red from green. For a government consultation platform that may reach tens of thousands of residents, this is not a minor edge case.

The categorical palette is specifically ordered to prevent red and green from being adjacent. Green is position 1; red is position 6. In practice, this means:

• In a 2-series chart, you have green and teal — no red in view at all.
• In a 3-series chart, you have green, teal, and blue — still no red.
• Red only appears when there are 6 series, at which point it is surrounded by orange (position 5) and is not adjacent to green (position 1 in the legend, visually separated in the chart).

This is why the sequence is not optional. If you reorder the palette to put red and green next to each other — even if it “looks better” visually — you will produce a chart that is inaccessible for approximately 1 in 12 male readers.

Testing your charts for colour blindness

Before publishing any chart with 3 or more colour series, simulate it in:

• Deuteranopia simulation (loss of green cone sensitivity) — the most common form
• Protanopia simulation (loss of red cone sensitivity)
• Greyscale — confirms the chart works in print and for all colour vision types

macOS Accessibility Inspector and browser devtools (Chrome’s “Emulate vision deficiencies” in the Rendering panel) can do this without additional tooling. Figma’s “Colour Blind” plugin is useful during design review.

Accessibility requirements

WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast, Level AA) requires that graphical objects — including chart bars, line segments, data points, and filled regions — achieve a contrast ratio of at least 3:1 against adjacent colours or backgrounds.

This means:

Note that data labels are text, so they are subject to the stricter 4.5:1 text contrast requirement (WCAG 1.4.3), not the 3:1 non-text requirement.

Token quick reference

The table below summarises the recommended token for each chart colour role. These are the values to reach for first — before considering any other step in the ramp.