The Accessibility for Ontarians with Disabilities Act (AODA) is a legislation governed by the province of Ontario to improve accessibility for people with disabilities. As the first Canadian province to pass this kind of law, the AODA aims to move towards a more accessible Ontario by 2025 by applying standards, accessibility requirements, and compliance deadlines.
This includes web accessibility. By law, websites belonging to public sector organizations and private or non-profit organizations with 50+ employees must meet website accessibility requirements. Currently, all public websites and web content must meet Web Content Accessibility Guidelines (WCAG) 2.0 Level A. The AODA compliance date is coming up: by January 1, 2021, websites must meet WCAG 2.0 Level AA.
When it comes to the use of colour, websites and web content (like display ads and emails) must have distinguishable content, meaning colours must accommodate people with limited colour vision or colour-blindness. Colour deficiency affects 1 in 10 males in Canada, and 1 in 200 females worldwide. This means by ignoring colour contrast standards, you could be losing a significant portion of potential customers.
We spoke with our own Creative Developer, Michael Mandarino, to find out the most common mistakes he sees in AODA colour compliance, both as a developer and as someone who experiences limited colour vision.
What is colour accessibility?
MM: There’s no short answer to this. The simplest way of putting it is that everyone sees colours differently, some of which live with colour deficiencies. Because of this, reading in print and digital is not always as easy for them as it is for other people who do not have a colour deficiency. So we need to be able to deliver content that is inclusive to everyone.
How does the misuse of colour affect your day-to-day life?
MM: Misuses of colours appear more often than the average person realizes. As a person who has limited colour vision, in the past, I’ve received promotional emails from random vendors that didn’t have enough colour contrast between the fonts and the background colours. Instead of straining to read them, I have ended up giving up and just deleting those types of emails. This often happens with special promotions both online and in print that I’ve overlooked and missed.
What are the most common AODA standards mistakes you see as a developer?
MM: The most common AODA compliance mistake I see is the colour contrast not high enough. There is a minimum value the colour contrast ratio is required to reach to pass AODA requirements. Take for example the colour green on white: one shade of green may be able to pass AODA guidelines while another shade doesn't. We have to make sure we have the right contrast between the foreground and background of a design.
At what stage does colour accessibility come up?
MM: More often than not, I am able to visually spot an issue in a mock-up. One example: if a mockup has a light colour on a light background or there are links, I will tell the client I can build this; however, this design will not pass AODA guidelines. We always use a colour checking software in the beta stage of testing to ensure that nothing else is missed for AODA web requirements before going live.
What are some ways to avoid misuse of colour on websites?
MM:
-
Tweaking the background. Put black or white opaque panelling behind text to make the text contrast the background.
-
Stylizing links. Hyperlinks require unique styling to stand out from the rest of the body text (italicizing, bolding, or underlining). Making hyperlinks a different colour without unique styling will not meet the minimum requirements.
-
Increasing the font size.
-
Using colour checking software.
As a client or designer, you should always take a second to ask, “Can I use colour A on colour B?” Use a free web accessibility colour contrast checker like WebAIM to test your colours. If your colours don’t pass the test, go back and fix them. In general, it’s always good practice to check your entire site (for more than just colour contrast compliance) with a web accessibility checker, like SortSite.
Give us a call and we can check if your website or mockups break AODA guidelines, especially on colour contrast. We can provide you with the results and in-depth feedback on how to fix your website to be more AODA compliant.
Author: Jessica Huynh
Digital Marketing