Visual design and colour accessibility

Making sure that text colours in your digital interface are accessible for your users is a really important aspect of a well executed visual design.

If you’ve ever been asked “I assume all the colours are accessible?” by your client and were unsure of what to answer, then this post is for you. The tips below will help you to comply with the W3C guidelines for text and colour so that you’ll always be able to make a confident response of “Of course!”.

Visual design plays a large role in communicating the business’ proposition and personality. When this works well, the design is appealing and appropriate in tone for the audience. Equally important though is making sure that what you’ve designed works for the broadest possible audience. For the subject of this post we’ll consider people with colour-blindness.

Colour is an inexact and relative art. We all see colour slightly differently and our perception is literally ‘coloured’ by the context in which we view it

Colour blindness – colour and accessibility

Colour is an inexact and relative art. We all see colour slightly differently and our perception is literally ‘coloured’ by the context in which we view it, such as a device’s screen and the surrounding environment.

Being inexact we need to select colours that will perform well within a range of environments, e.g. bright or dark lighting environments, and that can be perceived by those with vision perception deficiencies. This should not be under-estimated as roughly 8% of men and 0.5% of women worldwide live some form of colour blindness.

In practice, colourblind people confuse certain ranges of colours, the main challenge being able to detect the difference between certain colours. The colours depend upon the type of colour blindness, however the most common form is the perception of difference between red and green.

The image below shows 2 mugs, one green, the other red. Left: standard vision. Right: how the image is perceived with a form of colour blindness – red and green are almost indestinquishable.

red-green-example

Design with additional visual cues to support meaning

Colour is commonly used to convey information in interfaces. For example:

  • Graphs and charts often rely on colour to differentiate entries
  • Websites are often colour-coded to differentiate sections
  • The active item of a menu is often signified with a stand-out colour
  • Buttons are often coloured to attract attention, or indicate their purpose
  • Forms elements use colour to show focus, correct entry or errors

As demonstrated above, the problem here is that colour alone can not be relied upon to convey difference. If we used the colours alone to indicate something important such as ‘stop’ or ‘go’ – the meaning would be lost as the perceived colour contrast is too low.

The example below show the colours red and green used to indicate meaning: positive and negative percentages and success and error states for forms.

colour forms

Now the same image with Photoshop Colour Blindness filter applied, you can see that it’s the additional visual cues of the up and down arrow for percentages, and the form’s tick and cross supply a second route to convey meaning when colour alone wouldn’t be enough.

colour-forms-filtered

Designing for sufficient colour contrast

The next thing to crack is ensuring that the foreground (text) and background colours you use provide enough contrast to allow colour blind users or those using a monochrome screen to view information.

Firstly: Identify if the text needs to be compliant

Text with meaning will account for most, if not all, of the text on your screen, such as headings, body text, labels, tag, buttons etc. These all convey useful information and need sufficient contrast.

Text as decoration e.g. text that is not intended to be ‘read’ and logotypes (the text that is part of a logo or brand name). These have no minimum contrast requirement. But why would you set your logo with colours that make it unreadable for some of your customers?

Secondly: Define the minimum contrast for each type of text

There are 2 contrast ratios to remember:

  • 4.5 – 1: For regular weight text under 18pt in size
  • 3 – 1: For regular text size of 18pt or over and bold weight text under 18pt in size

As you can see the weight of the font you use influences it’s legibility. So also bear in mind that if you like to use lighter weights you should check that your contrast ratio a little higher than 4.5 – 1, to be on the safe size

The image below demonstrates a variety of foreground and background colour combinations. The last 2 examples are particularly hard to read.

Colour-contrast-exampes

Colours can be deceptive

Checking your design in grey scale can be very revealing. Below: The previous image converted to greyscale. Notice how the bottom 2 examples of become completely unreadable.

Colour-contrast-exampes-grey

For further explanation please refer to the W3C guidelines on minimum contrast.

A simple process to guide your visual design decisions

Here’s a whistle-stop journey through a made-up design project.

1. Design in greyscale

The simplest place to start is to design in greyscale, as this focuses the designer to consider layout and visual balance before tackling the subjectiveness of colour. The design should be clear and easy to read, with a thought through text hierarchy in terms of position on the page, size, weight and shade.

Site-A

2. Add colour to your design

Your choice of colours will depend on the look & feel of your brand’s visual identity. This is time for experimentation to get the overall look you want – in this case, bright and vibrant background colours.

Site-B

3. Check your design for contrast

Now it’s time to check if your design meets the mark. You can do this several ways. I tend to look at the design in greyscale once again and see what effect the Photoshop Colour Blindness filter has on the overall design.

Below is the design in greyscale and with the Colour Blindness filter applied.

Site-C-grey-CB-filter

As you can see below – the main offenders are the coloured text boxes and blue link text at the bottom of the layout.

Whereas the 2 buttons (top right) passed the AA compliance test in the Snook Colour Checker, this was because their larger type size required a lower contrast ratio of (3 – 1).

Site-C

4. Adjust your colours

So now you know where the problems lie, it’s time to correct them by optimising your colour choices. We recommend the Snook Colour Contrast Checker Tool. To use it:

  • Enter your text HEX colour reference into the field at the top field of the Foreground Colour box
  • Enter the background colour HEX colour reference into the Background Colour box
  • The contrast ratio and compliance rating is displayed on in the Results box on the right hand
  • If you’re getting ‘NO’ it means that your contrast ratio too low
  • To adjust the colours and find a compliant colour combination, the easiest thing to do adjust the Saturation and Value sliders
  • When you get a ‘YES’ on the line WCAG 2 AA Compliant field you know that you’re on to a winner
  • Copy the HEX values and paste them back into Photoshop to adjust the colours of your elements

snook

After going through the design and making corrections to the non-conforming colour combinations, we arrive at a design which we can confidently state as colour contrast accessible.

Site-D

In summary

It’s not difficult to arrive at an accessible visual design, it just takes a bit of extra time as you refine your design and colour palette. The satisfaction gained from designing inclusively for the widest audience is very rewarding and will put you in a position for when you the client asks that question “Are the colours accessible?”. The answer will be a very confident “Yes!”

Further reading

Types of colour Disabilities

W3C: Contrast (Minimum): Understanding SC 1.4.3

Keen to learn more? Check out our Visual Web and Interface Design course!

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x

Course

Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)