Color-Blind-Safe Chart Palette, Measured

Live chart

Try it in a chart

Choose how many series, the background and a type of color vision. Series take the colors in the recommended order below, and each keeps its name and value beside it, so color is never the only cue.

The controls need JavaScript. Without it the chart shows the first five series on a light background, as typical vision sees them.

Closest pair in view: Vermilion Reddish purple
Distance: ΔE 37.02 Distinct
Pass 3:1 here: 5/5

Web search
Direct
Email
Social
Referral
Partners
Video
Events

Sign-ups over eight weeks, by source

Web search463
Direct570
Email470
Social344
Referral243
Partners194
Video146
Events582

Weekly sign-ups, by source

1007550250

Web search 74 Direct 86 Email 50 Social 62 Referral 26

12345678

Week

Illustrative data

The numbers in both charts
Source	Color	Week 1	Week 2	Week 3	Week 4	Week 5	Week 6	Week 7	Week 8	Total
Web search	Blue	40	46	52	55	60	66	70	74	463
Direct	Vermilion	60	58	64	70	72	78	82	86	570
Email	Black	70	66	62	60	56	54	52	50	470
Social	Reddish purple	20	28	34	42	48	52	58	62	344
Referral	Bluish green	34	36	30	32	28	30	27	26	243
Partners	Sky blue	10	14	18	22	28	30	34	38	194
Video	Yellow	24	22	20	18	16	17	15	14	146
Events	Orange	50	56	60	68	76	84	90	98	582

The simulation is the model of Machado, Oliveira and Fernandes (2009) at full severity, the one this site's simulator uses; achromatopsia is shown as luminance only. A simulation approximates how colors collapse; it does not reproduce anyone's vision.

Measured

Each color, measured

Contrast is measured against the two chart backgrounds this page uses: white, and #171613, the raised surface of this site's dark theme. WCAG 1.4.11 asks for 3:1 between the parts of a graphic needed to understand it and the colors next to them.

Each color's contrast on the two chart backgrounds
Color	Hex	OKLCH L	OKLCH	On white #FFFFFF	On dark #171613
BlackLight charts only; white takes its place on dark	#000000	0.000	oklch(0.000 0.000 0)	21.00:1 Passes 3:1	1.16:1 Below 3:1
Orange	#E69F00	0.753	oklch(0.753 0.158 76.8)	2.25:1 Below 3:1	8.03:1 Passes 3:1
Sky blue	#56B4E9	0.735	oklch(0.735 0.117 236.2)	2.30:1 Below 3:1	7.84:1 Passes 3:1
Bluish green	#009E73	0.620	oklch(0.620 0.130 165.5)	3.42:1 Passes 3:1	5.28:1 Passes 3:1
Yellow	#F0E442	0.902	oklch(0.902 0.172 105.0)	1.32:1 Below 3:1	13.68:1 Passes 3:1
Blue	#0072B2	0.532	oklch(0.532 0.131 244.0)	5.18:1 Passes 3:1	3.48:1 Passes 3:1
Vermilion	#D55E00	0.621	oklch(0.621 0.170 47.5)	3.86:1 Passes 3:1	4.67:1 Passes 3:1
Reddish purple	#CC79A7	0.679	oklch(0.679 0.118 346.3)	3.06:1 Passes 3:1	5.91:1 Passes 3:1
WhiteDark charts only, in place of black	#FFFFFF	1.000	oklch(1.000 0.000 0)	1.00:1 Below 3:1	18.09:1 Passes 3:1

When a color is below 3:1

Label it. Print the series name and value on or beside the mark, as the chart above does. WCAG's Understanding document for 1.4.11 says a graphic does not itself need 3:1 when labels and values on it carry the same information.
Outline it. A 1 px edge in your text color gives the mark a boundary that clears 3:1 against the background.
Order it. The light order below puts the 5 colors that pass on white first, so a chart with up to 5 series clears 3:1 without either.
Mind yellow. It measures 1.32:1 on white: keep it for dark charts, or outline it.

Color vision

Can they still be told apart?

The CIEDE2000 difference between the two closest colors, after simulating each type of color vision deficiency at full severity. On this site's scale 10 or more reads as distinct, 5 to 10 as noticeable, 2 to 5 as close, and under 1 as imperceptible.

The closest two colors under each type of color vision
Vision	Closest pair	ΔE2000	Reads as
Typical vision	Orange Yellow	21.72	Distinct
Protanopia	Blue Reddish purple	12.26	Distinct
Deuteranopia	Orange Yellow	11.52	Distinct
Tritanopia	Orange Reddish purple	11.13	Distinct
Achromatopsia	Orange Sky blue	0.57	Imperceptible

With white in place of black, for dark charts, every closest pair and distance above is the same. In grayscale, orange and sky blue measure ΔE 0.57 apart, the same gray, so a chart that may be printed in black and white needs labels or patterns too.

Every pair, at its worst

Each cell is the smallest of four distances: typical vision, protanopia, deuteranopia and tritanopia. The smallest of all is in bold.

	Black	Orange	Sky blue	Bluish green	Yellow	Blue	Vermilion	Reddish purple	White
Black	Same color	60.15	58.61	42.87	83.70	38.32	42.06	46.06	Never used together
Orange	60.15	Same color	50.62	17.91	11.52	51.39	12.52	11.13	31.24
Sky blue	58.61	50.62	Same color	12.21	39.72	19.92	52.20	14.07	25.49
Bluish green	42.87	17.91	12.21	Same color	28.05	12.07	18.20	16.11	30.37
Yellow	83.70	11.52	39.72	28.05	Same color	47.17	23.68	25.02	16.79
Blue	38.32	51.39	19.92	12.07	47.17	Same color	49.62	12.26	42.48
Vermilion	42.06	12.52	52.20	18.20	23.68	49.62	Same color	14.01	39.19
Reddish purple	46.06	11.13	14.07	16.11	25.02	12.26	14.01	Same color	26.09
White	Never used together	31.24	25.49	30.37	16.79	42.48	39.19	26.09	Same color

Series order

Which colors for 2 to 8 series

Use the first N colors of the list for your chart's background. Of the 40,320 possible orders, we kept those that put the colors passing 3:1 first (720 on white, all 40,320 on the dark ground) and chose the one whose every prefix comes closest to the best set of that size.

On a light chart #FFFFFF

1Blue
2Vermilion
3Black
4Reddish purple
5Bluish green
6Sky blue
7Yellow
8Orange

Every prefix keeps at least 87.5% of the best separation any colors of that number could reach. At 4 series it reaches ΔE 12.26 against 14.01.

Series	Color added	Closest pair so far	ΔE2000	Best possible	In grayscale
2	Vermilion	Blue Vermilion Typical vision	49.62	49.62	8.33
3	Black	Blue Black Deuteranopia	38.32	38.32	8.33
4	Reddish purple	Blue Reddish purple Protanopia	12.26	14.01	5.98
5	Bluish green	Blue Bluish green Tritanopia	12.07	12.07	2.73
6	Sky blue Below 3:1	Blue Bluish green Tritanopia	12.07	12.07	2.73
7	Yellow Below 3:1	Blue Bluish green Tritanopia	12.07	12.07	2.73
8	Orange Below 3:1	Reddish purple Orange Tritanopia	11.13	11.13	0.57

On a dark chart #171613

1Blue
2Vermilion
3White
4Sky blue
5Yellow
6Reddish purple
7Bluish green
8Orange

Every prefix keeps at least 95.0% of the best separation any colors of that number could reach. At 2 series it reaches ΔE 49.62 against 52.20.

Series	Color added	Closest pair so far	ΔE2000	Best possible	In grayscale
2	Vermilion	Blue Vermilion Typical vision	49.62	52.20	8.33
3	White	Vermilion White Deuteranopia	39.19	39.19	8.33
4	Sky blue	Blue Sky blue Tritanopia	19.92	19.92	8.33
5	Yellow	White Yellow Tritanopia	16.79	16.79	6.50
6	Reddish purple	Blue Reddish purple Protanopia	12.26	12.26	5.98
7	Bluish green	Blue Bluish green Tritanopia	12.07	12.07	2.73
8	Orange	Reddish purple Orange Tritanopia	11.13	11.13	0.57

Black is third on light charts. If your axes and text are black too, label that series directly, as the chart above does. "Closest pair so far" is the closest two among the first N colors under any of the four visions; "Best possible" is the most that any N of these colors can reach under the same rule.

Use it well

Color is never the only cue

WCAG 1.4.1 says color must not be the only visual means of conveying information. A safe palette lowers the risk; labels and shapes remove it.

Label series directly: the name at the end of a line, the value at the tip of a bar.
Give lines a second cue, such as a marker shape or a dash pattern.
Keep a legend, and offer the numbers as a table.
Keep words in your text color; let a colored mark beside them carry the identity.
Check the chart in grayscale before it goes to print.

Code

Export the palette

Both orders as tokens: chart-light-1 to 8 and chart-dark-1 to 8.

Copy a format and rename the tokens to fit your system.

CSS custom properties

/* Generated by Auric Artisan chart palettes (Okabe–Ito) on 2026-10-04 */
:root {
  --chart-light-1: #0072B2; /* Blue (Okabe–Ito) */
  --chart-light-2: #D55E00; /* Vermilion (Okabe–Ito) */
  --chart-light-3: #000000; /* Black (Okabe–Ito) */
  --chart-light-4: #CC79A7; /* Reddish purple (Okabe–Ito) */
  --chart-light-5: #009E73; /* Bluish green (Okabe–Ito) */
  --chart-light-6: #56B4E9; /* Sky blue (Okabe–Ito) */
  --chart-light-7: #F0E442; /* Yellow (Okabe–Ito) */
  --chart-light-8: #E69F00; /* Orange (Okabe–Ito) */
  --chart-dark-1: #0072B2; /* Blue (Okabe–Ito) */
  --chart-dark-2: #D55E00; /* Vermilion (Okabe–Ito) */
  --chart-dark-3: #FFFFFF; /* White, in place of Okabe–Ito black on dark charts */
  --chart-dark-4: #56B4E9; /* Sky blue (Okabe–Ito) */
  --chart-dark-5: #F0E442; /* Yellow (Okabe–Ito) */
  --chart-dark-6: #CC79A7; /* Reddish purple (Okabe–Ito) */
  --chart-dark-7: #009E73; /* Bluish green (Okabe–Ito) */
  --chart-dark-8: #E69F00; /* Orange (Okabe–Ito) */
}

JSON arrays

{
  "light": [
    "#0072B2",
    "#D55E00",
    "#000000",
    "#CC79A7",
    "#009E73",
    "#56B4E9",
    "#F0E442",
    "#E69F00"
  ],
  "dark": [
    "#0072B2",
    "#D55E00",
    "#FFFFFF",
    "#56B4E9",
    "#F0E442",
    "#CC79A7",
    "#009E73",
    "#E69F00"
  ]
}

Tailwind config

// Generated by Auric Artisan chart palettes (Okabe–Ito) on 2026-10-04
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "chart": {
          "light": {
            "1": "#0072B2",
            "2": "#D55E00",
            "3": "#000000",
            "4": "#CC79A7",
            "5": "#009E73",
            "6": "#56B4E9",
            "7": "#F0E442",
            "8": "#E69F00"
          },
          "dark": {
            "1": "#0072B2",
            "2": "#D55E00",
            "3": "#FFFFFF",
            "4": "#56B4E9",
            "5": "#F0E442",
            "6": "#CC79A7",
            "7": "#009E73",
            "8": "#E69F00"
          }
        }
      }
    },
  },
};

Design tokens (W3C DTCG)

{
  "$schema": "https://schemas.tokens.studio/latest/tokens-schema.json",
  "$description": "Generated by Auric Artisan chart palettes (Okabe–Ito) on 2026-10-04",
  "chart": {
    "light": {
      "1": {
        "$value": "#0072B2",
        "$type": "color",
        "$description": "Blue (Okabe–Ito)"
      },
      "2": {
        "$value": "#D55E00",
        "$type": "color",
        "$description": "Vermilion (Okabe–Ito)"
      },
      "3": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Black (Okabe–Ito)"
      },
      "4": {
        "$value": "#CC79A7",
        "$type": "color",
        "$description": "Reddish purple (Okabe–Ito)"
      },
      "5": {
        "$value": "#009E73",
        "$type": "color",
        "$description": "Bluish green (Okabe–Ito)"
      },
      "6": {
        "$value": "#56B4E9",
        "$type": "color",
        "$description": "Sky blue (Okabe–Ito)"
      },
      "7": {
        "$value": "#F0E442",
        "$type": "color",
        "$description": "Yellow (Okabe–Ito)"
      },
      "8": {
        "$value": "#E69F00",
        "$type": "color",
        "$description": "Orange (Okabe–Ito)"
      }
    },
    "dark": {
      "1": {
        "$value": "#0072B2",
        "$type": "color",
        "$description": "Blue (Okabe–Ito)"
      },
      "2": {
        "$value": "#D55E00",
        "$type": "color",
        "$description": "Vermilion (Okabe–Ito)"
      },
      "3": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "White, in place of Okabe–Ito black on dark charts"
      },
      "4": {
        "$value": "#56B4E9",
        "$type": "color",
        "$description": "Sky blue (Okabe–Ito)"
      },
      "5": {
        "$value": "#F0E442",
        "$type": "color",
        "$description": "Yellow (Okabe–Ito)"
      },
      "6": {
        "$value": "#CC79A7",
        "$type": "color",
        "$description": "Reddish purple (Okabe–Ito)"
      },
      "7": {
        "$value": "#009E73",
        "$type": "color",
        "$description": "Bluish green (Okabe–Ito)"
      },
      "8": {
        "$value": "#E69F00",
        "$type": "color",
        "$description": "Orange (Okabe–Ito)"
      }
    }
  }
}

Plain text to paste; nothing is downloaded. The colors are Okabe and Ito's; the orders and measurements are this page's. Free to use in any project.

Sources

Sources and method

Where the colors and the measurements come from.

Contrast is the WCAG 2 ratio, floored to two decimals. Lightness is OKLCH L. Simulations apply Machado's matrices in linear light at full severity. Node tests recompute every number on this page from the site's color engine. Checked with axe and the keyboard in Chromium; not yet tested with a screen reader. Last reviewed on 4 October 2026.

Chart palettes Okabe–Ito, measured