Colorblind-Friendly Color Palettes: Options, Hex Codes, and Design Tips

Color plays a huge role in web design. But for the roughly 300 million people worldwide who are colorblind, the wrong color palette can make a website hard to read and nearly impossible to navigate. A colorblind-friendly palette (one that remains distinguishable regardless of how someone perceives color) keeps your content accessible to everyone, including those who are colorblind. 

The good news? You don’t have to forgo color entirely. Below, we’ll discuss how to create a colorblind-friendly palette and use color effectively in your web designs.

Before we dive in, a quick review of color blindness.

3 different scales of color blindless. Red-green color blindness blue-yellow color blindness and monochromacy color blindless

Types of Color Blindness

Most people assume colorblind individuals see in grayscale. In reality, most can see color; they just struggle to distinguish specific hues. 

Red-green color blindness is the most prevalent, followed by blue-yellow color blindness, while monochromacy (the inability to see color at all) is extremely rare. Understanding the difference helps explain why some color combinations consistently fail and others hold up across vision types.

For a deeper look at how each type works, Colour Blind Awareness(opens in a new tab) is a good resource.

Colorblind-Friendly Palettes

Most color accessibility guides tell you to “choose accessible colors” without telling you which are actually accessible. The palettes below take the guesswork out of it.

Okabe-Ito Palette

The Okable-Ito palette(opens in a new tab) is the most widely cited colorblind-safe palette in scientific and data visualization communities. Developed by Masataka Okabe and Kei Ito, it was designed to be distinguishable across all major types of color vision deficiency, including red-green and blue-yellow. It’s an 8-color palette, making it practical for charts, graphs, and data-heavy interfaces. The palette includes the following colors:

• Black (#000000)

• Orange (#E69F00)

• Sky Blue (#56B4E9)

• Bluish Green (#009E73)

• Yellow (#F0E442)

• Blue (#0072B2)

• Vermillion (#D55E00)

• Reddish Purple (#CC79A7)

IBM Color Blind Safe Palette

IBM(opens in a new tab) developed this palette as part of its broader design system to ensure accessibility across enterprise products. It’s built around eight colors optimized for readability across red-green and blue-yellow vision deficiencies, and it’s particularly well-suited for UI design and product interfaces.

• Blue (#648FFF)

• Violet (#785EF0)

• Magenta (#DC267F)

• Orange (#FE6100)

• Yellow (#FFB000)

• White (#FFFFFF)

• Black (#000000)

Wong Palette

The Wong palette is another widely used 8-color specific palette, developed by Bang Wong and published in Nature Methods. It's closely related to Okabe-Ito but offers slightly different hue separations, making it a strong alternative for publications, infographics, and presentations.

• Black (#000000)

• Orange (#E69F00)

• Sky BLue (#56B4E9)

• Bluish Green (#009E73)

• Yellow (#F0E442)

• Blue (#0072B2)

• Vermillion (#D55E00)

• Reddish Purple (#CC79A7)

AudioEye-Recommended Web Palette

For general web design, a smaller, more focused palette often works better than an 8-color scientific set. This 6-color palette is optimized for web contrast ratios, WCAG 2.1 Level AA compliance, and readability across red-green and blue-green color vision deficiency, making it a practical starting point for most websites.

• Deep Blue (#0057B8) (4.6:1 contrast on white)

• Teal (#007A73) (4.5:1 contrast on white)

• Amber (#E08000) (3.2:1, large text only)

• Dark Charcoal (#333333) (12.6:1 contrast on white)

• Light Gray (#76767) (4.5:1 contrast on white)

• White (#FFFFFF)

The contrast ratios above are measured against a white background in accordance with WCAG 2.1 Level AA. Amber clears the threshold for large text only. Use it for headlines or decorative elements, not body copy or UI labels. Run your final palette through a contrast checker before publishing to confirm everything holds at your actual font sizes and weights.

Colors to Avoid and Why

When building an accessible color palette, some combinations are more likely to create barriers than others, and knowing why helps make better calls when you’re working outside a predefined palette.

• Red/green: The most common problem area, affecting anyone with red-green color blindness. These two colors can appear nearly identical. 

• Green/blue: This is problematic for people with tritanomaly (blue-yellow color blindness), who struggle to distinguish cool hues from each other.

• Green/black: Low luminance contrast makes these difficult to separate for users with deuteranopia or protanopia, where green already appears darkened.

• Green/brown: Both colors shift toward the same muddy yellow-orange for people with red-green color blindness.

• Green/gray: similar lightness values make these hard to distinguish for users with any form of color vision deficiency.

• Light green/yellow: Both land in the same washed-out range for deuteranomalous users, where greens trend toward yellow.

• Blue/purple: Purple contains red, which users with red-green color blindness can’t fully perceive, making blue and purple look nearly the same.

• Blue/gray: Low saturation contrast makes these difficult for users with tritanomaly or low contrast sensitivity.

A pair of eyeglasses with random letters in the lenses. The left side of the image is black and white, while the right side of the image is a rainbow of colors.

How to Use a Colorblind-Friendly Palette in Your Design

Designing for people with color deficiencies doesn’t mean your web designs must be dull and color-free. It means making intentional choices about contrast, complexity, and how you communicate information beyond color alone.

Let’s delve into a few ways you can work accessible colors into your design.

• Get your contrast right: High contrast is the foundation of colorblind-friendly design. When foreground and background are too similar, users with color vision deficiencies may not be able to distinguish text, buttons, or interface elements at all. Run your combinations through a color contrast checker and aim for a ratio of at least 4.5:1. 

• Keep your palette simple: More colors aren’t always better. Bright, saturated hues like magenta and orange can reduce readability for colorblind users, and complex combinations can create a visual vibration effect, where colors appear to shift or move against each other. A focused palette of four to six colors will hold up better across different types of color vision deficiency than a broader range of vivid hues.

• Use patterns and textures alongside color: Color alone isn’t enough to differentiate information — especially in charts, maps, and data visualizations. Adding patterns or textures alongside color gives users a second visual channel to distinguish categories, which holds up even in grayscale or for users who can’t distinguish your chosen hues. 

• Enhance images and graphics intentionally: Charts, infographics, and interactive elements are high-risk areas for color accessibility. Make sure visual elements have sufficient contrast, and use labels, icons, or text alongside color wherever meaning needs to come through clearly.

Benefits of Using an Accessible Color Palette

A colorblind-friendly site benefits more people than you might expect: the roughly 300 million people worldwide with color vision deficiencies, users in high-glare environments, and anyone on a low-quality screen. It also keeps you compliant with accessibility laws like the ADA, European Accessibility Act(opens in a new tab), and the Accessibility for Ontarians with Disabilities Act(opens in a new tab) (AODA).

Create Colorblind-Friendly Palettes with AudioEye

The fastest way to know if your color palette works? Test it. 

Run your colors through AudioEye’s Color Contrast Checker to see exactly where you stand on contrast ratios — then use what you learn to build a more accessible, more usable site.