Nomensa.com

You need to turn on Javascript in your browser to use this site!

Accessible use of colour in web design | Nomensa

Accessible use of colour in web design

Posted on

2 minutes, 33 seconds

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.

Watch the video

Related posts

  1. The image features a whimsical, cartoon-style drawing around an open book on a solid pink background. From the book, a burst of symbols and objects is flying out, suggesting a magical or imaginative event. These symbols include a question mark, an exclamation point, a musical note, a speech bubble with "Aa" indicating text or dialogue, a small cloud suggesting an idea or thought, and various abstract shapes and squiggles.

    Blog

    What’s new in WCAG 2.2

    Discover the latest advancements in web accessibility with WCAG 2.2. From new success criteria focusing on mobile interaction to cognitive disability support, learn how these…

We'd love to hear from you

We drive commercial value for our clients by creating experiences that engage and delight the people they touch.

Email us:
hello@nomensa.com

Call us:
+44 (0) 117 929 7333

Nomensa.com

Please update your browser to view this site!