Accessible use of colour in web design

Transcript

Hi, I’m Gosia from Nomensa and today I’m going to be talking about the importance of the correct colour use on websites.

Colour is very important feature in Web design. It is used not only to enhance aesthetic appeal of the pages, but also to increase their usability and accessibility.

Sometimes on websites different colours have different meanings assigned to them. Although for most of the users it can be really useful, we have to remember that some people can have difficulty perceiving colour, or they may be using text-only, limited-colour or monochrome displays and browsers. That’s why when designing a website you should ensure that the information conveyed with colour is also provided through another means.

Let’s take a look at a simple mockup page on which some information is presented only in colour. There are three areas on the page where the colour is used to convey the information:

The first one is the calendar, where different background colours are used to indicate days, when the chosen boat is either unavailable (dates with grey background), or on special offer (yellow background for 20% rent discount, and a green one for 50% discount);

The second area contains two buttons, yellow and green, which generate lists of all dates when the boat rent is discounted by a certain amount (20% and 50% respectively);

The third area is a form, where mandatory fields are indicated by labels displayed in red.

For users who don’t have problems with perceiving colours and those who use colour displays, the instructions on the page are understandable and easy to follow. But let’s see how this page would look for users who can’t rely on colour cues. As we can see, without the colour a lot of information on the page loses its meaning. We are no longer able to see when the boat is unavailable for rent, or which special offer is valid on which day. Also distinguishing between buttons becomes impossible, and identifying mandatory fields in the form very difficult.

To fix the problem, we have to ensure that all information conveyed by colour differences is also provided in text. Let’s see how we can modify our page to address the colour issues. In the calendar, we added additional textual cues: the dates when the boat is unavailable are now also indicated by a strike-through text decoration, and dates with 20% and 50% discount are marked with a single and double pound symbol respectively. We’ve also added text to the buttons, to make it easy to distinguish them. In the form, mandatory fields are identified by both colour and an asterisk. Now the information on the page does not depend solely on colour and can be understood by all users.

So remember that whenever you assign special meanings to colours, you also need to provide other means of conveying the information. By doing that you ensure that your pages comply with the WCAG success criterion 1.4.1 – Use of colour.