We have all been affected by poorly designed and developed websites.
Have you ever been annoyed by a website that takes too long to load, has unreadable fonts, low contrast colour choices, or has an unfriendly mobile experience?
While these may be minor inconveniences for some people, for those with disabilities, they can make a site almost unusable and can restrict their access to the Web and its wealth of knowledge.
Table of Contents
What is web accessibility?
Web accessibility is a set of guidelines that dictates how a website is written, designed and developed, allowing anyone, in any situation, to use it.
The Web Content Accessibility Guidelines (WCAG) were created by the World Wide Web Consortium (W3C), an international community that develops open standards to ensure the long-term growth of the Web. W3C is the leader of the Web Accessibility Initiative, and its guidelines are used in legislation in many countries worldwide.
What are the web accessibility standards?
WCAG has three levels of accessibility compliance:
- A: The baseline for web accessibility compliance. It focuses on the basic usability of a website. Failure to conform to this level will result in a completely inaccessible website.
- AA: Focuses on the visibility and appearance of items on the screen; it ensures that the most significant accessibility barriers are removed. Many organizations strive to meet Level AA. It also includes all Level A requirements.
- AAA: Focuses on every aspect of a website, from design to development, to content, and more! It requires a website to have been built with accessibility in mind from the get-go. It also includes all Level A and AA requirements.
Why is web accessibility important?
Did you know that 22% of Canadians over 15 live with at least one disability? That means over 6.2 million Canadians face obstacles every day — ranging from limitations in their physical environments to inaccessible websites and web content. As the population ages and chronic health conditions increase, the rate of disabilities will likely rise too. It is imperative to take accessibility into consideration now.
Along with providing information more freely, accessible design also improves user experience and satisfaction. This means that in order to create a website that is easy to navigate and allows for interaction with people in any situation (as well as with content, visual design, and development) – accessibility must be a consideration from the very beginning.
As stated above, there is legislation on accessibility across the world. For example, the Accessibility for Ontarians with Disabilities Act (AODA) utilized WCAG’s level AA standards as the minimum standard of compliance by January 1, 2021, for private or non-profit organizations with more than 50 employees and all public sector organizations. Failure to comply could result in fines of up to $100,000 for each day of violation.
Accessibility and your brand
Accessibility can enhance your brand, drive innovation, and extend your market reach. Good branding tells a client your company is credible and trustworthy; it portrays that you understand the customer’s needs. Brand accessibility allows you to connect more easily with your customers and removes possible barriers that could block someone from using your company and services.
When it comes to designing a brand and making sure it is accessible to everyone, make sure to consider the following items:
Font, text hierarchy, and readability
The easiest way to improve brand accessibility is by increasing the font size scale. By increasing the size of your fonts, you will provide visually-impaired customers more opportunity to access the content on your site.
A strong and varied hierarchy improves readability by allowing users to pick out different sections and more easily understand the flow of the content. A strong typographic hierarchy includes variations in font choices, colours, styles and sizes to create a cohesive feeling and promotes readability.
Colour and contrast
It is essential to choose colours that represent your brand, portray the values you want, and ensure they are accessible when in use. It is acceptable to have some colours that are inaccessible together, but when creating pairings, you want to ensure they pass WCAG’s standards.
To comply with level AA, you must have at least a colour contrast of at least 4.5:1, and for level AAA, you must have at least a 7:1 contrast ratio.
To confirm that your colours have enough contrast, you can use an online contrast checker like WebAIM, which allows you to input your background and foreground colours to check for any contrast issues and adjust them to meet the requirements. If you use Figma, you can use a plugin such as Contrast to check your components.
If you are having trouble finding contrast-compatible colours, you can use Contrast Finder, where you input the colours you want to use, and the app will give you a range of variations that pass accessibility.
Consistent design
When visual queues in your design change, such as icon styles, fonts, hierarchy, and the use of colours, it can confuse users with visual and/or cognitive disabilities. Structural elements, such as navigation menus, forms, error notifications, etc., should also be consistent to avoid confusion.
Is your brand inaccessible in one of the following ways, and are you worried about the users of your site? Consider using an automated accessibility tool like accessiBe, which uses JavaScript and an AI to ensure your site is as accessible as possible. They provide user profiles for easy setup and offer a comprehensive arrangement of content adjustments for specific needs.
Want to test it out? Click on the blue icon in the bottom left corner! 
Want to try it on your site for free for 7 days? Visit accessiBe and start a free trial today.
Accessibility is one of the most important factors to consider when developing your brand or website. In some jurisdictions, it is the law. Without it, you could exclude a large part of your potential clientele or userbase. Taking steps to improve the accessibility of your branding and web development will open your company to a broader audience and allow anyone to interact with your resources, services, products and projects.
Resources recap
- WebAIM: Simple online tool that allows you to quickly check the contrast between a selected foreground and background colour and adjust the lightness of either colour to meet compliance. Shows compliance for both level AA and level AAA.
- Contrast: A figma plugin that will show you the contrast for your components. It has a feature called Smart Sampling that tests the compliance of text on image and gradient backgrounds.
- Contrast Finder: A tool that computes the contrast between two colours (background, foreground) and checks if the contrast is valid. When the contrast is not valid, the main target is to suggest some correct colour contrasts that are similar to the ones provided.
- accessiBe: An automated accessibility tool that uses JavaScript, AI, machine learning, and computer vision to make websites compliant.
