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.
Date Submitted: Friday, 25 March 2005
Author: Jim Byrne
Position:
Website: Guild of Accessible Web Designers
Bio:
Copyright © 2002, 2003, 2004, by Jim Byrne. All rights reserved. Jim is a recognised authority on accessible web design, author of Making Websites Accessible (SAIF, 2002), and Accessible Web Typography (ScotConnect 2003). He was a founder member of the award winning, accessible web design consultancy established in 1996, 'The Making Connections Unit' (http://www.mcu.com).
Date Created: 25-Oct-2007
Last Updated: 25-Oct-2007
Permalink: [link]
Articles
- 3 Tips: Free Bobby, Free Waizilla, and use Acrobot
- A better approach is to design pages so that the presentation of content can be changed by the end u
- Add structural meaning to image based headings
- Associate form fields explicitly with their labels
- Decide whether your non-text elements are functional, decorative or providing content?
- Develop your sites for a standard compliant browser
- Don't rely on automated tools for checking web accessibility
- Don't use HTML & CSS color attributes
- Don't use the statistics defence as a reason to exclude people from your content
- Download ready made style sheets to meet your access needs
- How to hide a flash
- How to make client-side image maps accessible
- How to make your pages validate when they include urls with ampersands (&'s) in them
- If you need help, ask an expert!
- Layout your forms using CSS instead of tables
- Make HTML pages created from MS Word more Accessible
- Structure your menus by marking them up as lists
- The Flash Satay method to embed flash in your pages and support standards
- Understanding colour contrast and accessibility
- Use absolute size keywords to set the text size on your pages
- Use alternative style sheets to give users control of critical elements such as text size or colour
- Use favelets to check validation and accessibility of your web pages
- Use Javascript to add default text to input fields
- Validate when using blockquote
- Web accessibility for deaf people
- Web Accessiblity Toolbar for Internet Explorer
- What is the object element for?
- When a link falls at the end of a sentence always put the full stop outside the anchor tag
CATEGORY INDEX
Site Sponsors
- Attitude e-media designs websites to be mobile ready, adhere to international standards, and be an attractive online business entity, including hosting services.
- TOLRA Micro Systems Limited offers web design, e-commerce enabled sites, web hosting, and off the shelf scripts, such as the TOLRA php Directory Script
