[Skip navigation] home | about MCU | Services | learn accessible web design | tips archive

contact   
RSS syndication for MCU   

Check colour contrast by creating a greyscale image of your web page

This very simple tip will help you to check whether the colours you have chosen for you web pages have adequate contrast.

Take a screen shot of one of your web pages, and open it up in a image editing program (e.g. photoshop). Desaturate the image to remove all colour, so that you end up with a greyscale image.

Viewing the page as a set of contrasting grey areas, makes it much easier to see whether, for example, there is sufficient contrast between the background colour and text. I was reminded of this tip while reading the Techdis article Colour & Contrast Accessibility Issues: for the design of e-learning materials by EA Draffan and Peter Rainger.

Contributed by Jim Byrne
Updated Wednesday 12 Nov 2003


Free weekly accessible web design tip

Register for your weekly accessible web design tip 
Email: