Inclusion and accessibility have been a hot topic for the past few years and it’s only escalating. And why wouldn’t it be? In this digital-first age, it’s no wonder companies are putting accessibility to the top of their priority lists for website design and user experience because it’s the right thing to do. If your design is not accessible, you could be excluding a large part of your target audience. There are many considerations for inclusive design, but to kick-start this series, we’ll be delving into colour accessibility – what it is, why it’s important and how you can implement the best colour accessibility practices.
Did you know that by not considering colour accessibility within your website, you could be losing up to 10% of your conversion rate? Research conducted by YouGov found between 5% to 10% of the population have visual impairments, which can include colour blindness.
If your website is the most important touchpoint for your target audience (which for most businesses, it is), it’s crucial that your brand does not exclude anyone. Accessibility regulations have been in force since 2018, stating that all websites or mobile apps must meet best practice accessibility guidelines to be as ‘‘perceivable, operable, understandable and robust” as possible. So you don’t want to get caught out– even Beyonce’s website has been sued for preventing visually impaired users from making purchases from the site.
Given the benefits of colour accessibility and the dangers of overlooking it, here’s our practical guide to making your website/digital platform more inclusive. Let’s go!
WHAT IS COLOUR ACCESSIBILITY?
Colour accessibility ensures that people living with visual impairments or colour blindness are provided with the same website user experience as those who are not. For example, certain colour combinations can be problematic for people with colour vision deficiency as they are unable to distinguish between them.
Colour plays a critical role in a brand’s identity. However, when this is translated to web design and UX, colour accessibility, for those with visual impairments or colour blindness, often gets overlooked.
THE 3 TYPES OF COLOUR VISION DEFICIENCY
To understand how we can best service those with visual impairments or colour blindness, we first need to understand the different types of colour vision deficiency.
There are two different types of photoreceptors which allow us to see: cones and rods. While cones pick-up colour, rods are responsive to light.
Each cone transmits either the red, green, or blue photopigment which exists on a specific absorption curve. It is a mix of the information across the three cones that makes-up our colour vision. The perception of colour is changed when one of these cones malfunction, resulting in what is known as colour vision deficiency.
There are three known types of colour vision deficiency:
- Green (Deuteran)
- Red (Protan)
- Blue (Tritan)
A malfunctioning green cone is the most common, meaning people have difficulty distinguishing between shades of red, yellow and green. Let’s show you:
Even people without colour deficiencies will benefit from colour accessibility best practices as it allows users to better understand and easily navigate their way around a website or app. The perception of colour can be completely different, as we all experience colour differently. Men, in particular, are more susceptible to colour vision deficiency, with 1 out of 12 men affected opposed to 1 out of 200 women.
WHY IS COLOUR ACCESSIBILITY IMPORTANT?
Here’s an easy break down of four reasons why colour accessibility is important and why it should be at the top of your to-do list:
1. EVERYONE MATTERS
Websites are an important resource for people in their day—to-day lives so ensuring information is as easily accessible as possible is of paramount importance. We should all lead by example in creating accessible sites for everyone.
2. IT’S DESIGN BEST PRACTICE
There is a misconception that making websites more accessible comes at the cost of the aesthetics, whereas best practice for websites is where the two work in harmony. The two combined creates the ultimate positive user experience.
3. HIGHER CONVERSION RATES
If colour accessibility is considered on a website, then it means all your target audience is equally represented and information is seen in the same way. A test carried out by Attention Insight found that by changing the visibility and colour of a CTA button had an increased click-through rate of 500%. The better the user experience the higher the conversion rates.
4. THERE ARE LEGAL REQUIREMENTS
In some cases, particularly digital services, it is a legal requirement to comply with accessibility regulations. In accordance to Section 508 of the Rehabilitation Act of 1973, it is law that the public sector is required to “make their electronic and information technology (EIT) accessible to people with disabilities.”
HOW TO CHECK IF YOUR WEBSITE’S COLOURS ARE ACCESSIBLE OR NOT
With a few simple changes to your website, you can achieve good colour accessibility standards so let’s move onto how. Colour accessibility comes down to three central principles:
1. Contrast
2. Colour Usage
3. Focal Point
CONTRAST RATIO
Colour contrast means having an adequate level of contrast between an asset and its background, so both are distinguishable. These assets can be anything from text, logo, icons, and shapes. Even those without visual impairments can struggle to tell whether there is sufficient colour contrast, which is problematic as it affects readability.
There is a colour ratio standard set out from the World Wide Web Consortium (W3C). The W3C has created Web Content Accessibility Guidelines (WCAG) which is an internationally accepted success criterion. The most recent guidelines (WCAG 2.1) use a benchmark for optimal colour contrast, stating that you should have “a minimum ratio requirement of at least 4.5:1.” The guidelines have two levels of accepted colour contrast:
- AA: 4.5:1 (attain this)
- AAA: 7:1 (aim for this).
The ratio is based on the WCAG 2.1 scale and runs between 1:1 and 21:1, a 1:1 ratio is the ratio between identical colours, whereas 21:1 is the contrast between black and white. As you can infer from the scale, achieving high levels of contrast is more a matter of value difference than hue difference. For instance, the contrast ratio of fully saturated red to fully saturated blue is only a little over 2:1. You can use online checkers to measure the score of your colour combinations, we’ve listed our favourite ones below.
COLOUR USAGE
You shouldn’t rely on colour as the primary way to differentiate information. As people with visual impairments see colours differently, you should use a combination of colour and other means of visual representation, such as text labels and shapes to distinguish information.
A common example of this issue is alert messages found in online forms. If error messages or required form fields are denoted using colour, it is problematic as some people may not be able to see the difference. Instead, think about using instructional text to let the user see there is an error. Or, better yet, pre-empt the problem and solve it before it begins by, for instance, labelling required fields with ‘required’ or using asterisks.
FOCAL POINT
Data is another common example where colour is often used as the primary differentiator. A consideration for colour accessibility is altering the focal point. By changing the emphasis or focal point of the data, you can avoid having problematic colour combinations next to each other. Be sure to always label your data with text as well.
ONLINE TOOLS TO HELP YOU WITH COLOUR ACCESSIBILITY:
Some of the above may seem a bit complicated, but don’t worry – you don’t have to remember it all, just take a look at some of these online tools to help get you started. You can even input your brand’s colours into the contrast checkers, and they’ll let you know whether they pass the criteria or not. Or, if you don’t know where to start, there are some accessible colour palette generators available too!
COLOUR CONTRAST CHECKERS:
WebAIM is a simple but classic choice for checking your contrast ratio. If you’re after a quick and easy tool – this is the one for you.
Adobe Colour has its own contrast checker which also indicates how text and graphic components can work on your colour combination. Our favourite feature however, is the ‘Contrast Suggestions’ tool which helps you make better combinations with a high contrast ratio.
Whocanuse is a great tool as not only does it show you whether your colour combination passes the WCAG, it also shows you how people with different visual impairments see it too.
COLOUR BLINDNESS CHECKERS:
Toptal is a great tool for letting you see websites through the eyes of someone with visual impairments. It lets you filter through the different types of colour deficiencies so you can experience a range of perspectives.
ACCESSIBLE COLOUR PALETTE BUILDER:
If you already have an existing colour palette or are currently in the process of shaping one, this is a great tool to check which colour combinations are accessible for you to use. If you find your palette has really limited colour combinations – it might be time for you to rethink your palette.
PLUGINS FOR DESIGNERS:
Alternatively, if you’re looking for an integrated accessibility tool and use either Figma, Sketch, Adobe XD and Google Chrome – then Stark is the tool for you. It’s a plugin that allows you to easily check contrast and colour blindness filters while you’re working.
ACCESSIBLE COLOUR PALETTES AND COMBINATIONS
Looking for inspiration? Here are a few colour palette samples we created earlier (you got that Art Attack reference, right?). All of the colours are tried and tested and we’ve included guidance around which colours can be used together and pass the WCAG 2.1 guidelines at AA standard.
We hope we’ve given you a bit of an insight into what colour accessibility means, why it’s important, how to implement it, and some tools to get you started. In terms of accessibility, there are many other considerations you should be aware of, but today, we’re keeping the focus on colour. So be sure to keep an eye out for our next blog!
Unfortunately, a lot of people forgot to consider accessibility but we hope our first blog in this series has planted a seed for you. If you invest your time and effort into accessibility, it ultimately creates the best positive user experience for everybody, meaning you can all reap the rewards. Here at Station Rd are all about creating positive lasting impacts so we will always champion accessibility and inclusion. If you’d like to know more about our approach to accessibility and how this impacts our design and digital services, drop us a line and we’d be happy to set something up.