Website Accessibility - Colour Contrast

Is your website accessible for people with disabilities? 🧐

What does that mean exactly? Luckily for us, there is a global standard called the Web Content Accessibility Guidelines (WCAG 2) that offer three different levels of conformance to ensure websites are accessible to people with disabilities. The levels are:

· A = basic accessibility

· AA = strong accessibility

· AAA = excellent accessibility

AA is the recommended level for all websites as it covers a wide range of disabilities, and (fun fact) it is also the minimum requirement for NZ Governmental websites.

So, what are the WCAG guidelines?

There are 13 guidelines in total, covering website components from text to media. One of the most important (and straightforward) ones is the use of colour, specifically colour contrast.

Picture this: you have 20/20 vision and you’ve come up with the most beautiful, aesthetic colour palette full of all your favourite colours for your new website. Everything looks perfect, though not to everyone. To some people, your product information is illegible, the add-to-cart button is practically invisible and your promotion may as well not be there. You lose out on sales, and you lose valued customers.

How do you fix your colour palette to make it accessible?

There are many free online tools that allow you to easily plug in your colours’ hex codes to see whether they meet the WCAG compliance. At Rhea DM, I use the Accessible Web WCAG Colour Contrast Checker (linked below) as it enables me to see results for AA and AAA levels for UI components (icons, buttons etc) in addition to large/small text.

If you need to update your website to meet the WCAG standards, this tool is a great place to start. Or if you need someone to take care of it for you, book a free consultation with me today!

🔗 Accessible Web Tool: https://accessibleweb.com/color-contrast-checker/

🔗 WCAG Quick Reference: https://www.w3.org/WAI/WCAG22/quickref/