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 your web pages have adequate contrast.

Take a screen shot of one of your web pages, and open it up in an 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 and Contrast Accessibility Issues: for the design of e-learning materials by EA Draffan and Peter Rainger.

Call now to chat about your new website or WACG 2 accessibility audit: 07810 098 119.

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.