Color Blind Friendly Color Picker

A color is considered color-blind safe when it remains distinguishable for people with all types of color vision deficiency. About 8% of men and 0.5% of women have some form of color blindness, most commonly affecting red and green perception. Our color blind color picker helps you identify these issues instantly.

The challenge? Colors that look completely different to you might appear nearly identical to someone with color blindness. Red and green can blend together. Yellow and blue can become confusing. This color blind color picker shows you these problems before your users encounter them.

The four bands above sit flush against each other on purpose. The useful question is not "what does this colour become" for any single vision type — it is whether the bands still look like different colours when placed side by side. If three of the four collapse into near-identical shades, the colour is carrying its meaning in a channel that a portion of your audience cannot read.

A worked example. Pick #3B82F6, a standard interface blue. Protanopia renders it #5F85FC and deuteranopia #4D74F3 — still unmistakably blue, because neither affects the blue cone. Tritanopia moves it furthest, to #1499A5, yet it stays clearly separable from red, amber and grey. Blue is a safe carrier of meaning.

Now the failure case. A mid-green #22C55E and a mid-red #EF4444 are about as far apart as two colours get in normal vision. Under deuteranopia the green becomes #A19263 and the red becomes #837442 — two similar olive-browns. Measured as RGB distance, their separation falls from roughly 244 to 54, a loss of about 78%. What survives is a small difference in lightness, not hue. This is precisely why a red/green status indicator fails, and why pairing colour with an icon or label is the standard fix.

"Passes WCAG AA" is not a property a colour has on its own — it is a property of a colour against a background. WCAG contrast is a ratio built from relative luminance, so a colour light enough to read on black is usually too light to read on white, and the reverse. That is why the Text Contrast Preview reports white and black separately rather than giving one verdict.

There is a narrow band that clears the 4.5:1 AA threshold on both. It requires relative luminance between roughly 0.175 and 0.183 — about eight thousandths of the available range — but it is genuinely populated. #006CFF sits inside it, reaching 4.58:1 on white and 4.59:1 on black. Colours in this band are the most portable choice for a design system that ships both light and dark themes, and the suggestion list above ranks them first when one exists near your colour.

For everything else, the honest answer is which background to pair it with. A colour at 6:1 on black and 2.8:1 on white is not a failure — it is a dark-theme colour, and the badges on each suggestion tell you which case you are in.

Color blindness happens when the cone cells in your eyes that detect certain colors don't work normally. Here's what each type affects: