Colorblind Friendly Color Palettes: Safe HEX Codes for Charts and UI
· Updated · 10 min read
A colorblind friendly color palette keeps categories readable when red–green or blue–yellow discrimination is reduced—roughly 1 in 12 men and 1 in 200 women have some form of colour vision deficiency (CVD). The practical answer for charts and UI is to start from proven sets such as Okabe–Ito, the IBM Design Language colorblind-safe palette, or Paul Tol’s Bright scheme, copy their HEX codes below, never encode meaning with hue alone, and still check WCAG contrast for text and controls. These tables are digital starting points for accessible palettes for charts and product UI, not a medical diagnosis tool.
What “color blind safe” actually means
Color blind safe does not mean one palette works for every eye. It means neighbouring categories stay separable under the common CVD simulations—especially deuteranopia and protanopia (red–green) and, less often, tritanopia (blue–yellow)—and that lightness or shape still carries the message if hue collapses. A rainbow of saturated primaries fails that test; a short qualitative set with distinct lightness and carefully chosen hues usually passes.
For data visualisation, prefer categorical (qualitative) palettes designed for CVD over sequential rainbows. For UI, treat status colours as a system: pair each hue with an icon, label or pattern, and keep text/background pairs on a contrast budget. The HEX lists below are the ones teams cite most often when they search for a color blind safe palette hex starting point.
Six colorblind-safe palettes with HEX codes
Each row is a named, widely cited palette. Copy the HEX list into chart libraries, design tokens or a Tailwind theme. Okabe–Ito and IBM’s five-colour set are the usual defaults for categorical charts; Paul Tol’s Bright, Vibrant and Muted schemes give alternatives when you need more series or a quieter look. The sixth row is a compact UI status set derived from the same principles.
Cite the palette by name in your design docs so future contributors do not “improve” it back into an unsafe rainbow. Soft-proof with a CVD simulator and a contrast checker before you ship.
| Palette | Swatches | Approximate HEX | Copy |
|---|---|---|---|
Okabe–Ito Classic colour-vision-deficiency-safe qualitative set (Bang Wong / Okabe–Ito). Default for scientific charts. |
| ||
IBM Design Language (colorblind-safe) IBM’s five-colour colorblind-safe palette for data viz and product charts. |
| ||
Paul Tol Bright Tol Bright qualitative scheme—strong categorical separation for up to seven series. |
| ||
Paul Tol Vibrant Tol Vibrant—higher chroma alternative when Bright feels too muted on dark UI. |
| ||
Paul Tol Muted Tol Muted—softer categorical colours for dense dashboards and print-friendly figures. |
| ||
UI status (CVD-aware) Compact info / success / warn / danger / neutral set for product UI—pair with icons and labels. |
|
HEX values are approximate digital starting points for screen use, not official Pantone matches.
Deuteranopia, protanopia and tritanopia
Deuteranopia and deuteranomaly are the most common red–green deficiencies: greens shift toward beige or grey, and red–green traffic-light pairs collapse. Protanopia and protanomaly similarly weaken reds; dark red can look near-black, which is why a “danger” red that only works as a dark fill is a poor sole signal. Tritanopia and tritanomaly are rarer and affect blue–yellow discrimination—sky blue versus yellow-green series can merge.
Design for the common case first: avoid sole reliance on red versus green. Prefer blue/orange, blue/vermillion, or the Okabe–Ito and Tol sets above. Always add a second channel—position, pattern, icon or text—so a deuteranopic or protanopic reader still gets the same information. Simulate all three families before locking a chart legend.
Contrast, WCAG and what CVD simulation does not replace
Colour vision simulation and WCAG contrast solve different problems. CVD checks ask whether two hues remain distinguishable; WCAG asks whether text or UI chrome meets a luminance ratio (AA: 4.5:1 normal text, 3:1 large text and non-text UI). A palette can be colorblind friendly and still fail AA if you put mid yellow or light cyan behind small copy.
Check every text and interactive pair in a contrast checker. Keep body text on near-black or deep navy over pale grounds. Use categorical chart colours for marks and fills, not for 14px labels. For a deeper walkthrough of AA versus AAA, see the WCAG color contrast guide on this site.
Using these palettes in charts and product UI
In charts, map series in a fixed order from a named palette and stop when you run out of distinct colours—duplicate hues or a rainbow extension undo the accessibility work. Prefer direct labels on lines or bars over a hue-only legend when space allows. On maps and heatmaps, use sequential or diverging scales that vary lightness as well as hue; pure hue ramps fail under CVD.
In product UI, reserve the CVD-aware status set for badges, alerts and chart accents. Do not ship red/green-only validation: pair success and error with icons and explicit copy. Focus rings and borders need 3:1 against adjacent surfaces. Browse high-contrast palette collections when you need ready-made ramps that already spread lightness for AA-friendly text.
Dark mode keeps the same categorical hues but re-checks contrast against the dark canvas; light yellows and greys often need a brighter sibling. Generate a full token scale from any anchor HEX in the Tailwind color palette generator when you need 50–950 steps around a brand or chart colour.
Tailwind snippet for a colorblind-safe chart scale
Drop Okabe–Ito (minus black) into named Tailwind tokens for quick chart and badge prototypes. Prefer theme.extend so you keep the default palette. For a full 50–950 brand scale from one of these anchors, open the Tailwind color palette generator.
Tailwind theme tokens (Okabe–Ito)
Paste into theme.extend.colors (v3) or adapt into a Tailwind v4 @theme block. Values follow the published Okabe–Ito qualitative HEX set for screen use.
// Colorblind-friendly chart tokens — Okabe–Ito qualitative HEX
module.exports = {
theme: {
extend: {
colors: {
cvd: {
orange: '#E69F00',
sky: '#56B4E9',
green: '#009E73',
yellow: '#F0E442',
blue: '#0072B2',
vermillion: '#D55E00',
purple: '#CC79A7',
},
},
},
},
};