Web Access Centre

Colour contrast - Web Access Centre

Summary: Good contrast is essential for people with reading problems and low vision.

• Rationale
• Techniques
• Testing techniques
• Further information
• Website Accessibility Initiative compliance
• Other pages about colour

---

Rationale

People with cognitive or sight problems may have difficulty reading and distinguishing text from a background colour. This is generally caused by poor choice of colour and contrast in the design of the page. Background images and patterns may also cause problems of legibility.

Creative use of colour and contrast can dramatically enhance the accessibility of a website. It can be as important for people with sight problems as it is to people who have dyslexia or whose first language is not the main language of the site.

Everyone benefits from text which is both easy on the eye and that is easy to follow. For example, people with dyslexia benefit from good contrast as this can help make the structure of words and sentences easier to understand.

Techniques

• High contrast must be provided between text and background colours. Pale blues and grey will not be easy to read on white backgrounds but dark blues, black or reds will.

Examples of good contrast

Examples of poor contrast

• Bold and large fonts can sometimes compensate for colour contrast that is a boarder line fail using the WAI algorithm. If a piece of text is large, then the contrast may be less critical. Good judgement is required to assess this.
  
  
• Colour blindness affects the way that certain colours differ from others. Red and green, for instance, can appear to be virtually the same to some users. Ensure that you choose colours that have a good differentiation for people with colour deficiency. You can find out more on the Vischeck web site, a link to which can be found below, under Further Information.
• Images must also have good contrast, especially if there is text on the image. Always check that logos are high contrast and tag lines within logos are readable.

Ensure that images do not lose definition when style sheets are disabled. This can result in text appearing transparent on an image. To prevent this, ensure there are no transparent colours around the text on the image.

• Background images can sometimes interfere with the legibility of text. Watermarks or patterns can be problematic so where possible avoid them, or ensure they are either not behind text or that they do not interfere with its legibility.

Testing techniques

Verify that text is clearly readable and that colour combinations are unlikely to present difficulty for people with colour deficits.

• Accessibility toolbar - Go to Colour - Colour Contrast Analyser. This is a tool that can check the contrast of foreground and background colour against WAI algorithms. If a colour combination is a borderline fail it is sometimes an acceptable solution to increase the font weight of text (eg making it bold) or underlining link text (if it is link text rollovers that reduce contrast). Good judgement is needed.
  
  Also go to Colour – Vischeck colour blindness simulator, and enter the web address of your test page in the form provided, to see what it would look like to people with a range of colour deficits. Again good judgement is required.

Further information

• Colour Contrast Analyser - Developed by Vision Australia the CCA checks for brightness and contrast against WAI algorithms. It is a useful tool that has a colour picker that can be used to pick up on colour in images as well as text.
  
  
• Vischeck - This is a tool that can be used to simulate the effect of colour blindness on your page colours.
  
  
• Effective colour contrast - Designing for people with partial sight and vision deficiencies from Lighthouse International.

Website Accessibility Initiative compliance

• 2.2 Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen. Priority 2 for images, Priority 3 for text.

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about colour

• Colour used alone
• Contrast

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41