Web Accessibility — Colour
Posted on Thursday, September 27th, 2007
Try to read this myspace site, I dare you. There is text there, you can probably see, but I would rather copy the text into notepad and read it there than struggle on in my web browser.
MySpace is known for bad designs, but it can serve as an example for us when looking at what not to do.
Now I’m not suggesting that anyone actually involved in web design or development would consider using white text on a grey background, but it brings up an important point. Continuing from my earlier post, Web Accessibility — Not Just For The Blind, I have couple of pointers to consider when using colour on the internet.
Contrast
Hardly any sites are so bad that people with perfect vision have incredible difficulty reading, but the visually impaired, the colour blind and even people with black and white monitors or a bright light on their screen need enough contrast to pick out text from a background.
The Web Content Accessibility Guidelines have a formula to ensure that any important elements on a site, text being the most important, have enough contrast, but a formula is not that much use to you and I, we’d rather be designing or coding than playing with a calculator and hex or RGB values. There are a number of tools available that use the WCAG formula, as well as some other clever ideas and visualisations so that you can tell whether your colours are visible to everyone who may be visiting your site. I personally like using Jonathon Snook’s colour contrast checker, it is quick and easy and applies the recommendations in an intuitive way.
Don’t Represent Anything With Colour Alone
Returning to the case of the colour blind or those with black and white displays, it is also important that when highlighting elements on a web page that you don’t rely on colours alone.
Links are an ideal example to show this. By default they are blue and underlined. Since CSS gave us the ability to change that, taking away the ugly underline was the first thing I wanted to do! However, if you can’t see the different colours, how are you supposed to know where the links are? Underlining, changing the background, underline or the cursor when you hover all add up to make links more obvious to everyone.
Test Your Site
Roger Johansson recently posted a list of 10 colour contrast checkers. Some will do the simple checking like Snook’s tool, others show you what your site will look like to sufferers of different types of colour blindness and one will turn your site from colour to grey scale (it’s quite interesting actually).
Have a look at a few of the tools, does your website pass or are there any colour combinations you are going to have to think about?
Look out for more on approaching less obvious accessibility issues coming soon, and if there is anything specific you want to know about please let me know in the comments or by email.
If you enjoyed this post, why not subscribe to Unintentionally Blank
1September 30th, 2007 at 9:58 am
Darren Says:Nice article. I like that tool so thanks for that. I see this site works fine in greyscale. Top stuff lol.
2September 30th, 2007 at 11:58 pm
Phil Says:Darren, I must say, I was glad to see this all work in greyscale, it saved me a rework of the colour scheme before posting this! I’m glad I used Snook’s tool in the first place anyway, it always pays to do it right first time.
3October 1st, 2007 at 3:45 am
Nyssa Says:I probably should reconsider some of my “low contrast” colours though don’t have the heart to change it at the moment. lol But I really should, since I know better.
Perhaps with my redesign I’ll think harder on the colours I will use on my design. Not that I’m definitely redesigning, but it’s something I’m considering due to high demand of my current design.. might as well make sell it while there is some interest!
Anyway, nice article, Phil. Very useful! :)
4October 3rd, 2007 at 9:59 pm
Phil Says:Hi Nyssa,
Glad you have recognised that some of your colours are a bit close for comfort for some. Understanding is, obviously, the first step and now you know you should be able to watch out and make allowances when it comes around to redesigns or new designs.
Good luck, whatever you do with your design. I think it’s beautiful and that you should keep it, but if you have ideas for something even more stunning then sell this one and wow me again!
5October 5th, 2007 at 2:40 pm
mlankton Says:The internal name of my theme is AVE-Grayscale. I think I’m already there.
The only concern I have about my design is that some people may find it too dark. Me, I would rather read white on black than black on white.
6October 6th, 2007 at 2:42 am
Phil Says:Haha! If your design is already in greyscale you shouldn’t have too many problems with this area (as long as the contrast is kept up).
I think the preference over light on dark or vice versa is a very personal one. I myself prefer light backgrounds and dark text and find dark backgrounds over powering at times. Some sites choose to offer you both versions and that is something you can consider if your users do have strong preferences. Before you start thinking of that sort of thing, you do have to make your first design readable to as many people as possible.
Having looked at AVEnthusiast, I think you should be fine, but colour is something that isn’t to be forgotten every time you build a new site.