Choose Chart Colors by the Question and the Data
Distinguish categorical, ordered and diverging palettes, and keep chart meaning available through labels and data.
Updated : Rebuilt around explicit design choices, reproducible examples and documented limitations; retained the existing URL.
Start with what the reader must compare. Category names, ordered measurements and deviations around a meaningful midpoint need different encodings. The examples here describe a small chart design exercise; no palette can replace a truthful scale, clear labels or access to the underlying values.
Categories: preserve identity
For three product lines, assign a stable color to each line across every chart. Add direct labels and distinct markers such as circles, squares and triangles. Do not assign lighter shades in a way that suggests one category is inherently larger or better unless the data actually has that order.
Product A: #1D4ED8, solid line, circle marker
Product B: #B45309, dashed line, square marker
Product C: #7E22CE, dotted line, triangle markerOrdered values: show the sequence
For a heatmap of counts, use a clearly ordered lightness progression and label the numeric range. Include a separate treatment for missing data; zero is a value, while missing is unknown. Inspect whether the legend remains understandable when printed without color.
Diverging values: define the center
A temperature deviation chart can place zero at a neutral midpoint with two directions on either side. A chart of strictly positive revenue has no automatic reason to diverge around the middle of its range. State the baseline in the title or legend so color does not create an unsupported story.
Check essential marks and reading text
A reproducible text and background example.
Same pair, larger text.
##1D4ED8 / ##FFFFFF
Blue series mark against a white chart surface; also inspect its actual line width.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##B45309 / ##FFFFFF
Amber series mark against the same surface.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixThese are background checks, not proof that the two series are distinguishable from one another. Inspect overlaps, line widths, labels and markers. W3C guidance on complex images also calls for conveying the important data and relationships through appropriate text alternatives or accompanying content.
Publish the values as well
Open the categorical example in Studio and inspect its pair matrix. In the final chart, include a caption describing the main comparison and a readable table or equivalent access to the values. Test navigation and tooltip access beyond a mouse pointer.