Color Blindness

Color is the cheapest signal a screen has. Paint the good rows green and the bad rows red and a whole list becomes readable without a word of explanation. It costs no space and needs no translation, which is why color got reached for first almost everywhere a status had to be shown.

Then it turned out that for some users that list is twenty gray dots. The ability to separate colors varies from person to person, and roughly one man in twenty perceives red and green as close to each other. It's far rarer in women, around one in two hundred. Common enough that a product with ten thousand users has several hundred of them.

In practice it arrives as a support ticket. Something like "I only want to see the failed payments and I can't tell which rows those are" comes in, and the team that built the screen doesn't understand it at first, because the failures are clearly marked in red. It takes a while to register that the complaint isn't "I can't see the color" but "it looks the same as the row next to it."

So accessibility guidance doesn't say to stop using color. It says color must not carry information on its own. The color stays; a second signal goes next to it. With two signals, someone who misses one reads the other, and everyone who gets both reads faster.

Wherever color makes a distinction, add one signal that isn't color. Nothing gets taken away — the color stays exactly as it was.

The added signal is usually one of three.

1. Shape — a check mark for success, an exclamation mark for failure. A list whose rows differed only by dot color now differs by shape too, so the rows separate even when the colors don't.
2. Text — the words "Success" and "Failed" beside the dot. It costs a little space and it is the most reliable option, and it carries through to a screen reader, the software that reads a screen aloud.
3. Pattern or weight — one line solid, the next dashed, on a line chart. When a chart has several lines that differ only in color, there is no way to match a legend entry to a line.

Brightness gets checked separately. Two colors can differ in hue and still land as the same gray for an eye that can't separate them, if their brightness is close. WCAG, the international standard for web accessibility, sets a brightness ratio of at least 4.5 to 1 between body text and its background. Apply the same bar to two colors used side by side and the distinction survives on brightness alone.

Checking takes two passes. Render the screen in grayscale; if the distinction is still there, it passes. Then look again through a tool that simulates reduced red-green separation. Red-and-green pairings are what fail most often, and switching them to blue and orange resolves most of it.

Status indicators are the first thing to fail. A list that separates success, pending, and failed by dot color, or a badge that reports a count while using color to signal how urgent it is, both land here.

Input forms carry the same problem. A red border around a badly filled field, on its own, doesn't tell the user which field is wrong. Keep the border and put a sentence under the field saying what's wrong with it. That sentence is information every user needs anyway, whatever their color vision.

Data visualization uses color more heavily than anything else, so the impact is largest there. A chart with five lines whose legend is color-coded gives the reader no way to pair a line with a value. Label the lines directly at their ends, or vary the line style. On a map that encodes magnitude as a color ramp, print the numbers as well.

Deciding it once cuts the repetition. A design token is a named value for something like a color or a spacing step, shared between design and code. Bundle each status color with its icon in the token itself and every screen built afterward satisfies the condition automatically. That holds up far longer than remembering it screen by screen.

"This is only distinguished by color, so it won't pass. Let me add an icon."

The most common note in a design review. It isn't a request to remove color, it's a request to add one more thing.

"Screenshot it in grayscale — if you can still tell them apart, it's fine."

The check reduced to one line. It needs no tooling, which is why teams use it as the baseline pass.

"Just avoid red-green pairs and most of it goes away."

Reduced red-green separation is the most common type, so changing that one pairing covers most affected users.

At Pagedeck the sharing status in the document list was the first thing to fail. Public documents had a green dot, private ones gray, and expired links red — and a customer wrote in saying they couldn't find their expired documents. Noa added a lock, a globe, and a clock icon to the three states and left the dots alone. Theo wired the icon names through so a screen reader announces them too, and the same change ended the tickets.

The team now settles on an icon whenever it defines a new status color. This ticket is where they confirmed that pairing the two up front is much cheaper than retrofitting one later.

Most people assume that someone who can't distinguish colors sees the world in black and white. The name suggests it, so the assumption is a fair one. Seeing every color as gray is in fact very rare; the usual case is perceiving one pair of colors as close to each other. Red and green is the most common pair, blue and yellow the next. Left in place, this assumption sends the fix in the wrong direction — teams start desaturating the whole interface while the red-green pairing that caused the problem sits there untouched.

The second is reading the rule as an instruction to stop using color. Color is named as the problem, so removing it feels like the safe move. But color is the fastest signal most users have, and stripping it slows everyone down while helping nobody. The condition is not "don't use color," it's "don't let color be the only carrier." Miss that distinction and the team files the whole thing under costs it has to absorb, and the next screen goes back to color alone.