Time for the second part in the articles about a11y for web designers. In response to the comment we received to our first article I felt a need to start by making a couple of things clear.
These articles aren’t about trying to force people into something that will steal time and hurt the overall design of their projects. My intention with these articles, as I mentioned in my comment, is to raise some sort of awareness of accessibility among designers. I’m of the strong opinion that the web should be open, free and accessible to as many people as possible regardless of equipment or physical state. I do not agree with people who think the web should only be accessible if you got the latest in technology or a perfect health. Of course it’s not always possible to accommodate for everyone. But having accessibility in mind doesn’t cost anything. I would also like to point out that the tools I link to in these articles are simple test-tools that requires a maximum of minutes in test time.
What about colors?
So back to the topic. There are two things I would like to point out regarding colors. First: I love color. No that’s not it. First: (second try). All colors doesn’t look the same on all devices and screens. This is important to remember. Secondly: There are some combination of colors that some people have trouble to different between. Yes, I’m talking about variations of color blindness. Between 7 – 10% of all males are affected by the red-green type. Because of this it’s necessary to make sure that the most important elements on your web site is easy to distinguish. Elements to check may be navigation, buttons that leads to different kind of actions and other important information.
How do I test my colors?
There are several cool tools out there. I will mention a few here.
1. One really cool tool available for Mac is Sim Daltonism. With it you can simulate different kinds of color blindness and look at your design in a way a person with color blindness would.
2. Coblis – Color Blindness Simulator is an online tool that lets you upload an image to check for problems.
3. Colorfilter is another online tool that lets you test a website. I don’t really know how useful like this is since when there is a live web site it’s usually too late or extremely hard to adjust things.
4. Send your design to friends. Yes, I know. This is not a tool. But consider sending your design to some friends. If possible friends with color problems and ask for their opinion. If nothing else they might be able to track down problems in colors due to differences in screens and devices.
If you feel an urgent need to find out more about color blindness the blog “Grey Means Go” offers some nice reads.
That’s it for now.
Have fun designing with colors!
/Ida
