Color blind friendly palettes and how to test your designs

A color blind friendly palette is a set of colours that stay distinct for people who confuse certain hues, usually reds and greens. The trick is to separate colours by lightness as well as by hue, and to never let colour be the only signal. A dark blue and a light orange stay different for almost everyone; a mid red and a mid green, at similar lightness, can look like the same muddy brown. Below are palettes you can copy, the pairs to avoid, and three free ways to test your work.

Types of colour blindness, briefly

Colour vision relies on three kinds of cone cell in the eye, tuned roughly to long, medium and short wavelengths. When one kind is missing or shifted, some colours that look different to most people start to look alike. The WebAIM article on colour blindness covers the biology; for design, this table is what matters.

The common thread: hue becomes unreliable, but lightness survives. A person with deuteranopia still sees clearly that one colour is darker than another. That single fact drives every rule below.

A color blind friendly palette you can copy

The best known safe set is the palette proposed by Masataka Okabe and Kei Ito for scientific figures. Its eight colours were chosen to remain distinguishable for the common types of colour blindness, and it works just as well for charts, maps, labels and status colours in a product.

For brand work, eight colours is usually too many. The safest single pairing is blue and orange: they sit on opposite sides of the red and green confusion line and differ in lightness, so they read as different to almost everyone. Blue with yellow, and dark purple with light green, also hold up well.

Gradients and scales for data

For heatmaps and charts that show a range, use a scale whose lightness changes steadily from one end to the other. A red to green scale fails twice: the ends confuse colour blind readers, and both ends are similar in lightness. Blue to orange or a single hue from dark to light works for nearly everyone.

Pairs to avoid and what to use instead

Some combinations cause trouble again and again. The red #d7263d and green #2e9e44 above look clearly different to most people, but their perceptual lightness is almost identical (around 57% and 62% in OKLCH), so for someone with deuteranopia there is little left to tell them apart.

If your brand colours are red and green, you do not need to change them. Just make one clearly darker than the other, and never use them as the only difference between, say, a gain and a loss. An arrow or a plus and minus sign fixes it for everyone. Choosing the colours in the first place is covered in how to choose brand colours.

Never rely on colour alone

This is the rule that matters most, and it is also part of the Web Content Accessibility Guidelines. If a chart legend, a form error, an in stock badge or a map only differs by colour, some readers lose the meaning. Add a second signal:

• Labels directly on chart lines and bars rather than a colour key.
• Icons for states: a tick for success, a cross or warning sign for errors.
• Patterns or line styles, such as dashed and solid lines, in charts.
• Position and order, so the first item always means the same thing.
• Text contrast that passes on its own, checked with a contrast checker.

Social graphics need the same care. A post that says "green means available" over a red and green calendar will lose some readers. Words carry it better, and the words themselves have to read against the background, especially on gradients, where contrast changes across the frame. Text on gradients covers that in detail.

That right hand version is what a Gradiently Mark does on its own: it moves its calmest, best contrasting region behind the text and auto ink chooses light or dark type for each line, so the separation comes from lightness rather than hue.

How to test a design for colour blindness

1. 1

   Do the greyscale check

   Export or screenshot the design and turn it to greyscale. If two colours that mean different things become the same grey, change the lightness of one.

2. 2

   Simulate in the browser

   In Chrome or Edge, open devtools, press the command menu, type Rendering and use Emulate vision deficiencies to view the live page as protanopia, deuteranopia, tritanopia or achromatopsia.

3. 3

   Check your whole screen in grey

   Mac and Windows both include a greyscale colour filter in their accessibility settings. Switch it on to review apps, design files and exports, not only web pages.

4. 4

   Remove the colour and read it again

   Ask whether every chart, badge and status still makes sense with labels and icons alone. If it does, colour is decoration, which is where it belongs.

Simulations are approximations, and colour vision varies from person to person. If accessibility matters for your product, ask colour blind people you know to look at the real thing. For charts specifically, infographic design has more on labelling and layout, and colour harmony helps when you need a safe palette that still looks considered.