Color-Blind Friendly Palettes: Hex Codes, Tested
The best-known safe palette is Okabe-Ito: #E69F00 orange, #56B4E9 sky blue, #009E73 bluish green, #F0E442 yellow, #0072B2 blue, #D55E00 vermilion, #CC79A7 reddish purple, plus black. In our simulation its two closest colours stay at least 10.9 apart (CIEDE2000) under protan, deutan and tritan views. The catch is on white backgrounds: three of its colours fall below 3:1 contrast.
Published palettes come with hex codes and a claim; the useful question is how far apart the closest two colours stay once a colour-vision-deficiency model has been applied. We scored that for each palette and measured every swatch's contrast on white and black. The simulation is a standard model and an approximation of how people with colour vision deficiency (CVD) see; the method and limits are stated below, and the numbers are ours.
About 1 in 12 men have colour vision deficiency, according to the U.S. National Eye Institute (page updated November 5, 2025). The NEI describes the most common type as making it hard to tell red from green, and another type making blue and yellow look the same. Because the condition often goes unnoticed by the person who has it, designing for it is closer to a default than a special case.
The palettes and their hex codes
Okabe-Ito (eight colours, including black)
Masataka Okabe and Kei Ito published this palette on their Color Universal Design page at the University of Cologne's J*FLY site. Their description: "unambiguous both to colorblinds and non-colorblinds, with vivid colors so that color names are easy to identify, can be printable with similar color both on screen and when printed." The page gives each colour as RGB values; we converted them to hex and computed the rest.
| Colour | Hex | RGB | Contrast on white | Contrast on black | Protan view | Deutan view | Tritan view |
|---|---|---|---|---|---|---|---|
| Black | #000000 | 0, 0, 0 | 21.00 | 1.00 | #000000 | #000000 | #000000 |
| Orange | #E69F00 | 230, 159, 0 | 2.25 | 9.32 | #B9A200 | #CAB411 | #FB8C87 |
| Sky blue | #56B4E9 | 86, 180, 233 | 2.31 | 9.10 | #9BB3EC | #87A4E8 | #00C2C6 |
| Bluish green | #009E73 | 0, 158, 115 | 3.42 | 6.14 | #9A9271 | #8A8676 | #009E92 |
| Yellow | #F0E442 | 240, 228, 66 | 1.32 | 15.88 | #F8DC23 | #FCE34E | #FFD4C5 |
| Blue | #0072B2 | 0, 114, 178 | 5.19 | 4.05 | #5375B5 | #3B67B1 | #008289 |
| Vermilion | #D55E00 | 213, 94, 0 | 3.87 | 5.43 | #817100 | #9E8C00 | #EB4050 |
| Reddish purple | #CC79A7 | 204, 121, 167 | 3.06 | 6.86 | #808BA9 | #9498A5 | #D6788A |
The three right-hand columns are our simulated appearance of each colour for full protanopia-type, deuteranopia-type and tritanopia-type views. They are approximations; they show which colours collapse towards each other, not what a particular person sees.
Paul Tol's qualitative schemes
Paul Tol, of the SRON Netherlands Institute for Space Research, publishes colour schemes with hex codes for scientific graphics. These are the qualitative schemes as listed in the qualitative section of his page (dated August 16, 2026), in the default order he gives:
| Scheme | Hex codes (default order) | His description |
|---|---|---|
| Bright (7) | #4477AA, #EE6677, #228833, #CCBB44, #66CCEE, #AA3377, #BBBBBB | His default for qualitative data; "colour-blind safe" |
| High-contrast (3) | #004488, #DDAA33, #BB5566 | Also works in greyscale; "colour-blind safe and optimized for contrast" |
| Vibrant (7) | #EE7733, #0077BB, #33BBEE, #EE3377, #CC3311, #009988, #BBBBBB | An alternative to Bright, "equally colour-blind safe" |
| Muted (9) | #CC6677, #332288, #DDCC77, #117733, #88CCEE, #882255, #44AA99, #999933, #AA4499 | More colours, "but lacking a clear red or medium blue" |
| Dark (11) | #4477BB, #CC4466, #228833, #2255AA, #993366, #006644, #117788, #882288, #BB4488, #775500, #444444 | Text and lines on white; each at least 4.5:1 with white |
Tol makes a specific contrast claim worth checking, and we did. He says the blue, green and purple of the Bright scheme reach at least 4.5 contrast with white. We computed 4.70 for #4477AA, 4.53 for #228833 and 6.09 for #AA3377, so the claim holds. For the Dark scheme we computed 4.53 to 9.74 across all eleven colours, so it holds there too.
IBM Carbon's categorical palette
IBM's Carbon design system publishes a fourteen-colour categorical sequence for charts. The first eight, in the order Carbon says to apply them, are #6929C4, #1192E8, #005D5D, #9F1853, #FA4D56, #570408, #198038, #002D9C. Carbon's page says the sequence is "carefully curated to maximize contrast between neighboring colors", and describes the palette as designed "to maximize accessibility and visual harmony"; it does not claim colour-blind safety for the sequence, so we tested it as a comparison, not as a product with a promise to check.
How we tested
Simulation. We used the physiologically based model of Machado, Oliveira and Fernandes (IEEE Transactions on Visualization and Computer Graphics, 2009), which the authors publish as 3 by 3 matrices for severities from 0.0 to 1.0 on their site. We used severity 1.0 matrices, which correspond to dichromacy (a missing cone type), applied to linear RGB values, then converted back to sRGB. The three views are protan (long-wavelength cones affected), deutan (medium-wavelength) and tritan (short-wavelength).
Colour difference. For each palette and view, we converted every colour to CIELAB (D65), computed CIEDE2000 for every pair, and report the smallest value, which is the weakest link. We checked our implementation against two published test pairs from Sharma, Wu and Dalal's CIEDE2000 notes (2.0425 and 27.1492), and it reproduced both.
Contrast. We used the WCAG relative-luminance formula for contrast ratio against #FFFFFF and #000000.
Limits. Severity 1.0 is the most extreme case; many people have milder anomalous trichromacy. A simulation shows how a normal-vision viewer can approximate the effect; the Okabe and Ito page itself cautions that "the color displayed in the colorblind proof is not necessarily the color recognized by colorblind people." Colour difference is not the whole story, because size, shape and context matter. There is no standard threshold for "distinguishable"; we use a ΔE2000 of 10 as an informal working line for marks that sit apart, which is our choice and not a published rule.
Palette pages and standards used
Pages read and calculations run on October 23, 2026.
- Masataka Okabe and Kei Ito, Color Universal Design (CUD), J*FLY, University of Cologne: the eight-colour palette and design rules; the RGB values come from the palette figure on that page.
- Paul Tol, Colour schemes and templates, SRON, qualitative schemes (page dates July 31 and August 16, 2026).
- IBM Carbon Design System, Data visualization color palettes.
- Gustavo M. Machado, Manuel M. Oliveira and Leandro A. F. Fernandes, A Physiologically-based Model for Simulation of Color Vision Deficiency, IEEE TVCG 15(6), 2009; matrices at severity 1.0.
- W3C, Understanding SC 1.4.1 Use of Color and Understanding SC 1.4.11 Non-text Contrast.
- U.S. National Eye Institute, Color Blindness, last updated November 5, 2025.
- Simulated colours, ΔE2000 scores, contrast ratios and lightness values are our calculations, run with a script that reproduced the published CIEDE2000 test values of Sharma, Wu and Dalal.
- Omitted because unconfirmed: the five-colour IBM colour-blind-safe palette sometimes quoted online (we found no IBM page listing it), licence terms for any palette, results for severities other than those stated, and how any individual perceives a colour.
Results: how far apart the closest two colours stay
| Palette | Normal vision | Protan | Deutan | Tritan | Weakest pair under CVD |
|---|---|---|---|---|---|
| Okabe-Ito (7 colours, or 8 with black) | 21.7 | 12.2 | 11.6 | 10.9 | Orange / reddish purple (tritan), blue / reddish purple (protan) |
| Tol Bright (7) | 20.5 | 14.2 | 14.8 | 8.6 | Blue / green (tritan) |
| Tol High-contrast (3) | 38.9 | 26.0 | 25.3 | 21.2 | Yellow / red |
| Tol Vibrant (7) | 18.3 | 13.7 | 14.4 | 8.6 | Orange / magenta (tritan) |
| Tol Muted (9) | 15.0 | 11.8 | 14.3 | 11.5 | Indigo / wine (protan) |
| Carbon categorical, first 5 | 25.7 | 9.5 | 15.5 | 17.9 | Teal 70 / Magenta 70 (protan) |
| Carbon categorical, first 8 | 12.8 | 7.4 | 9.9 | 10.5 | Purple 70 / Blue 80 |
| Common status trio, our example (#2E7D32, #F9A825, #C62828) | 40.8 | 13.0 | 6.6 | 25.9 | Green / red |
What stands out:
- The designed palettes hold their spacing. Okabe-Ito and the Tol schemes lose some separation under simulation but their closest pairs stay near or above our working line of 10. Tol's Bright and Vibrant fall to 8.6 in the tritan view; tritan deficiency is rare, but the dip is real, and blue against green is where it appears.
- More colours means less room. Carbon's first five colours are acceptable in the deutan and tritan views and weaker in protan (9.5). Taken to eight colours, the closest pair under protan is 7.4, which is the problem of adding colours rather than a flaw in any one of them. Carbon's own sequence is designed for contrast between neighbours, not for all pairs.
- A familiar status trio is the weak case. Green #2E7D32 against red #C62828 scores 40.8 for normal vision and 6.6 in the deutan view. That is the red and green of a thousand dashboards.
- Severity matters. Using the same green and red with the model's milder deuteranomaly severities, the score is 63.5 at 0.0, 36.4 at 0.3, 23.0 at 0.5, 13.0 at 0.7 and 6.6 at 1.0. People who are red-green deficient but not fully dichromat see more difference than the table's worst case, and people at the severe end see less.
Using fewer colours: which subset to pick from Okabe-Ito
Few charts need eight series, and using only the best-spaced subset buys a lot of room. We searched every combination of the Okabe-Ito colours, and for each size we kept the combination whose closest pair scores highest across all four views (normal, protan, deutan, tritan). The score in the table is that worst-case closest pair, so a bigger number is safer.
| Series needed | Best subset (all eight colours allowed) | Worst-case closest pair |
|---|---|---|
| 2 | Black #000000, yellow #F0E442 | 83.9 |
| 3 | Black, orange #E69F00, sky blue #56B4E9 | 50.5 |
| 4 | Black, sky blue #56B4E9, yellow #F0E442, vermilion #D55E00 | 23.8 |
| 5 | Black, sky blue, yellow, blue #0072B2, vermilion | 20.0 |
| 6 | Black, sky blue, yellow, blue, vermilion, reddish purple #CC79A7 | 12.2 |
| 7 | Black, sky blue, bluish green #009E73, yellow, blue, vermilion, reddish purple | 12.1 |
| 8 | All eight | 10.9 |
The pattern is steep. Going from four to five series costs about four points, and from five to six costs eight; the last two colours cost almost nothing more but bring the floor to the low teens. A five-series chart picked well has almost twice the spacing of a five-series chart that happens to include orange next to reddish purple.
The best subsets lean on yellow and sky blue, which are weak on white. If your chart sits on white and you need every mark to reach 3:1, restrict the pool to the five colours that do (black, bluish green, blue, vermilion, reddish purple) and the best subsets become:
| Series needed (white background) | Best subset | Worst-case closest pair |
|---|---|---|
| 2 | Blue #0072B2, vermilion #D55E00 | 49.6 |
| 3 | Black, blue, vermilion | 38.2 |
| 4 | Black, bluish green #009E73, vermilion, reddish purple #CC79A7 | 13.9 |
| 5 | Black, bluish green, blue, vermilion, reddish purple | 12.2 |
So on white, a clean four-series palette is #000000, #009E73, #D55E00 and #CC79A7, and a safe pair is #0072B2 with #D55E00. These are our computations on the published hex codes, and they pick colours; they do not replace direct labels or line styles.
The weakest pairs, in order
If you must use more of the palette, know which neighbours to separate. Taking each pair's worst score across the four views, the eight weakest of the 28 pairs are:
| Pair | Worst-case score |
|---|---|
| Orange / reddish purple | 10.9 |
| Orange / yellow | 11.6 |
| Sky blue / bluish green | 12.1 |
| Blue / reddish purple | 12.2 |
| Bluish green / blue | 12.4 |
| Orange / vermilion | 12.5 |
| Vermilion / reddish purple | 13.9 |
| Sky blue / reddish purple | 14.0 |
Read the list as a seating plan. In a stacked bar or a legend, keep orange away from yellow, reddish purple and vermilion; keep blue away from reddish purple and bluish green. Where two weak neighbours must touch, separate them with a thin white or dark outline, which adds the lightness difference that a hue difference lacks.
Contrast on white: the problem the palettes do not solve
A palette that is distinguishable to everyone can still fail to be visible on your background. WCAG 2.2 success criterion 1.4.11 (Level AA) asks that "parts of graphics required to understand the content" and "visual information required to identify user interface components and states" have a contrast ratio of at least 3:1 against adjacent colours. Applying that to the Okabe-Ito table above:
| On a white background | Colours at or above 3:1 | Colours below 3:1 |
|---|---|---|
| Okabe-Ito | Black 21.00, Blue 5.19, Vermilion 3.87, Bluish green 3.42, Reddish purple 3.06 | Orange 2.25, Sky blue 2.31, Yellow 1.32 |
| On black | All seven colours (lowest: blue at 4.05) | None |
So Okabe-Ito's yellow, sky blue and orange cannot carry thin lines or small markers on white without help; they need a dark outline, thicker marks, or a dark background. On black the whole palette passes, which is one reason it looks natural on dark slides. For Tol's Bright scheme on white, four of seven reach 3:1 (blue 4.70, red 3.09, green 4.53, purple 6.09), and yellow (1.95), cyan (1.84) and grey (1.92) do not.
This matters for the choice between palettes. If your charts sit on white, Tol's Dark scheme is the one built for it: every colour reaches at least 4.5 with white by our calculation, as Tol states, though he notes the scheme is "less distinct from each other" and "the differences are too small for a monochrome printout."
Lightness: the channel that survives, and where these palettes leave it unused
A greyscale printout or a monochrome screen removes hue altogether, and Okabe and Ito's guidance leans on brightness and saturation differences to separate colours close in hue. So a second test, independent of the simulation, is to sort each palette by CIELAB lightness (L*) and look for neighbours that sit within a few points of each other. We computed L* for the published colours; the lists run from darkest to lightest.
| Palette | Colours by lightness (L*) | Pairs within 5 points |
|---|---|---|
| Okabe-Ito | Black 0, blue 46, vermilion 54, bluish green 58, reddish purple 61, sky blue 70, orange 71, yellow 89 | Sky blue / orange 0.8; bluish green / reddish purple 3.3; vermilion / bluish green 3.5 |
| Tol Bright | Purple 42, blue 49, green 50, red 61, yellow 75, grey 76, cyan 77 | Yellow / grey 0.6; blue / green 1.1; grey / cyan 1.5; yellow / cyan 2.1 |
| Tol Vibrant | Red 46, blue 48, magenta 54, teal 57, orange 63, cyan 71, grey 76 | Red / blue 2.0; magenta / teal 2.7; cyan / grey 4.7 |
| Tol Muted | Indigo 22, wine 32, green 44, purple 46, rose 56, olive 61, teal 64, cyan 79, sand 82 | Green / purple 2.0; olive / teal 2.1; cyan / sand 3.0 |
Two readings follow. First, the Tol Bright pair with the weakest tritan score in our results, blue and green at 8.6, is also the pair with almost identical lightness (49 and 50): the simulation and the lightness table agree about where the palette is thin. Second, none of these palettes is built to survive greyscale for all its colours, with the exception of Tol's High-contrast scheme, which he states "works well for people with monochrome vision and in a monochrome printout." Okabe-Ito's sky blue and orange are 0.8 points apart in lightness, so in a greyscale print they are the same grey.
The practical rules this gives:
- If a chart may be printed in black and white or photocopied, choose a subset whose members differ in L* by at least 10 points, or rely on line styles and direct labels. The Okabe-Ito subsets in the table above should be read with the table of lightness values beside them.
- When two near-equal-lightness colours must appear together, separate them by position or outline, not by hue.
- When you create a custom palette, set the lightness first and the hue second. A ladder of lightness steps with hue variation on top is more robust than a rainbow of equal-lightness hues.
Colour alone is never enough: UI states and charts
Palette choice reduces confusion; it does not remove it. WCAG 2.2 success criterion 1.4.1, Use of Color (Level A), says "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." The W3C's Understanding document adds two routes: a visible alternative to colour, or a pair of colours that differ in hue and also have a relative-luminance difference "that leads to a contrast ratio of 3:1 or greater." It states that where the content depends on telling one specific colour from another, "an additional visual indicator will be required regardless of the contrast ratio between those colors."
For interface states, that gives a practical recipe:
| State | Colour as a hint | Always add |
|---|---|---|
| Success | Bluish green #009E73 | A check icon and the word "Saved" |
| Warning | Yellow or orange with a dark outline or dark text | A triangle icon and the word "Warning" |
| Error | Vermilion #D55E00 | A cross or exclamation icon, the word "Error" and an inline message |
| Selected | A fill plus a 3:1 outline | A check mark or heavier border |
| Link in body text | Colour difference from body text | An underline |
If you replace the usual green and red status pair with Okabe-Ito's bluish green and vermilion, our simulation gives a difference of 54.4 for normal vision, 18.2 for protan, 20.5 for deutan and 62.7 for tritan, against 6.6 for the common pair in the deutan view. Both colours also clear 3:1 on white (3.42 and 3.87), so they work as borders and icons. The colour swap helps, and the icons and words are what make the state independent of colour.
Charts: use lightness and direct labels
The lightness (CIELAB L*) of Okabe-Ito colours we computed ranges from yellow at 89 and orange at 71 through reddish purple at 61 and bluish green at 58 to vermilion at 54 and blue at 46. Okabe and Ito's rules lean on differences in brightness and saturation to separate colours that are close in hue, so spacing the series in lightness gives a second channel. In practice:
- Label lines and bars directly at their ends instead of relying on a colour legend.
- Alternate warm and cool colours across neighbouring series. Okabe and Ito's own advice: "Use 'warm' and 'cool' colors alternatively. When using two warm colors or two cool colors, put distinct differences in brightness or saturation. Avoid combination of colors with low saturation or low brightness."
- Vary line style (solid, dashed) or marker shape across series.
- Limit categories. Once you need more than six or seven, group the data or use small multiples; no palette gets eight colours well apart for every viewer, as the Carbon rows show.
Our chart colour accessibility checklist covers the chart-specific checks, and accessible colour systems places this work inside a design system.
Testing your own palette in ten minutes
You do not need our script to check a brand palette.
- List your colours as hex.
- Run each through a CVD simulator. Okabe and Ito's page records that Adobe built colour-blind simulation into its products with the Color Universal Design Organization, and free simulators exist online, though you should check which model each uses. Use severity 1.0 for the worst case and a milder setting for the typical one.
- Look for pairs that merge, especially any pair that differs mainly in red versus green, or blue versus purple.
- Measure contrast against your background with a WCAG contrast checker. Our contrast checker tool does it in the browser.
- For every merged pair, change one colour's lightness, or add a non-colour cue.
- Retest after the change, because moving one colour can create a new weak pair.
If you use WCAG 2 contrast ratios and also want to see how perceptual models rank the same pairs, our APCA versus WCAG article compares the two on fifteen colour pairs.
Brand colours that already use red and green
A brand palette is not a chart. If a logo uses red and green, the logo itself is not usually a problem, because a mark is recognised by shape and position as well as colour. The risk is in the system around it:
- Status and charts. Do not reuse the brand red and green as success and error without icons.
- Data visualisation. Define a separate categorical palette for charts, such as Okabe-Ito or a Tol scheme, instead of stretching brand colours across eight series.
- Maps and legends. Use patterns or direct labels.
- Print. Check separations and ink totals as in our CMYK guide; a vivid RGB colour can print duller and bring pairs closer together.
For colours in dark interfaces, see dark mode design, where the white-versus-black contrast table above changes which colours are safe. For palette harmonies and theory, the colour theory guide covers hue relationships.
Mistakes that break "colour-blind safe"
- Using a safe palette on a background where half its colours fail 3:1.
- Adding colours until the closest pair merges. The Carbon rows show the cost of going from five to eight.
- Choosing a palette by hue name, not by testing: "blue and purple" merge for protan viewers.
- Using green and red for success and error with no icon or text.
- Trusting a simulator as the truth. The Okabe and Ito page says the displayed proof is not necessarily what colour-blind people perceive.
- Testing only the worst-case severity and rejecting good palettes, or only the mild case and accepting weak ones.
- Forgetting greyscale and print. Tol's High-contrast scheme was designed to work there; many palettes were not.
- Ignoring lightness. Two colours with the same lightness and different hue are the pair most likely to merge.
Colour-blind palette questions
What is the best colour-blind friendly palette?
For many categories, Okabe-Ito or a Tol scheme; for three, Tol's High-contrast. By our tests, all keep their closest pair near or above ΔE 10, with Tol's Bright and Vibrant dropping to 8.6 in the rare tritan view. Pick by background: Tol's Dark scheme if you need to place lines and text on white.
What are the Okabe-Ito hex codes?
#000000, #E69F00, #56B4E9, #009E73, #F0E442, #0072B2, #D55E00 and #CC79A7, from the RGB values on the Okabe and Ito page.
How many colours can a palette have before it stops working?
There is no fixed number. In our tests, adding colours reduced the closest-pair score: Carbon's first five scored 9.5 in the protan view and its first eight scored 7.4. Seven to nine is where the designed palettes top out.
Do I need to test with a real person?
A simulation is a screening tool. If a design is critical, test with people who have colour vision deficiency, because the Okabe and Ito page says the simulated proof is not necessarily what they perceive.
Does WCAG require colour-blind safe palettes?
Not by name. It requires that colour is not the only means of conveying information (1.4.1, Level A) and that graphics and UI states reach 3:1 contrast (1.4.11, Level AA).
Which palette is best on a dark background?
On black, all seven non-black Okabe-Ito colours pass 3:1 by our calculation, and Tol's Bright and Vibrant schemes also pass on black for all seven colours, while Muted passes for seven of its nine. Check your actual background colour, because dark grey backgrounds reduce those ratios.
Can I use these palettes commercially?
The hex codes are listed on the authors' own pages. We found no licence terms on the Tol and Okabe-Ito pages we read, and we offer no legal conclusion; credit the sources, as the Okabe and Ito page asks readers to do.
Replace one merging pair this week
Take your current chart or status colours, run the six-step check above, and replace any pair that merges. If your product has charts, adopt a separate categorical palette from this page and record its hex codes in your design system so that every team reaches for the same ones.