The Smart Design: Accessibility and Colour

Web design is commonly seen as a very visual thing and the use of colour plays a large part. However, often the way different people view colour is over looked. What I mean by this, is people with dyslexia or low vision or colour blindness will view colours differently. For example, many dyslexics prefer a light pink or yellow background instead of a bright white and people with low vision will often like a high contrast such as yellow on a black background. This will be a very individual thing and its not always possible to design for all eventualities, so how do we design for accessibility and colour effectively?

Accessibility and Colour in WCAG2.0

The WCAG2.0 have produced a few guidelines on the use of colour, to help us design accessible websites. These fall into two main categories: colour contrast and the use of colours. There are a few best practices regarding web development, these will be explained in a later post.

Colour Contrast

This is measured by a ratio difference between the foreground and background colour. There are free online tools like Webaim’s contrast checker that can help you with measuring the contrast ratio. The WCAG2.0 has two levels of contrast ratio, depending on the level of access you are aiming for.

The WCAG2.0 guidelines are divided into three levels of access: A, AA and AAA. Level A, is considered the bare minimum access, level AA, is considered a minimum standard by many for best practice where as level AAA is considered the highest standard you can aspire to. The guidelines for colour contrast are defined at levels AA and AAA. For each level, it has one minimum ratio level for standard text and another level for bold and large text. Standard text is any text up to 18PT or 14PT bold while bold and large text is from 14PT bold or 18PT regular and above.

The minimum ratios as stated in the WCAG2.0 guidelines are listed below:

  • 4.5:1 For level AA standard text (up to 18PT).
  • 3:1 For level AA bold text (from 14PT and above).
  • 3:1 For level AA large text (from 18PT and above).
  • 7:1 For level AAA standard text (up to 18PT).
  • 4.5:1 For level AAA bold text (from 14PT and above).
  • 4.5:1 For level AAA large text (from 18PT and above).

Using Colours

The WCAG2.0 guidelines advise to avoid using colour as the only means of identification of something. So things like press the green button for go and the red button for stop, should be avoided. This is to prevent the difficulties it will cause someone who can not either see the colour or be able to tell the colours apart. However, if you use colours to support or re-enforce the identification of something, it can be helpful to people. As for some people it is easier to refer to a colour than the text. So by using both, you can help a wider group of people use your site more easily.

Colour Preferences

You have probably seen on some websites links that make it easy for your visitors to choose between different colour schemes. Often listed as lower contrast, higher contrast, gray scale and regular contrast. These are often pared with links to adjust the text size up or down. However, for some people these options can be very helpful, for others it just adds to the number of links on every page that they need to tab through. As explained above, these colour preferences are very personal to each person and is difficult to accommodate for everyone. They are not a WCAG2.0 guideline and there is some controversy over if they should be used or not.

My personal view is that they are an optional extra and not a priority. I also feel that if used, they should either have a skip link for quick navigation over the multiple link options or be accessed through a single link to the multiple colour preferences. This way there is less additional tabbing through these colour preferences for keyboard and voice dictation users. I have seen some terrible implementations of colour preferences, from mouse only controls to floating transparent controls, each giving access issues to different groups of people, so instead of helping, it adds a layer of poor accessibility.

Have your say

  • What are your views on having colour preference links on a website?
  • Do you have a preferred colour scheme you find easier to read?
  • Do you have colour preference links on your own site and how have you implemented them?
  • Have you seen any really good or really bad implementations of colour preference links?

Please feel free to answer any of the above questions or just tell us your experiences, preference or views on accessibility and colour in web design.