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.

Accessibility and Usability: The first steps

Often I have been asked about the differences between accessibility and usability or which of them is more important. The truth is they tend to be used interchangeably and are equally important.

How I View the Terms Accessibility and Usability

My own view is accessibility will tend to refer to people having access to something. Where as usability is more about people being able to use something. As an example if a building has a flight of stairs leading to the door, people with mobility issues are going to have difficulty accessing the door. However, if the door was made of heavy stone and required great force to open it, many people will not be able to open it despite being able to access the door.

In the world of web accessibility, sometimes abbreviated to A11y, the term accessibility is broadly used for both access issues and usability issues. The term usability is generally used to define the ease of using any web interaction. Things like getting around a site or finding relevant information. In both cases it is about people interacting with your website through a wide range of web enabled devices.

WCAG2.0 and Accessibility

The WAI (Web Access Initiative), part of the W3C (World Wide Web Consortium), have produced WCAG2.0 (Web Consortium Access Guidelines). These are there to help web designers, web developers and web content authors produce accessible websites. However, it is not an easy read and without knowing a little about the people the guidelines are designed to help, it can be quite overwhelming.

So to help make those first steps, we will talk a little about people. After all, your website is potentially the most accessible communication media you have available to you.

Knowing your Audience

Firstly accessibility and usability effects everyone not just people who may have a physical impairment. If something is difficult or frustrating to use, most people will give up and look else where. If your website only works on one browser with specific add-ons installed at a particular screen resolution, it will limit the number of people who can use your site.

Secondly never assume, if your site is selling sports cars don’t assume that just because a visually impaired person can not drive one, that they are not going to buy one. People buy gifts, collectables and may appreciate all kind of things.

It is true many people with impairments can gain the most from accessible websites. It can be their life-line into equality and communication networks. A few examples may include elderly people who are not very mobile or live in remote locations or people who have a physical impairment such as hearing loss or visual impairment. It is worth remembering many people may have multiple impairments such as sight and hearing loss and these can be at varying degrees. There are other impairments that can effect many people like dyslexia or ADHD, these people are often effected by things like the use of colour or time sensitive tasks.

Understanding Disability Groups

I have broadly categorised disabilities into five groups below. Each category has a link to an article on Webaim, where you can read more about the disability and its effect with the web.

By understanding these broad groups of disabilities and the assistive technology people use to access the web, you can better appreciate the WCAG2.0 guidelines and why they exist.

Have your say

Tell us how you view the terms accessibility and usability, has it been a subject of controversy?