Colorblind-Safe Color Palettes for Designers

A practical guide to selecting and using color palettes that remain distinguishable for users with any type of color vision deficiency. Includes ready-to-use palettes, selection principles, and tools for validating your choices.

Why Standard Palettes Fail for Colorblind Users

Most default color palettes in design tools and charting libraries are chosen for aesthetic appeal rather than perceptual distinguishability. The classic red-yellow-green traffic light palette, for example, is unusable for roughly 8% of male users. Highly saturated hues that appear vivid and distinct to typical vision can collapse into nearly identical muddy tones for someone with protanopia or deuteranopia. Understanding why these palettes fail is the first step toward choosing better alternatives that serve all users without sacrificing visual quality.

The Wong Palette

The Wong palette, published by Bang Wong in Nature Methods, is one of the most widely recommended colorblind-safe palettes for categorical data. It consists of eight colors: black (#000000), orange (#E69F00), sky blue (#56B4E9), bluish green (#009E73), yellow (#F0E442), blue (#0072B2), vermillion (#D55E00), and reddish purple (#CC79A7). These colors were specifically selected to remain distinguishable under all three major types of color vision deficiency. The palette is ideal for scientific figures, charts, and any interface requiring up to eight distinct categorical colors.

Viridis and Other Sequential Palettes

Viridis is a perceptually uniform, colorblind-safe sequential palette that transitions from dark purple through blue, green, and into bright yellow. Originally designed for Matplotlib, it has been adopted across many visualization platforms. Its perceptual uniformity means that equal steps in data value produce equal steps in perceived color change, making it excellent for heatmaps and continuous data. Other strong sequential options include Inferno, Plasma, and Cividis, which was specifically designed for deuteranopia and protanopia. For diverging data, the blue-to-red palette via white or the cork palette from scientific visualization libraries work well.

Blue-Orange: The Universal Contrasting Pair

When you need just two contrasting colors, blue and orange is the most universally safe combination. This pair maintains high contrast across protanopia, deuteranopia, and tritanopia, as well as typical vision. The reason is that blue and orange occupy opposite regions of the color space that remain distinct even when red-green or blue-yellow perception is compromised. Use this pair for binary categories, toggle states, before/after comparisons, and any two-class visualization. Variations in lightness can extend this to four or more distinguishable shades.

Building Your Own Accessible Palette

When pre-built palettes do not fit your brand or use case, you can construct your own accessible palette using a systematic approach. Start by selecting colors that vary in both hue and lightness, not just hue alone. Ensure that every pair of colors in your palette has a lightness difference of at least 30 units in the CIELAB color space. Test every combination using a CVD simulator like Color Oracle or the Coblis tool. Limit your palette to six or fewer categorical colors when possible, as distinguishability decreases as more colors are added. Document the palette with hex values and usage guidelines for your team.

Tools for Validating Color Palettes

Several tools help you evaluate whether your palette is colorblind-safe before you ship. Coblis (Color Blindness Simulator) lets you upload images and view them through different CVD filters. Chroma.js and d3-color provide programmatic tools for checking perceptual distance between colors. ColorBrewer, originally designed for cartography, offers palettes classified by their suitability for colorblind users. Viz Palette by Elijah Meeks lets you test palettes interactively against simulated CVD conditions and provides warnings when colors are too similar. Integrate these checks early in your design process to avoid late-stage revisions.

Applying Accessible Palettes in Practice

Having a good palette is only half the battle; applying it correctly matters just as much. Assign your most visually distinct colors to the most important data categories or UI states. Avoid using your full palette in a single chart or view when fewer colors would suffice. Pair colors with secondary encodings like patterns, shapes, or labels so that color is reinforcing rather than carrying the information alone. When your palette must extend beyond six colors, consider grouping related categories under a shared hue family with variations in lightness, supplemented by patterns or icons to maintain differentiation.

Tips

  • Keep the Wong palette hex values saved in your design tool's color library so they are always one click away when building charts or categorical indicators.
  • When choosing between two similar hues, always prefer the option with greater lightness contrast. Lightness differences remain visible even when hue perception is reduced.
  • Use Viridis or Cividis as your default sequential colormap for heatmaps and continuous data. They outperform rainbow palettes in both accessibility and perceptual accuracy.
  • Limit categorical palettes to six or fewer colors. Beyond six, even well-chosen hues become difficult to distinguish at small sizes or on low-quality displays.
  • Always test your palette at the size it will actually appear. Colors that look distinct in a large swatch may become indistinguishable in a 12px chart legend.

Frequently Asked Questions

Can I use a colorblind-safe palette and still match my brand colors?

Yes. You can integrate brand colors by using them for non-data elements such as headers, backgrounds, and borders while reserving the accessible palette for data-carrying elements like charts, status indicators, and alerts. Alternatively, you can adjust your brand colors slightly in hue or lightness to fit within an accessible palette. Most brand guidelines allow for functional variants as long as the core identity is preserved. Document the accessible variants alongside your brand colors so the team knows when to use each.

How many colors can a colorblind-safe palette reliably support?

For categorical data, most experts recommend a maximum of six to eight distinct colors in a colorblind-safe palette. The Wong palette supports eight, but at that count, some colors are only distinguishable with careful selection and adequate sizing. For practical use in UI design, four to six colors is safer. If you need more categories, consider using a combination of color and shape, grouping categories hierarchically, or providing interactive filtering so users do not need to distinguish all categories simultaneously.

Is the rainbow (jet) colormap ever acceptable?

The rainbow colormap is generally discouraged for three reasons: it is not perceptually uniform (equal data steps produce unequal color steps), it creates artificial visual boundaries at certain hues, and it is inaccessible to colorblind users. The Viridis, Inferno, and Cividis colormaps are superior alternatives for sequential data, as they are perceptually uniform and colorblind-safe. If you are working with legacy systems that default to rainbow, prioritize switching to an accessible alternative for any new work.