Colour and contrast

What to avoid, User Specification

Colour and Contrast

The use of certain colour combinations can render materials inaccessible to students in the following groups.

  • People with colour deficient vision may be unable to use materials or follow an instruction which requires discrimination of colour, for example 'click the green arrow to continue will present problems to students with most common green and red confusion. Although much rarer, blue and yellow can also be confused.
  • Students with poor eyesight may have difficulty reading text which is in subtle contrast to the background.
  • For dyslexic students the high contrast of a white background and black text may be problematic. Students can rectify this problem these days by the use of appropriate assistive technology, applying their own style sheets or customising their browser settings.

For a good insight into types of visual impairment see WebAim’s Visual Disabilities page.

↑ to top

""

What to avoid

  • Colour-dependent navigation, with instructions such as "Click on the Red button". Remember, some of your student’s may be colour blind.
  • Materials which depend on colour for their correct interpretation. To gain an insight into the way in which people with various colour vision problems see images, see the online VisCheck simulator.
  • Subtly contrasting text. In the quest to produce cool looking pages and images readability is often compromised. WebAim’s contrast checker is an excellent easy to use tool for checking the contrast between background and foreground colours. Lighthouse International's Effective colour contrast pages is also worth checking. Another technique is to print off you proposed design in black and white and check whether it is readable, asking an independent advice! You could also try viewing your pages in greyscale http://graybit.com/main.php
  • Too many colours used on one page – as well as looking garish this can create confusion.
  • Heavily textured or patterned backgrounds which impose upon readability. There are numerous good blogs on the web these days where good design and readability are not compromised – see http://www.csszengarden.com/ for inspiration.

↑ to top

""

User specifications

Students using their own computers can change the font and background colour that is displayed by default in their browsers. The BBC Accessibility site MyWeb My way gives excellent advice on adjust computer setting, including for people who have difficulty seeing (BBC site).

↑ to Top

""