The most color-blind friendly colors are blue, orange, teal, yellow, and grey. These hues remain distinguishable across nearly all types of color vision deficiency. About 1 in 10 men and a smaller percentage of women experience some form of color blindness, with red-green color blindness accounting for 99% of cases. Choosing the right palette makes your designs, charts, and presentations readable for this large audience.
Why Some Colors Fail
Red-green color blindness dominates. Within that group, about 75% of people have trouble perceiving green, while 24% struggle with red. For someone with red deficiency, red color waves register as “no signal,” meaning red looks black. That makes red-on-black combinations essentially invisible, and red-on-green pairs nearly identical in perceived brightness. Blue-yellow color blindness and total color blindness (seeing only shades of grey) are very rare by comparison.
The practical takeaway: any palette that leans heavily on red and green distinctions will break down for roughly 8 to 10% of male viewers. Red and white text is technically legible, but it looks the same as black and white to someone with red deficiency, stripping away any emphasis you intended.
Tested Color-Blind Friendly Palettes
Researchers have developed several pre-built palettes that work across all common types of color vision deficiency. These come from accessibility and data visualization communities and have been tested against simulations of every major deficiency type.
Bright Palette (6 Colors)
- Blue: #4477AA
- Cyan: #66CCEE
- Green: #228833
- Yellow: #CCBB44
- Red: #EE6677 (a soft pinkish-red, not a deep red)
- Grey: #BBBBBB
This palette works well when you need a clean, high-contrast look. The red here is shifted toward pink, which keeps it distinguishable from the green even for red-green deficient viewers.
Vibrant Palette (7 Colors)
- Blue: #0077BB
- Cyan: #33BBEE
- Teal: #009988
- Orange: #EE7733
- Red: #CC3311
- Magenta: #EE3377
- Grey: #BBBBBB
The vibrant set replaces green entirely with teal and swaps yellow for orange. It’s a bolder option that holds up well in presentations and digital interfaces. Orange is one of the safest “warm” colors for accessibility because its brightness separates it from red even when hue perception is limited.
Muted Palette (10 Colors)
- Indigo: #332288
- Cyan: #88CCEE
- Teal: #44AA99
- Green: #117733
- Olive: #999933
- Sand: #DDCC77
- Rose: #CC6677
- Wine: #882255
- Purple: #AA4499
- Pale Grey: #DDDDDD
This is the largest safe palette available, useful when you’re working with complex data that needs many categories. The colors span a wide range of lightness values, so even if two hues look similar to a color-blind viewer, their brightness difference keeps them apart.
Color Pairs to Avoid
Certain combinations are reliably problematic. Red and green sit close together on the brightness scale and collapse into near-identical shades for the vast majority of color-blind people. Red and black fail because red can register as black for those lacking red perception. Green and brown, green and yellow, and blue and purple also cause confusion depending on the type and severity of the deficiency.
A useful rule: if two colors would look nearly the same when you convert an image to greyscale, they’re a risky pair. The accessible palettes above are specifically designed so that every color has a unique brightness level, not just a unique hue.
Contrast Ratios for Text and Interfaces
Color choice alone isn’t enough for text. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and its background. Normal-sized text needs at least a 4.5:1 contrast ratio. Large text (18 point or 14 point bold and above) can get by with 3:1. These thresholds are strict: a computed ratio of 4.499:1 does not pass the 4.5:1 requirement.
The same 3:1 minimum applies to user interface elements like buttons, input fields, and icons that convey meaning. A checkbox, for instance, needs its border to contrast against its background at 3:1 or better, and the checkmark inside needs to be distinguishable from the box itself. Disabled or inactive controls are exempt.
Design Beyond Color Alone
The safest approach is never relying on color as the only way to communicate information. If you remove all color from your design and the meaning disappears, some portion of your audience is losing that meaning too. There are several ways to reinforce color with other visual cues.
Patterns and textures work well in bar charts and filled areas. Instead of a red bar next to a green bar, use a solid fill next to a hatched fill. Shapes serve the same purpose in scatter plots and line charts: circles, squares, triangles, and diamonds remain distinct regardless of their color. These approaches have an added benefit: they survive black-and-white printing.
Direct labeling is often better than a separate legend. Placing the category name right next to the data point or line segment eliminates the need to match colors across a distance. When you do use a legend, keep its items in the same order as the data appears visually so the reader doesn’t have to hunt.
For status indicators (think form validation, alerts, or dashboard signals), pair color with icons or text. A red error message is much more accessible when it also includes a warning icon and the word “Error.” A green success state is clearer with a checkmark. Borders, spacing, and positioning all carry meaning independently of hue.
How to Test Your Palette
Simulation tools let you preview exactly how your work looks through different types of color vision deficiency. Figma offers a Color Blindness Simulator plugin that tests against seven deficiency types: red-blind, green-blind, blue-blind, red-weak, green-weak, blue-weak, and complete color blindness. It generates a side-by-side comparison frame using scientifically validated color transformation models.
Outside of Figma, browser-based simulators like Coblis and the built-in developer tools in Chrome (under “Rendering” settings) let you emulate color deficiency on any webpage. Adobe Photoshop and Illustrator include soft-proofing options for protanopia and deuteranopia under their accessibility menus. Running your design through at least the red-blind and green-blind simulations covers the vast majority of real-world cases.
The quick sanity check is simpler: convert your image or design to greyscale. If every element is still distinguishable by brightness alone, your palette will hold up for nearly all viewers.