# Designing for Color Vision Deficiency > Color blindness, explained for design: the kinds, why red and green get confused, and how to build interfaces everyone can read. Simulate any color live. - URL: https://codigrate.com/blog/designing-for-color-blindness - Published: 2026-06-24 - Category: Accessibility - Publisher: Codigrate (https://codigrate.com) 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](https://codigrate.com/blog/introduction-to-readability). - 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](https://codigrate.com/tools/color/00BAFF), which simulates all eight deficiencies and scores the contrast, the same checks worth running on every color you ship. ## Frequently Asked Questions ### What is color blindness? Color blindness, or color vision deficiency, is when one of the eye's three types of cone cell is missing or shifted, so some colors look the same that look different to most people. It is almost never total. Most people with it see plenty of color, they just confuse certain pairs, most often reds with greens. ### How common is color blindness? Common enough that you are designing for it whether you plan to or not. Around one in twelve men and one in two hundred women have some form of color vision deficiency. On a page with a few thousand visitors, hundreds of them are not seeing your reds and greens the way you do. ### What are the types of color blindness? There are four families, three named for the affected cone plus the case where color drops out. Protan involves the red (long-wavelength) cone and makes reds look dark and dull; deutan involves the green (medium) cone and is the most common; both cause red-green confusion. Tritan involves the blue (short) cone and confuses blue with yellow, and it is rare. Monochromacy, the rarest, removes color almost entirely, leaving brightness alone. Each family comes in a milder shifted form and a stronger missing-cone form. ### How do I make a design color-blind friendly? Never carry meaning with color alone. Pair every color cue with a second signal, a label, an icon, a shape or a pattern, so a red error and a green success are still told apart with the color removed. Keep strong contrast, avoid red-on-green and similar confusing pairs, and check your screens through a simulator before you ship.