No matter what digital platform you look at, there are elements of colour found across an array of site features. Having sufficient colour contrast ratios, makes sure that everyone can perceive your information. In turn, giving equal access to your content.
In this blog, you’ll learn why accessibility and colour contrast are so important and find out how to assess contrast ratios and learn simple adjustments to become legally compliant.
What does having contrasting colours mean?
Having sufficient colour contrasts are imperative if you want to create an inclusive space for your online users.
Fundamentally, it comes down to having enough contrast between background and foreground colours. In particular, this is crucial for your text to be legible for everyone to read.
Low contrast scores occur when two similar colours are used, including shades of grey. This makes it difficult for users to differentiate between the two contrasts.
Accessibility and Colour Contrast – Who is affected by poor colour contrasts
- 1 in-12 men and 1 in-200 women have a colour deficiency.
- At least 2.2 billion people have a near or distance vision impairment across the globe.
These users may find it difficult, or sometimes impossible, to interact with a platform if colour contrasts are not sufficient.
Resulting in users:
- Missing out on key information.
- Struggling to navigate a website.
- Being unable to interact with site elements.
This is why the use of inclusive colours is a necessity across your site and its elements.
Web Content Accessibility Guidelines (WCAG) compliance
There are WCAG requirements that websites need to adhere to in order to be compliant with colour contrast ratios. But don’t worry; once you know how – it’s an easy fix and a quick win in your journey towards becoming accessible.
The visual presentation of text, and images of text, need to have a contrast ratio of at least 4.5:1. This is except for the following areas:
- Large text (which is defined as 18 point or larger), needs to have a contrast ratio of at least 3:1.
- Decorative incidental text, or images of text, that serve no user purpose do not have to meet colour contrast requirements.
- Text that is part of a logo or brand name also has no contrast requirement.
How to check colour contrast ratios
Visual checks aren’t always conclusive. Luckily, there are numerous free colour contrast checkers available on the web to help you to check your platforms.
A useful evaluation tool is the WebAIM Contrast Checker Tool. Here, you will need to enter a foreground and background colour in a RGB hexadecimal format (e.g. #FD3 or #F7DA39) or you can choose a colour using the colour picker tool. If it fails to meet sufficient contrast levels, you can use the slider to adjust the contrast. Once you have found a sufficient level you can then replace the colours accordingly.
Another useful tool that you can utilise is WAVE. This will scan your website to examine colour contrasts, pinpointing where alterations are needed.
Often, only slight tweaks are needed, but these small adjustments will make a large difference to your online users.
Examples of good and bad colour contrast ratios
If using a dark background colour, for example in a table heading, ensure there is enough contrast. For example:
An example of good colour contrast ratios
You can easily read all of this text
An example of poor colour contrast ratios
It is difficult to read all of this text
Similar with headings on a white background, you don’t want the font to be a shade too light:
An example of good colour contrast ratios:
You can easily read all of this text
An example of poor colour contrast ratios:
It is difficult to read all of this text
What site contrast elements could enhance the user experience
Aside from your web page’s text being a primary fix, there are other adjustments you can make to enhance your site’s design. These alterations can aid with items such as navigation or ease of use when completing site elements.
- Avoid using a bright white background. Go for an off-white to avoid glare.
- Check colour contrasts on items such as buttons, links, call-to-action boxes, error messages and headings to aid your user-flow.
- Check that items are not greyed out to display when something is inactive.
- If possible, adjust your branding colours to also be user-friendly.
- Assess that online documents and presentations can be read by everyone.
- If you have charts, graphs, and maps present, check they are inclusive.
- Inspect your video content and imagery if they contain text.
- Make sure users have a clearly visible reference as to where they are on a page if using a keyboard only to navigate a site.
- If using a high-contrast mode, check these also have sufficient contrast ratios.
Don’t use colour to convey information
Users with colour deficiencies may not be able to distinguish between certain colours, such as red and green. This is why it’s important not to use colours instead of labelling content to convey information.
For example, someone might place a red and green circle to convey if something is good and bad. Without a description, this would leave the users unaware of what they should be avoiding.
A poor example:
New items in stock are shown in red
Laptop
Monitor
Mouse
A good example:
New items in stock are highlighted
Laptop
Monitor (new in stock)
Mouse
Instead of using colours you can also:
- Use icons or shapes.
- Provide meaningful text labels.
By making these simple fixes to your content, you will enable inclusive access for all of your online visitors.
Need help with inclusive design?
Our accessibility experts can provide web accessibility training for designers and developers. Giving you the confidence in knowing you are designing with accessibility at the forefront for all of your users.
