PaletteGen
Theme

Choosing Colors for UI and Data Visualization

A brand palette has to look good. A UI or chart palette has to work for every viewer, which is a stricter bar.

By , PaletteGen

About 4 min read · Last reviewed

Short answer: Keep a categorical chart palette to six colors or fewer, separate categories by lightness as well as hue, and avoid red and green together. Blue and orange is the safest two-color pairing.

Interface and chart colors get evaluated differently than a logo or a poster. Nobody's judging whether your five-category bar chart is "beautiful," they're judging whether they can tell the categories apart at a glance, including if they have a color vision deficiency. That's a specific, checkable requirement, not a matter of taste, and it's worth treating separately from the general palette-picking advice elsewhere on this site.

How many categories a palette can actually hold

Guidance on this is fairly consistent: cap a categorical chart palette at six or fewer colors for reliable distinction, even among viewers without color vision deficiency. The Wong palette, an eight-color set purpose-built for accessibility (black, orange, sky blue, bluish green, yellow, blue, vermillion, reddish purple), stretches to eight, but it needs careful selection and reasonably large color areas to stay legible. If your chart needs more categories than that, the fix usually isn't more colors, it's grouping, small multiples, or direct labeling instead of relying on color alone.

The pairing to avoid, and the one to prefer

Red Yellow Green

The classic red/yellow/green traffic-light palette is one of the most commonly flagged failures in chart accessibility. Red-green color vision deficiency affects roughly 8% of men, and this exact combination is the textbook case where two of the three categories become hard to tell apart.

Blue Orange

Blue and orange, by contrast, is considered the most universally safe pairing for a two-category chart, holding up across all major types of color vision deficiency. For anything beyond two categories, add distinction in lightness too: aim for a clear gap in lightness between colors, not just a different hue at the same brightness.

Checking your palette before you ship it

Beyond picking a known-safe set of colors, it's worth verifying the specific palette you land on:

  • Simulate color vision deficiency directly. This site's generator includes a built-in color blindness simulator on every palette it produces, so you can check a candidate chart palette the same way you'd check any other palette here.
  • Never rely on color alone for meaning. Pair categories with patterns, direct labels, or icons wherever the chart type allows it, so the information survives even for a viewer who can't distinguish two of your colors.
  • Check text and label contrast separately. Category fill colors and label text contrast are different checks. Run any text-on-background combination through the contrast checker.

UI color roles versus data-viz color roles

A product UI palette (buttons, states, backgrounds) and a chart-category palette solve different problems, even though they often get built at the same time.

UI palettes and chart palettes compared
RoleProduct UI paletteChart palette
What it needsA small set of semantic colors (success, warning, error, info, primary action)Enough distinct categories for the data at hand
How stable it isStays consistent everywhereChanges per chart

If you're building both, this site's design tokens and light/dark theme generator cover the semantic UI-color side; use the categorical guidance above specifically for chart and graph work, since the two shouldn't be built from the same rules.

Frequently Asked Questions

How many colors can I use in a chart before it gets confusing?

Most guidance caps a categorical chart palette at six or fewer colors for reliable distinction, even for people without color vision deficiency. An eight-color palette (like the Wong palette) is possible with careful selection, but six is the safer default.

Is red and green really a problem for chart colors?

Yes. Red-green color vision deficiency affects roughly 8% of men, and a red/yellow/green traffic-light palette is one of the most commonly flagged accessibility failures in chart design. Blue and orange is a safer pairing for a two-category chart.

Does this site's contrast checker work for chart colors too?

It checks text-on-background contrast (WCAG), which matters for labels and legends. Distinguishing chart categories from each other is a related but separate problem, covered in this article, that also needs enough difference in lightness, not just hue.

Sources

  • The Wong palette and the six-or-fewer categorical guidanceWong, B. (2011), Points of view: Color blindness, Nature Methods 8:441, for the eight-color palette. The six-or-fewer limit is a common rule of thumb in chart-accessibility guidance, not one study's finding.
  • 8% prevalence figure for red-green color vision deficiency in men, and the blue/orange safe-pairing recommendationStandard, widely-cited figure in color-vision-deficiency accessibility guidance, not attributed to one single study.

About this page

The Wong palette comes from Bang Wong's 2011 Nature Methods column, linked in the sources. The six-or-fewer limit and the 8% red-green figure are common figures in chart-accessibility guidance, not one publisher's claim.