Roughly one person in twelve does not see color the way you do. If your interface tells people what is wrong in red and what is fine in green, a large share of your users are reading a screen where those two cues look almost the same. Color blindness is not rare and it is not a small edge case, it is a normal part of any audience. Here is what it actually is, what each kind does to a color, and how to design so everyone can read your work.
What Color Blindness Actually Is
Normal color vision runs on three kinds of cone cell in the eye, each most sensitive to one band of light: long wavelengths (the reds), medium (the greens), and short (the blues). Every color you see is your brain comparing the signals from those three cones. Take one cone away, or shift where it is most sensitive, and some colors that used to look different start to land on the same signal.
That gives four families, one named for each affected cone plus the case where color drops out altogether. Every family comes in two strengths: an anomaly, where the cone is present but shifted, so the loss is partial, and the stronger form where the cone does not work at all. The sections below walk through each one, and the simulator after them lets you push any color through all of them at once.
Protan: The Red Cone
Protan deficiency sits on the long wavelength cone, the one tuned to red. In its milder form, protanomaly, that cone is shifted toward green rather than missing, so reds look duller and noticeably darker than they should. A bright warning red can read as a muddy brown, and a red sitting on a dark background can sink so far it nearly disappears. In the stronger form, protanopia, the red cone does not function at all: red and green collapse into the same range, and reds lose so much brightness that crimson can pass for black. Protan affects a little under one in a hundred men. Its signature is not just confused hues but lost luminance, so a design that leans on red to mean stop or danger is leaning on a color that, for these readers, is both the wrong hue and too dim to stand out.
Deutan: The Green Cone
Deutan deficiency sits on the medium wavelength cone, the one tuned to green, and it is the most common form of color blindness by a wide margin. The milder form, deuteranomaly, shifts the green cone toward red and affects roughly one in twenty men, often so gently that the person never gets it diagnosed. The stronger form, deuteranopia, removes the green cone entirely. Either way the result is red-green confusion, but unlike protan it keeps brightness mostly intact, so reds and greens do not darken, they simply slide toward the same olive or khaki tone. This is the family most worth designing for, both because it is the largest and because its confusion is the quiet kind: a red and a green that look like clear opposites to you can read as two shades of the same muddy color to a deutan reader.
Tritan: The Blue Cone
Tritan deficiency sits on the short wavelength cone, the one tuned to blue, and it is far rarer than the red-green families, affecting well under one percent of people. Unlike protan and deutan it is not sex-linked, so it shows up about equally in everyone. The milder form, tritanomaly, and the stronger tritanopia both pull blue and yellow toward each other: blues can drift toward green, and yellows can fade toward pink or grey. Because so much interface design uses blue for links, focus rings, and primary actions, a blue that no longer separates cleanly from the green or grey around it is a real problem for this group, even though they are a small slice of the audience.
Monochromacy: No Color At All
The last family is not about a single cone but about color washing out almost entirely. In its partial form, achromatomaly, hues are heavily muted; in full achromatopsia, vision runs on brightness alone, the way a black and white photograph does. It is the rarest case, and it often comes with extra light sensitivity. For these readers no hue carries meaning at all, which makes them the clearest test of a simple rule: if your design still works in pure greyscale, where only light and dark remain, it works for everyone. If two things are only told apart by their color, they vanish here completely.
See It For Yourself
The quickest way to understand all four families is to watch a single color pass through each kind of vision at once. Pick a color below and the panel shows it beside how it is perceived under every deficiency, grouped by cone family, the real color on the left of each pair and the simulated one on the right.
Try a red next to a green. For most deficiencies they slide toward the same muddy tone, which is exactly why a red and green that read as opposites to you can read as the same thing to someone else.
Why It Matters For A Screen
The trap is carrying meaning with color and nothing else. A status dot that is red for down and green for up, a chart whose only key is its line colors, a form field that turns red when it is wrong, a link that is only a different color from the text around it: each of these vanishes the moment red and green collapse into one. The information was real, it was just locked behind a cue that not everyone can read.
None of it means avoiding color. Color is one of the fastest signals you have, and it should stay. It just should never be the only signal.
Designing So Everyone Can Read It
A few habits cover almost all of it:
- Pair every color cue with a second one. A red error also gets an icon and a message, a green success also gets a checkmark, a chart line also gets a label or a different shape. Remove the color in your head and the meaning should survive.
- Keep contrast strong. Color blindness lowers how much hue you can lean on, so brightness contrast does more of the work. This is the same contrast you check for readability in general, covered in the readability post.
- Watch the classic confusing pairs, red against green above all, but also blue against purple and green against brown. If two colors must be told apart, give them clearly different brightness too.
- Test with a simulator before you ship, not after. Run your key screens through each deficiency the way the panel above does, and fix anything that stops making sense.
Reading It Back
Color blindness is common, it mostly shows up as red-green confusion, and almost all of it is handled by one rule: never let color be the only thing carrying the message. Pair it with text, shape or contrast, and the same screen works for everyone.
To take any color apart yourself, drop it into the Codigrate color tool, which simulates all eight deficiencies and scores the contrast, the same checks worth running on every color you ship.
