Colour Contrast
In this series we are talking about website accessibility and how doing some of the basics does not have to be expensive or overly time consuming. Each part I’ll list some of these basics things you can do yourself (if you have some website/wordpress knowledge), or guidance you can provide your website developer.
Be sure to read part 1 of the Website Accessibility series, ‘Accessibility Information’ where we introduced you to the Web Content Accessibility Guidlines and discussed access information about your actual business location.
Part 2: Colour contrast.
Colour contrast is a very basic, yet very important aspect of website accessibility.
As the name suggests, it is the difference in light between the font and the background. This difference needs to have a sufficient contrast to enable the text to be readable. As websites have developed, this has become more prominent with the popularity of using images of text (where text is presented inside an image).
There are a couple of exceptions to the ratios, but the Web Content Accessibility Guidelines (WCAG) recommend a minimum of at least 4.5:1 for the visual presentation of text and images of text
Many people believe that a poor colour contrast only affects those with colour vision deficiencies. In reality (if you have what would generally be classed as good vision) think of how many times you have struggled to read text due to a background image or read text when viewed on a mobile phone. It affects everyone in different ways.
Luckily, although it can initially be difficult to identify a correct colour contrast, it is often quite an easy problem to solve. There are many colour contrast checkers available to use online for free that will check your colours against website accessibility standards, from minimum requirements to enhanced standards. Click here for one colour contrast checker example.
The WCAG guidelines also recommend against using images of text (or text over background image) if you expect it to be read by a user e.g. it is not purely for decoration. However, if you feel you must use images of text, please ensure at a minimum that the text meets the contrast ratio guidelines against every part of the image. Some websites allows you to upload an image and check its accessibility rating against your chosen text colour. One example is this text on background image checker.
If your contracts do not meet the required standards then you simply have to change the font or background colour to ones you like that exceed the guidline ratios. There are some creative ways of doing this that still look amazing and make it accessible for your customers, such as adding a blur box to images containing text.
Please note that you will need website administration privileges to be able to do this yourself.
Summary Points:
- Ensure you have correct colour contrast ratios on your website.
- Try to exceed the minimum standard.
- There are some exceptions to the rule.
- Try not to use text over background images.
- If you do, use the online resourses noted above to ensure all parts of the text meet international standards.
Coming on the 29th May:
Keyboard Accessibility: Keyboard accessibility is one of the most important aspects of website accessibility. Be sure to come back for Part 3 to find out why.
Be sure to read our other articles in the series:
Part 1 Website Accessibility: Accessibility Information
Part 2 Website Accessibility: Colour Contrast
Part 3 Website Accessibility: Keyboard Accessibility
Part 4 Website Accessibility: Accessible Hyperlinks