Colour Contrast / Color Contrast for Accessibility
Thursday, 13 August 2009
So, Colour Contrast.
Some users with cognitive or visual impairments can have difficulty distinguishing and making sense of foreground text against certain background colours.
I'm sure we have all been on websites where there is a terribly bold background pattern that prevents you from being able to read the text in the foreground. Many MySpace, Bebo and WYSIWYG personal webpages pages have this problem!
Displaying text which is legible is useful for everyone, but especially for those with special requirements.
The most important thing to ensure is that the contrast between the foreground and the background colour is sufficient to enable easy reading. The most extreme examples are black text on white background, or white text on a black background. There are algorithms to ensure that the contrast is sufficient, but I won't go into those just now (feel free to get in contact if you would like an explanation!). The general rule I like to follow as an initial test is to imagine if your page was presented on a black and white screen- would the text and imagery be suitably clear?
Another consideration should be your users with colour blindness. Colour blindness is basically the difficulty distinguishing between different colours. e.g. red and green may appear virtually the same to a colour blind users. Therefore, it is important that colour is not used as the sole differentiator for areas of your webpage. For example a statement such as "click on the red button to stop, and green to start", could be problematic for some.
Here is a useful accessibility tool that I have used in previous accessibility projects. It is called the Accessibility Color Wheel. Move your mouse over the 'wheel' to see different coloured text presented against a background colour of your choice. If it meets the recommended WCAG 2 contrast ratio, the tool displays 'OK!'. The tool can also be used to test for Colour brightness / difference. Give it a go!
Hope this brief description of colour contrast was useful. If you have any further questions, please don't hesitate to contact me directly at : Simplicity User Experience Optimisation.
Posted byCharlie M at 09:18
Labels: accessibility, color contrast, colour contrast