What Happens When Users Can't See Red

Written on February 19th, 2013. We've got comments, too!

There’s a terrible truth to how we imagine colors in interfaces. Sometimes what you see doesn’t really match what other people see.

Please submit the following form. Options in red are required.

demo

Would you write a user biography? Would you know what format to write your date of birth in? Would you even submit the form, since there’s obviously no red on it?

I was looking over a friend’s latest work when I stumbled upon his idea of error messages: red text, written in small letters above the form. His teacher told him that “any user would immediately recognize and react to the red text”. He even justified it by pointing out how red text is used all over the world for “warning”.

Sadly, that’s not true.

See that form up there? That’s how a good 1% or so of people see red text.

The culprit is Protanopia. It’s a form of color blindness that makes it hard to tell red from green, and yellow to blue.

If that doesn’t sound alarming to you, it should!

This is how the above form would look otherwise:

demo-2
If you can’t tell the difference, don’t worry.

If you look closely at the first image, you’d notice that some text was in a very dull shade of green; that’s how red looks to people with protanopia. Couple that with a screen not very well lit or calibrated, and it’s clear how making text red is almost invisible to some people.

It’s not rare at all, either; protanopia is one of the most common forms of color blindness. About one to two percent of males have it, while a smaller portion of females have it too. That means there’s a dozen or so affected people at your average rock concert.

So next time, highlight stuff with more than color alone. Put it in a box - use a warning icon. Make it bolder. Write it somewhere distinct.

Tip: You can also test your site, app or graphics with the really cool Color Oracle tool!