No cool facts to back up my theory but I feel that a lot of web designers, especially those who don’t do any actual coding, don’t care that much about accessibility. Or they think it’s up to the programmer and/or tester. Sooo wrong! As a designer you are just as responsible.
Why this a11y stuff?
”Did you test this design?” That’s a question I want to ask sometimes when I get a psd-file for a new web site. Sometimes I do ask. Sometimes I go ahead and make some tests myself. What tests? Well there are many tests you can do to make sure that your design is right. I felt like I couldn’t cover them all in one post. So instead I decided to make an article series. This post is the first one and it’s all about contrast.
Why is contrast important?
First of all, not everyone have your falcon eyes. Yes really. People do have bad eyes, color blindness or other impairments.
Second, not everyone is sitting on your 27” iMac. They might be on a crappy old screen and no, it’s no ok to tell them to get a Mac.
How do I test for contrast?
According to WCAG 2.0: “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)”
Well what’s that ratio stuff? I’m not good with calculating myself so I will not try to go into any deep explanations. But there are some good tools out there to help us.
1. Color Contrast Analyser – A program that you install on your computer. Both Windows and Mac. (YSlow legend Steve Faulkner was involved in this one. Just saying…)
2. Color Contrast Check – A tool made and hosed by designer and developer Jonathan Snooks (quite famous guy as well…)
3. Contrast Checker – Another web based checker.
Do you test for contrast? Do you know other tools?
Let me know!
This was a11y* for designers numero uno and I’m out.
*a11y is an abbreviation of the word accessibility where 11 is the number of letters that was left out of the complete word