Many people think that as long as you’re providing the appropriate alternative text (alt-text) on the logo, you don’t need to worry about things like colour contrast, font sizes within the logo, or the hover effect. While that may be technically true since the logo is treated as an image, not as web content, we believe true accessibility means providing an optimal experience for every user. Below we will outline our process for designing an accessible logo, how to use it for the web, and some helpful resources.
Designing an Accessible Logo
In order to ensure a logo is accessible, there are four main factors that should be considered:
1. Colors: Should be high contrast and easy to read.
Brand colours should complement one another, but most importantly they must have enough contrast (see our news post that outlines the value of a brand guide). If your logo consists of multiple colours that are too similar, there is a high likelihood they will blend together for users with visual disabilities. You can use apps or chrome extensions like the Silktide simulator to see what designs look like from different visual impairment scenarios and choose colours that are accessible for everyone.
All overlapping elements of the logo should have enough contrast that anyone can visually separate the key elements.
For logo text, a contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text is a minimum.
2. Fonts: Must be easy to read.
Simple sans-serif fonts are recommended as they are easy to read. You should avoid using script style and novelty typefaces when possible. Additionally, ensure fonts are large enough to read easily. Logos are not only used on the web, for example, many organizations and municipalities have logos on vehicles, clothing, signs, etc. so it is important to consider how easy it will be to read and recognize in various situations and locations.
3. Complexity: Should be kept simple.
The logo should be easy to identify and not too visually complex. Too many details or a busy layout may be hard for users to understand and remember.
Use as few colour palettes as possible, avoid gradients or too many shades of the same colour to make sure each element remains distinct from one another.
4. Alt-text: Should read what is described in the logo.
If the logo is not a clickable element, it should describe what is in the image. Using Air Canada's website as an example, in this scenario the proper alt text would read “Air Canada” since that is what is displayed in the logo.
If the logo is a clickable element, then we must provide that context as well. Again using Air Canada as an example, if the logo is being used to link back to the homepage of the website, the proper alt text would read "Air Canada home". Remember to not use “logo of” or “image of” in your alt text, as this provides more contextual information than necessary.
Helpful Links
If you would like to learn more, check out some helpful links below. This Youtuber, Angela, is a visually impaired designer and has created some great videos on accessible logo design.
To learn more about accessibility view some of our recent news posts:
- B.C. Accessibility Act
- How Accessibility Benefits a Business
- Website Images Best Practices
- What is Web Accessibility?
Or get in touch with our team of experts today to discuss your accessibility goals.