OCXLY
OCXLY · Accessibility Guide · 12 min read

Color blind friendly design: accessible UI palettes

Practical UI patterns for designing interfaces that work for the roughly 1 in 12 men and 1 in 200 women with color vision deficiency — grounded in WCAG, vision research, and the OCXLY color blindness simulator.

Published · 18 July 2026 Division · OCXLY Neuro Labs Audience · Designers, PMs, Engineers Citations · 10
Reading mode

Color vision deficiency (CVD) — commonly called color blindness — affects about 8% of men and 0.5% of women of Northern European descent, with global prevalence roughly 4.5% overall[1]. That is a larger cohort than many designers realise: on a product with a million monthly users, tens of thousands see your palette differently than you do.

Most CVD is inherited and red-green (deuteranopia and protanopia together). Blue-yellow (tritanopia) is rare. Total color blindness (achromatopsia) is rarer still. In practice, if your interface works for deuteranopia, it will work for the vast majority of color-blind users[2].

This guide is the sibling of our color blindness simulator: the simulator lets you see your UI through a color-blind lens; this guide gives you the patterns to fix what you find. Six principles, each with the vision science behind it, the anti-pattern that violates it, and the concrete UI move that embodies it.

01

Never rely on color alone

The principle

WCAG 1.4.1 (Use of Color) is the single most-violated success criterion in accessibility audits[3]. It says color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing an element. Every color cue should be paired with a second, non-color channel: shape, icon, label, position, or texture. This is called redundant encoding, and it is the foundational move of color-blind friendly design.

In practice

Avoid
  • Form fields where errors are shown only by a red border
  • Charts where series are distinguished only by hue
  • Status dots (green/amber/red) with no label or icon
  • "Click the green button to continue" copy
  • Diffs (git, docs) rendered only in red and green
Prefer
  • Errors: red border plus an ⚠ icon plus inline text
  • Charts: hue + shape (○ ▲ ■) or direct labels on the line
  • Status: color + icon (✓ ! ✕) + a short text label
  • Copy: "Click Continue" — name the button, not its colour
  • Diffs: color + a leading +/− character
02

Prefer blue-orange over red-green

The principle

The retina has three cone types (S, M, L). Red-green CVD is caused by a missing or shifted M or L cone; the S (blue) cone is almost always intact[4]. That means the blue ↔ orange axis is preserved across all common forms of CVD, while the red ↔ green axis collapses for the ~8% who need it most. When you need a two-color qualitative palette — up/down, positive/negative, series A/B — reach for blue and orange (or blue and yellow) before red and green.

This is why data-viz research libraries (ColorBrewer, Viridis, Cividis) default to blue-orange or blue-yellow ramps: they are CVD-safe by construction[5].

Safe palette starters

  • Two-series qualitative: #1f77b4 (blue) + #ff7f0e (orange).
  • Sequential (one hue, light→dark): Viridis, Cividis, or a monochrome blue ramp.
  • Diverging (negative↔positive): blue → light grey → orange. Avoid red → green.
  • Status trio: blue (info), amber-orange (warning), magenta or dark red with an icon (error).
03

Contrast beats hue

The principle

Color-blind users often distinguish elements by luminance (how light or dark a color is) rather than hue. Two colors of similar lightness — a mid-green and a mid-red at the same brightness — can be indistinguishable to a deuteranope even though they are opposite ends of the hue wheel[6]. Push the lightness apart and the pair becomes readable to everyone.

Target contrast ratios:

  • Text vs background: ≥ 4.5:1 (WCAG AA) or ≥ 7:1 (AAA) for body copy.
  • Adjacent UI colors (chart segments, button vs page, focus rings): ≥ 3:1 (WCAG 1.4.11).
  • Focus indicators: ≥ 3:1 against every state they appear over.

Check pairs with a WCAG contrast tool, not by eye. Photoshop's Proof Colors (Color Blindness → Deuteranopia) or Sim Daltonism give you a live preview; the OCXLY simulator does the same in the browser.

04

Pattern-based alternatives to color coding

The principle

When color must encode a category (choropleth maps, stacked charts, badge systems), add a second channel: pattern, texture, or shape. This is the visualisation equivalent of a screen-reader label — invisible to sighted users who don't need it, decisive for users who do[7].

Concrete patterns

  • Charts: pair each series with a marker shape (circle, triangle, square, diamond). SVG stroke-dasharray for line charts.
  • Bar/stack fills: hatching, dots, diagonal lines (CSS background-image patterns or SVG <pattern>).
  • Maps: combine hue with texture overlays, or use only luminance ramps.
  • Tags/badges: icon + short label; color is decoration, not identity.
  • Kanban columns: title + count + colour band, never just a bare colour bar.
05

Design for deuteranopia first

The principle

Deuteranopia (green-cone insensitivity) and protanopia (red-cone insensitivity) together account for ~99% of inherited CVD[2]. The two look similar in simulation but not identical: reds appear darker to protanopes and can drop below the WCAG contrast floor even when they were fine for deuteranopes. Design your palette against deuteranopia, then verify against protanopia and tritanopia in that order.

The three-check workflow

  1. Deuteranopia — the majority case. Fix the palette until every information-carrying color pair is distinguishable.
  2. Protanopia — mostly the same fixes, but re-check contrast on any reds; darken them if needed.
  3. Tritanopia — rare, but confirm blues and yellows are still distinguishable from greys.

Run the whole flow through the OCXLY simulator as a final gate before ship.

06

Give users control

The principle

Some CVD users have their own preferred visual accommodations — a high-contrast mode, a pattern-heavy chart style, a specific colour override injected by an OS-level filter (macOS Color Filters, Windows Colour filters). The most accessible move is to respect the user's own settings and add a first-party option: a "high contrast" or "colour-blind mode" toggle that swaps red-green pairs for blue-orange and reveals shape/pattern layers on charts[8].

Persist the preference locally (e.g. localStorage) so it survives reloads. Never gate it behind an account — accessibility settings are not features.

Implementation notes

  • Expose a "Color-blind friendly mode" toggle in the same panel as dark mode and font size.
  • In that mode: replace red-green pairs with blue-orange, thicken focus rings, and reveal pattern fills on charts.
  • Honour prefers-contrast: more automatically for users who set it OS-wide[9].
  • Ship semantic HTML: even with the wrong colours, a screen reader still narrates "error" instead of "red".

Frequently asked questions

What are the safest colors for color-blind users?

Blue and orange, or blue and yellow. The S (blue) cone is preserved across all common forms of CVD, so any palette that leans on the blue axis for its main contrast stays readable. Avoid red-green pairs of similar lightness.

Is a red-green palette ever acceptable?

Only when the red and green have very different lightness values (so luminance alone separates them) and a second non-color channel — icon, shape, or label — carries the same information. Even then, blue-orange is a lower-friction default.

How do I test my design for color blindness?

Run screenshots through a simulator: the OCXLY color blindness simulator, Sim Daltonism (macOS), or Chrome DevTools → Rendering → Emulate vision deficiencies. Verify contrast ratios with any WCAG contrast checker.

What contrast ratio do I need for color-blind users?

The same WCAG targets apply: 4.5:1 for body text, 3:1 for large text and non-text UI elements. Color-blind users lean harder on luminance contrast than trichromats, so meeting these ratios is even more important, not less.

Should I add a dedicated color-blind mode?

Yes, if you use color to convey status or category in critical flows (finance dashboards, medical UIs, data viz tools). The mode should swap red-green pairs for blue-orange, add pattern fills to charts, and persist across sessions.

Does dark mode help color-blind users?

Not automatically. Dark mode changes the background luminance but not the hue relationships — a red-green chart is still red-green on a dark background. The fixes in this guide are orthogonal to light/dark theming.

References

  1. Birch, J. (2012). Worldwide prevalence of red-green color deficiency. Journal of the Optical Society of America A, 29(3), 313–320. doi:10.1364/JOSAA.29.000313
  2. Deeb, S.S. (2005). The molecular basis of variation in human color vision. Clinical Genetics, 67(5), 369–377. doi:10.1111/j.1399-0004.2004.00343.x
  3. WebAIM. (2024). The WebAIM Million: Annual accessibility analysis of the top 1,000,000 home pages. webaim.org/projects/million.
  4. Neitz, J., & Neitz, M. (2011). The genetics of normal and defective color vision. Vision Research, 51(7), 633–651. doi:10.1016/j.visres.2010.12.002
  5. Nuñez, J.R., Anderton, C.R., & Renslow, R.S. (2018). Optimizing colormaps with consideration for color vision deficiency to enable accurate interpretation of scientific data. PLoS ONE, 13(7). doi:10.1371/journal.pone.0199239
  6. World Wide Web Consortium (W3C). (2023). Web Content Accessibility Guidelines (WCAG) 2.2 — Success Criterion 1.4.1 Use of Color and 1.4.11 Non-text Contrast. w3.org/TR/WCAG22.
  7. Cleveland, W.S., & McGill, R. (1984). Graphical perception: Theory, experimentation, and application to the development of graphical methods. Journal of the American Statistical Association, 79(387), 531–554. doi:10.2307/2288400
  8. Jefferson, L., & Harvey, R. (2006). Accommodating color blind computer users. Proceedings of the 8th International ACM SIGACCESS Conference on Computers and Accessibility (Assets '06), 40–47. doi:10.1145/1168987.1168996
  9. Mozilla Developer Network. (2024). prefers-contrast — CSS media feature. developer.mozilla.org.
  10. Colour Universal Design Organization (CUDO). (2006). Colour Universal Design (CUD) — how to make figures and presentations that are friendly to colourblind people. jfly.uni-koeln.de/color.