Accessible use of colour in web design

Accessible use of colour in web design
Captions for Accessible use of colour in web design

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.

Share this post

About the Author

Gosia Mlynarczyk is an Accessibility Consultant. When she’s not inspecting websites, with one eye on the screen and the other on accessibility guidelines, she likes travelling, reading, watching science programs, and listening to music.

5 comments

  1. It is true that 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.

  2. Tavis Reddick says:

    I was wondering if there is a recommended way of marking up small symbols like the single/double pound symbols, used where there is little space available like in your example, perhaps with tags. Or whether on some occasions the table should be redesigned to make it bigger and include fuller text like “20% discount” if that would fit.

    Maybe it would depend on how repetitive the information was.

  3. Gosia Mlynarczyk says:

    Hi Tavis, thank you for your comment.

    I believe you wanted to ask about the <abbr> tag?
    It is important to remember that all content needs to be marked up in a way which reinforces its meaning, and so HTML tags shouldn’t be used for presentational purposes. For example, we shouldn’t mark up a sentence or a word in the middle of a paragraph as a heading just because we want it to be displayed in a large bold font. Only CSS should be used to control style.
    Similarly, <abbr> tag should only be used to mark up abbreviations and acronyms, like ‘NHS’ or ‘WW2′, so in this case it is not a suitable solution. <small> tag could be used instead, as it defines smaller text and side comments. You could then add styling rules to this element and style it in a desired way.

  4. Great Article Gosia. A good colour combination can do wonder to your website. There are many aspect which affect the selection of colours. But the most important aspect is the niche or industry of the website.

  5. elen says:

    Thank you for this, really good to have a visual example of the problem and solution, I’m sure it will help me to remember.

Add a comment

Fields marked with an asterisk (*) are mandatory.

Comment details