This blog on inaccessible colour contrasts continues our series, looking into what comparisons can be made between inaccessible website elements, which an AXSChat Podcast inspired.
After finishing my original blog, I decided to expand and tell you a bit more about specific areas of assistive technology features that should be used and accessible within a digital platform. This should be the case whether on a website, a document, or any other digital information.
This specific blog discusses the need for sufficient colour contrast ratios on digital platforms.
Colour Contrast Guidelines From Accessibility Services
This one is difficult for me to explain from experience. Being blind and using a screen reader, the software I use can tell me exactly what the text is referring to, even if it is black text on a black background. So, I will attempt to give you some of the reasons from our guidelines as to why poor colour contrast ratios can impact lots of people when online.
What Classes As A Sufficient Or Insufficient Colour Contrast Ratio
Poor colour contrasts on websites, apps, social media imagery, videos, and in documents can prevent many online visitors from accessing digital content. In particular, people with low vision or colour blind users are the most impacted by features which do not meet the required standards.
Here are some general rules to follow to check if you are using inclusive colour on your platforms:
- All text content should be legible to be read against a background colour. A minimum contrast ratio of at least 4.5:1 for normal text and 3:1 for large text should be used.
- Text is considered large if the font size is greater than 18 point (approx. 24px) or greater than 14 point (approx. 18.6px) if bolded (font-weight: 700 or more).
- If the ratio falls below 3:1 it is classed as a failure.
- If the ratio falls between 3:1 and 4.5:1, the font size needs to be checked.
- If the font is smaller than 24px or 18px and bolded then it is a failure.
- If the ratio falls above 4.5:1, this is a pass.
Liane, from our Technical Support team, has given an insight into what these ratios mean. Basically, the ratios are between the colour of text (or additional important visual information) and the colour of the background. So, the 3:1 (pronounced 3 to 1 for example) is the ratio between those two colours. Colour contrast ratios are a measure of difference in brightness between two colours. Colour contrasts range between 1 to 1 (white on white) and 21 to 1 (black on white).
Colour Contrasts Within Form Field Elements
In the same way that text should be easy to read on a page, form fields and buttons should also be efficient to find.
Often, inactive form elements are greyed out, which can make accessing these fields a challenge for many people on websites. Form fields should contrast with a background ratio of at least 3:1 and have visible focus states to eliminate accessibility barriers.
The Use of Inclusive Colour Contrasts With Links
Links on web pages should be both easy to see and use. This is especially the case when links are included within a large block of text.
To make links simplistic to identify:
- Clearly show that they are a link by using some non-colour identifier, such as an underline. Although this isn’t not mandatory, we also recommend links should be a different colour as well to stand out.
- If links are not identified with an underline (or similar), they must be a different colour to the text (ratio of 3:1) and they must provide some sort of change when mouse users hover over them or keyboard users tab to them.
How To Assist Colour Blind Users Online
It is important to not only use colour alone to convey meaning. Instead, use icons, written content, and other visual elements to reinforce clear communication and provide context.
Exceptions with Colour Contrast Requirements
Sufficient colour contrasts are essential for understanding the content or functionality on digital platforms. However, this is not the case for:
- Logos or text that is part of a logo.
- Decorative graphic elements.
- Text that is part of a disabled control state or disabled buttons.
These have no minimum contrast requirements.
How to check colour contrast ratios
When I started writing this blog, I was thinking of the main primary colours: red, blue, green, and so on. This may be since I refer to colours as these main ones: green for grass and red for letterbox etc. Now, I am thinking how difficult it may be to correctly have the right contrast, as I remember looking at all the paint charts when I could see and by now there must be hundreds of them.
There are computer colours which are composed of red, green and blue, with 1 BYTE (byte, the range is 0 to 255) to represent a colour component; so, there are 256 × 256 × 256 = 16777216 colours!
Within the guidelines above text size was a factor, and like colour, you want the reader to easily distinguish colour contrasts. Remember, it is not just the colour and size for the information on a page, but site elements also need to have a good contrast between the background and text.
These can be tested using free colour analysis tools, such as WebAIM’s Colour Contrast Checker.
An Everyday Colour Contrast Comparisons
Here’s an everyday comparison which covers all the contrast issues above:
You would not decorate a shop painting shelves displaying products that you don’t sell onto the wall. In addition, you would not paint the outside of your house with doors that represent the same as the physical door.
Ok, this is a silly one, but then again is it? Would you use white ink to write a letter on white paper? Well, looking at the contrast levels, then there is not much going away from white on white, such as some may use a yellow or a pale grey on white, which has the same effect on some websites or documents.
What about a business card, you would want your details to standout from the background wouldn’t you? Otherwise, no one could read it. Although logos are exempt from a colour contrast issue, in the same way as you would want your business card to be accessible for people, you would also want your logo to be noticed by as many users as possible. By using the colour contrast guidelines in all of your correspondence, your information will be able to be read by many more online visitors.
Eliminating Inaccessible Digital Platforms
I know I have used this last paragraph at the end of each of this series of blogs, but it relays the important message of all the blogs written:
These are just a few comparisons between most people’s everyday life experiences and one of the inaccessible features of digital information in their life. However, there really is no need for any inaccessible areas, as there are always alternatives.
Think about when you could not get access to something. Whether it is in a shop or around your normal life experiences. There is no real reason why you should not be able to gain access. It is usually due to someone having made it inaccessible to you because of the design and not thinking of your individual needs as a customer in a specific situation.
It’s time to make a change and be inclusive.
Over the next few months, I’ll be blogging about ways that you can adapt your websites to achieve digital accessibility and improve the user experience for everyone.
For more details about how we can help with website accessibility testing, please get in touch with our team today.
