Designing for color-blind users (when red and green look the same)
Roughly one in twelve men and a smaller share of women have some form of color vision deficiency. Your success and error states might look distinct to you and identical to them — that is a product bug, not a edge case.
WCAG contrast ratios do not measure distinguishability between two hues. You can pass 4.5:1 on both red and green labels and still ship a chart where the lines merge into one muddy trace for someone with deuteranopia. Color-blind-friendly design means redundant cues: position, shape, labels, patterns — color supports the message, it does not carry it alone.
Stop encoding state with hue alone
Bad: red dot vs green dot with no legend. Better: checkmark vs warning icon, “Paid” vs “Overdue” text, different stroke dash patterns on charts. Status badges should pair background color with a word or icon. Tables that rely on cell background tint need a column header or symbol — finance teams live in these grids for hours.
Run your palette through the color blindness simulator after you pick semantic colors. It is not a legal test and it does not cover every type, but it catches the classic red/green dashboard mistake in minutes.
Pick semantic colors that separate by lightness
Two hues that confuse protanopes often still separate if one is noticeably lighter or darker. Orange vs blue tends to survive better than red vs green for many types — but do not trust rules of thumb without checking your exact hex pairs. The color blindness guide in our Learn section explains common types in plain language; use it when you are choosing a permanent success/error pair for a design system.
Direct-label lines, different markers (circle, square, triangle), and texture fills beat a legend with eight similar pastels.
Maps, heatmaps, and gradients
Rainbow scales are hostile. Prefer single-hue sequential scales (light to dark blue) or diverging scales with a clear neutral midpoint — and still add numeric labels on hover. If you must use red–green diverging data viz, add arrows, signs, or side-by-side numbers so the story does not depend on discriminating hues.
Work with engineering, not around them
Document allowed status combinations in the same place you document hex tokens. Add a quick simulator check to design review for any screen with more than two semantic colors. Pair with contrast habits from our accessible button colors post — legibility and distinguishability stack.
You will not simulate every viewer perfectly. You can stop shipping interfaces where “look at the green one” is the only instruction — that is a low bar worth clearing on every sprint.