Colorblind-Friendly Color Palettes: 4 Proven Sets With Hex Codes

Roughly one in twelve men and one in two hundred women have some form of color vision deficiency. On a site with a few thousand visitors a day, that is hundreds of people who may not see your charts, tags and status colors the way you intended.

The good news is that you don't have to invent safe colors from scratch. Researchers and design teams have already published colorblind-friendly color palettes that hold up under the most common types of color blindness.

Below are four of the most trusted sets, each with hex codes you can copy and contrast notes for white and dark backgrounds, plus a simple way to test your own colors.

What colorblind-friendly actually means

Most color vision deficiency is red-green. People with protan or deutan types have weak or missing red or green cones, so reds, greens, oranges and browns can drift toward the same muddy yellow.

Deuteranomaly, a reduced sensitivity to green, is the most common form. Blue-yellow deficiency, called tritan, is much rarer, and complete color blindness is very rare.

A colorblind-friendly palette is one where the colors stay distinguishable under these conditions. That usually means pairing hues that differ in blue versus orange or yellow, and making sure the colors also differ in lightness, not just in hue.

Whether you call them colorblind-friendly palettes or, in British spelling, colour blind friendly colour schemes, the goal is the same: nobody should have to guess which line, bar or badge is which.

The classic failure is pure red next to pure green. Their contrast against each other is under 3:1 even for typical vision, and for someone with deuteranopia the two can look almost identical.

Palette 1: Okabe-Ito, the safe default

Masataka Okabe and Kei Ito proposed this set in their Color Universal Design guide in 2002, and Bang Wong brought it to a wide audience in a 2011 Nature Methods column. It has since become one of the most widely recommended palettes in scientific publishing.

Orange: #E69F00. Sky blue: #56B4E9. Bluish green: #009E73. Yellow: #F0E442. Blue: #0072B2. Vermillion: #D55E00. Reddish purple: #CC79A7. Black: #000000.

The eight colors were chosen so that every one stays distinct for people with protan and deutan vision. That makes this the safest pick when you need many categories, for example a line chart with six series.

Only blue (#0072B2) is dark enough for body text on white, at about 5.2:1. Vermillion and bluish green sit around 3.4 to 3.9:1, which is fine for chart lines and large labels, while yellow, orange and sky blue are fill colors only.

Palette 2: Paul Tol's Bright scheme

Paul Tol, a scientist at the SRON Netherlands Institute for Space Research, publishes a family of color schemes tested against color blindness. His Bright set is a good general-purpose choice for charts and diagrams.

Blue: #4477AA. Cyan: #66CCEE. Green: #228833. Yellow: #CCBB44. Red: #EE6677. Purple: #AA3377. Grey: #BBBBBB.

It looks slightly softer than Okabe-Ito, which many designers prefer for dashboards and reports. Blue, green and purple all pass 4.5:1 on white, so they can carry small labels as well as lines.

Tol also offers Vibrant and Muted variants, plus sequential and diverging schemes for maps and heatmaps. If Bright doesn't suit your brand, one of those usually will.

Palette 3: IBM's color blind safe set

IBM's Design Library includes a short, five-color palette built for product interfaces and data visualization. It is punchier than the scientific sets and works well when a chart needs to feel modern.

Ultramarine: #648FFF. Indigo: #785EF0. Magenta: #DC267F. Orange: #FE6100. Gold: #FFB000.

Five colors is a sensible limit for any categorical chart, so the short list is a feature rather than a flaw. Indigo and magenta just clear 4.5:1 on white, ultramarine and orange reach about 3:1, and gold should stay a fill.

On a black or dark navy background the picture flips. Gold reaches about 11.5:1 on black and ultramarine about 6.9:1, which makes this set a strong option for dark mode dashboards.

Palette 4: Viridis for scales and heatmaps

The first three palettes are for categories. When your data runs from low to high, such as temperatures, prices or density, you need a sequential scale, and viridis is the best-known safe option.

Stéfan van der Walt and Nathaniel Smith designed it for Matplotlib, where it became the default colormap in version 2.0. Five evenly spaced stops are #440154, #3B528B, #21918C, #5EC962 and #FDE725.

Viridis works because it rises steadily in lightness from dark purple to bright yellow. Even if the hues blur together, or the chart is printed in greyscale, the order of the values is still obvious.

That is also why the old rainbow scale fails. Its lightness jumps up and down, so it creates false boundaries for everyone and becomes almost unreadable for people with red-green deficiency.

Contrast still matters

A palette can be safe for color blindness and still fail on readability. Pale yellows and light blues are easy to tell apart from each other, but on a white page they are hard to see at all.

Use the darker colors in each set for text and thin lines, and keep the lighter ones for filled areas such as bars, map regions and background highlights. A thin dark outline around light fills also helps.

For text, aim for at least 4.5:1 against the background, and 3:1 for chart lines, icons and other graphic elements. Our guide to the WCAG contrast ratio explains where those numbers come from.

Don't let color do all the work

Even the best palette is only part of the answer. WCAG success criterion 1.4.1 says color should never be the only way information is shown, and that rule protects people the palettes can't fully cover.

Give chart lines different dash patterns or markers, label them directly instead of relying on a legend, and add icons or words to status colors. A red error border should come with an error message, not just a change of hue.

Trading charts are a good example of this in practice. Our article on colorblind-friendly trading charts shows how filled and hollow candles keep the meaning clear even when red and green look alike.

Using a color blind friendly palette generator

If you need colors that match an existing brand, a palette generator can help, as long as you check the result. Adobe Color has a color blind safe checker, and simulators like Coblis let you upload an image and see it through different types of deficiency.

Chrome DevTools can also emulate vision deficiencies on a live page from the Rendering panel. It is a quick way to see whether a dashboard or a form still makes sense in protanopia, deuteranopia or tritanopia.

Another approach is to start from a photo or a brand image. Our free color palette extractor pulls out the main colors as hex values and lets you check the contrast between them, so you can swap any risky pairs for one of the safe sets above.

A quick checklist before you ship

Pick a published set like Okabe-Ito, Tol Bright or IBM for categories, and viridis or another tested sequential scale for continuous data. Keep categorical charts to about five to eight colors.

Avoid putting red and green, or blue and purple, next to each other as the only difference. Separate colors by lightness, check text against 4.5:1, and add labels, patterns or icons wherever meaning matters.

Finally, run the design through a simulator before it ships. Five minutes of checking is usually all it takes to make a chart or interface work for everyone who looks at it.

Cover image: Ishihara colour blindness test book, 1948. Wellcome Collection, CC BY 4.0, via Wikimedia Commons.