Get in touch with us today! Call us toll-free at 1.866.754.4111 or email us at [email protected] Close button
Web Design Kitchener Waterloo Guelph Cambridge AODA Development
This is a headshot of Shauna Ramsaroop.

Graphics comparing good versus bad colour contrast

 

When designing your website, we enjoy being adventurous with our clients, especially when it comes to the colours you choose. Your website truly is your brand, an online reference to who you are and it’s extremely important that your design and colour scheme match who you are and what you stand for. When designing websites that need to be AODA compliant our designers and developers need to go the extra mile to ensure the colours you choose are both representative of you and fall within the compliance parameters of WCAG 2.0. This could be a tricky feat and here is why.

 

Colour Contrast

People with colour deficiencies and low vision may have difficulties viewing your website depending on the colours that you use. It is incredibly important that the contrast ratios comply with the requirements allowing people to receive information from your website visually. When choosing colours and fonts our designers and developers must following the following regulations:

  • Contrast– minimum ratio of 4.5:1

  • Bold & 14pt or 18pt + colour contrast ratio of 3:1

  • Add text labels to colour pickers

  • Use texture to complement colour information

  • Text on images should always use as high contrast as possible

  • Incidental/Decorative items such as logos are exempt

  • Colour Contrast Checkers: Web Aim Color Checker & CCA

 

Visual Hierarchy

Another very important aspect of AODA compliance is the ability to visually organize design elements in order of importance. This becomes mainly apparent when someone is using a device or screen reader to navigate content and information presented on a web page – typically this is done by tabbing on a specific type of keyboard.

 

In order for devices to navigate the content accordingly, headings must be strategically placed to allow a reader to comprehend the content, our designers and developers ensure the information is presented in an organized manner by making use of the correct Headings on a page:

  • Heading 1 – Only to be used once on a page

  • Heading 2 – Must be at least 1-point size smaller and follow an H1. Can have different styles

  • Heading 3 – Again must be smaller than H2. Is to be used as a subheading for H2 only

  • Heading 4 – must be smaller than H3. Is to be used as a subheading for H3 only and so on

 

When adding content to your website or designing the layout, it is extremely important to keep these regulations in mind. If you have any more question in regards to AODA compliance, or the information from this blog, please reach out to us!

 

Make your website AODA compliant! Visit aodawebsites.ca

AODA Websites logo

 

Subscribe to this Blog Like on Facebook Tweet this! Share on LinkedIn

Contributors

Sanj Rajput
119
March 28, 2024
Show Sanj's Posts
Rob Matlow
139
March 25, 2024
Show Rob's Posts
Melissa Yates
1
February 27, 2024
Show Melissa's Posts
Amanda Turner
1
February 20, 2024
Show Amanda's Posts
Alina Litvinenko
1
February 6, 2024
Show Alina's Posts
Tabitha Doyle
1
January 30, 2024
Show Tabitha's Posts
Christine Votruba
31
August 29, 2023
Show Christine's Posts
Sean Sanderson
66
December 19, 2022
Show Sean's Posts
Haley Burton
1
December 7, 2021
Show Haley's Posts
Generic Administrator
1
December 3, 2021
Show Generic's Posts
Colleen Legge
1
November 26, 2021
Show Colleen's Posts
Sean McParland
18
August 20, 2021
Show Sean's Posts
Matt Stern
4
July 16, 2019
Show Matt's Posts
Sean Legge
1
June 28, 2019
Show Sean's Posts
Todd Hannigan
47
November 13, 2018
Show Todd's Posts