Find out how to make sure your colour contrast is accessible for everyone.
As soon as I became interested in digital accessibility, the one thing I couldn’t fail to notice was non accessible colour contrast. One of the basic principles of making your colour choices accessible for everyone, including people with permanent, situational or temporary impairments, is that there is a strong contrast between the text that you use and the background colour or image that it sits on. At eLaHub we specialise in eLearning accessibility, but good colour contrast is just as relevant for your website, presentations, online documents and social media posts.
Why?
- People with low vision often have difficulty reading text that does not contrast with its background.
- People who are colour blind also find it difficult to read text which doesn’t have sufficient colour contrast.
- Many older people find it difficult to distinguish colour and need strong contrast to make it easier to read content.
- Users who are using devices in bright sunlight will also benefit from strong colour contrast.
Common errors
Here are a few of the most common colour contrast mistakes that we see and how they can be corrected.
How do you know if your colour choices are accessible?
The best way is to use the standard set out in the Web Content Accessibility Guidelines (WCAG). These guidelines are the most widely used and recognised international accessibility standards. Despite the common perception that they are only relevant for websites, the standards actually apply to all online content. Since the introduction of the Public Sector Bodies Accessibility Regulations 2018, they are also the legal requirement for the public sector in the UK and will be mandatory from September 2020.
Standard 1.4.3 Contrast (Minimum) states that:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Still confused?
The best way to check if the contrast between your text and background meets the 4.5:1 ratio is to use a colour contrast checker. There are many checkers available, but our preferred one is the WebAIM colour contrast checker because it has the following features:
- Pass or fail indicators for WCAG AA and AAA levels.
- Pass or fail indicators for normal and large text size.
- Lightness sliders which allow you to darken or lighten your preferred colours until they pass WCAG requirements.
Other useful links
- Text on background image accessibility check – Great tool to check the contrast if you have text over a background image.
- Webfx: Hex to RGB converter – An RGB to Hex converter is useful because your contrast checker may ask for Hex or RGB (Red, Green, Blue) values, while your software may only provide one or the other.
- UXellence tool: Colorbot – Another colour values converter which includes Hex, RGB and HLSA values.
- Colorcop: Colour picker – A colour picker can save a lot of time to quickly find out the colour value of a visual element in your resource.
- British Dyslexia Association: Style guide – Includes recommendations about colour combinations and contrast for dyslexic learners.
Taking the time to check that your colour choices meet accessibility standards is one of the key things you can do to ensure that all of your online content is inclusive.
