But all the colors mix together – to grey. – Dave Matthews Band “Grey Street”
I wrote about my colorblindness yesterday.
It was hard to write that sentence, and even harder to write that post yesterday. I used the word ‘disability’ in my post yesterday. I didn’t put that word in there, my fiancee did. That’s how hard it is for me to write about it.
It shouldn’t be, but it is.
There’s embarassment, sure. Even more is that when you’re blind, people get why that’s an issue. There are best-practices out the wazoo. But when you’re colorblind, the level of caring about your web experience ranks somewhere between apathy and ignorance.
But it is a disability. It is not as severe as blindness or deafness, to be sure. But unlike blindness, it has no representation in the minds of website designers. It’s a non-issue.
At one time we had to worry about colors. Remember these?
We’ve come a long way in the battle for web design. We’ve even come to the point where we can laugh at our former works of art. At one time, there was a notion of web-safe colors. As soon as technology allowed, we tore down that wall and kept its ruins as mementos of a barbaric time. We congratulated ourselves and heralded a new age, instituting best practices for accessibilty and starting an entire cult based around fixing web accessibilty. We thought we won, but we didn’t.
Date Usability, Don’t Just Flirt With Her
Accessibility is usability’s sister. The one you have to impress to score a date with Usability. The annoying one that you’d rather tune out completely, but can’t. we missed this in our celebration.
Examples of our failure are everywhere, even from Google:
The annoying sister butts in again. Were it not for the numbers, there’d be no way for me to tell which one is which. Even with the numbers, I still have to do mental gymnastics, the very kind usability experts rail against.
Stack Overflow recently started including vote totals; If you click on a vote it tells you how many were upvotes and how many were downvotes. The original implementation (left) was fine. No need to change it. But the website creator decided to change it to a green color to indicate ‘good’ and a red color to indicate ‘bad’:
So, which one’s better? I see color, but they both look an annoying shade of red, one darker than the other. It would have been better never to institute the ‘fix’ at all. The newest iteration shows a + and a – next to the votes — which is also helpful, but it doesn’t take away from the pain the second image induces when I look at it.
Let me say that again:
Trying to distinguish red from green is painful.
Design for Colorblindness
You may wonder why you even need to design for colorblindness.
If you’re a web-based business, 1 in 12 of your customers are colorblind.
Here’s how to cater to the colorblind demographic:
1. Keep conflicting colors apart. Red and Green shouldn’t be in the same zipcode. We can see them fine when they’re apart, but when they’re together, we get headaches.
2. Study up on Colorblindness. See what it’s like to be colorblind.
3. Don’t use colors as the only distinguishing information; and obey rule #1.
4. If you must use colors (like on a graph) then make sure to use Colorblind safe colors.
Bottom line: paying lip-service to accessibility means paying lip-service to your customers.