Accessible chart colors and labels for data visualization
Make charts accessible by using color as a supporting cue rather than the only cue. Select perceptually distinct, color-vision-safe palettes; add direct labels, shapes, line styles, or position; maintain sufficient contrast; use ordered luminance for sequential data; test grayscale and common color-vision simulations; and provide text summaries and data tables for information that color alone cannot communicate.
Where errors enter the process
A chart can look polished on its creator's monitor yet become unreadable for color-blind readers, low-contrast displays, grayscale PDFs, projectors, or small mobile screens.
A method you can follow
- Classify the color task: Choose categorical, sequential, diverging, or highlight use; do not mix roles in one palette.
- Add redundant encoding: Use direct labels, symbols, line styles, or spatial grouping alongside color.
- Check contrast and context: Test labels, gridlines, hover states, focus states, and backgrounds at final size.
- Test alternate perception: Review color-vision simulations, grayscale, print, mobile, and static PDF output.
From the field · Public-sector reporting designer
Make a public school board chart readable in grayscale and on mobile
A chart uses red, green, and purple lines with a distant legend. In a printed board pack, grayscale copy, projector view, or screen reader context, the categories become difficult or impossible to distinguish.
Columns used in the example
month · school · attendance_rate · target_rate · student_count
Follow it with your own file
- Use direct labels and line style or markers in addition to color.
- Choose sufficient contrast for text, marks, gridlines, and focus states.
- Write a concise text equivalent that conveys the chart's main evidence and caveats.
- Test keyboard order, zoom, mobile reflow, and grayscale output.
Check: A reader should identify every series and the central result when color is removed. Check contrast with an automated tool and inspect actual exports, not only the browser view.
The essential checks
- Do not encode status only with red and green.
- Direct labels reduce legend and color dependence.
- Sequential palettes need ordered lightness.
- Test the exported artifact, not only the editor.
Color roles should match data roles
Categorical palettes separate unordered groups. Sequential palettes move from light to dark for magnitude. Diverging palettes emphasize movement around a meaningful midpoint.
Using a rainbow for ordered values creates false boundaries and uneven visual emphasis.
Labels carry meaning across formats
Direct labels survive screenshots and reduce eye travel. Shape and line style help distinguish series when hues converge.
A short text takeaway and accessible data table serve readers who cannot interpret the visual at all.
Sign-off questions
- Palette matches data type
- Color not sole cue
- Contrast sufficient
- Direct labels used
- Grayscale tested
- Text alternative present
Evidence worth tracing
- Two series differ only by red and green.
- Thin pastel lines sit on a dark background.
- A legend requires remembering many colors.
- Meaning disappears in grayscale.
Palette types and uses
| Palette | Use | Example |
|---|---|---|
| Categorical | Distinct unordered groups | Regions |
| Sequential | Low-to-high magnitude | Retention rate |
| Diverging | Values around midpoint | Variance from target |
| Highlight | One focus plus context | Selected product |
Doing these steps in Prepyr
Upload a CSV working copy in Prepyr. Describe the result you need: Design chart colors and labels that remain understandable without color alone. Check the columns selected, preview any proposed changes, and compare the output with the source before applying or exporting it.
Prepyr steps used here: Chart themes · Direct labels · PDF export · HTML reports
A chart whose categories, direction, and key finding remain understandable across visual abilities, devices, and export formats.
Questions readers usually ask next
Is red and green always inaccessible?
It is risky when color is the only cue. Add labels, symbols, or lightness differences and test the exact shades.
How many categorical colors should I use?
Keep the set small enough to distinguish reliably; use grouping, highlighting, or small multiples for many categories.
Do charts need alt text?
Important charts need a concise text description of purpose, main pattern, and material exceptions, with underlying data available when appropriate.