Skip to main content

20-20a Westminster Buildings, Theatre Square, Nottingham, NG1 6LG(0115) 888 2828

How to design an accessible logo

Written by Cheryl Swan on

Logos are of pivotal importance for a brand’s identity, however, the accessibility of them is often overlooked. This blog discusses ways to effectively design an inclusive logo.

Two people are sitting at a desk in front of a desktop monitor and laptop discussing how to make their logo design accessible. Surrounding them on the desk are colour wheels are print outs of different designs.

A company’s logo is the first thing you see when entering a website, app, or social media page. Or, at least it should be, if inclusive design considerations have been made. 

Although logos are exempt from certain Web Content Accessibility Guidelines (WCAG) criteria, for example:

  • Logos are required to have alternative text 
  • However, they do not have to conform with criteria such as meeting sufficient colour contrast ratios or having images of text

This doesn’t mean that these should be ignored. Cutting corners in the design process could result in you also cutting out a large demographic of people from connecting with your brand. In turn, losing potential custom, such as the 2.2 billion people who have a near or distance vision impairment.

Along with ensuring you use a high-quality logo, which is scalable, the following four best practice tips can help when designing an inclusive logo.

Using sufficient colour contrasts on your logo 

colour contrast icon

Obviously, your brand’s colour palette needs to look aesthetically pleasing, but also checking there is enough contrast is essential. Not only can colours with a low contrast ratio prevent some users with visual impairments from being able to see your logo, certain colours may also blend together for other users who are colour blind.    

For example:

14pt text pass

18 pt text pass

14pt text fail

18 pt text fail

Minimum standards, which provide a good colour contrast, should have a ratio of 4.5:1. Luckily, on the web, there is an array of free contrast checkers available (such as WAVE) to help you to easily assess if yours meet this standard.

Don’t worry if it doesn’t, it is unlikely for it to mean that you have to drastically change your entire branding. Often, only slight tweaks are needed to make your colours more distinct and accessible. 

Learn more about the use of inclusive colours and how to check if yours are accessible

Consider your logo’s typography and layout

Along with making your logos easy to see, you also want them to be simple to read at first glance. The typeface you select has a crucial part to play in this.

We advise steering away from the use of any fancy fonts. Choose a simple Sans Serif font, such as Arial, Calibri, Helvetica, or Tahoma. Where possible, you should also avoid using block capitals or fonts that have ‘imposter letter shapes’, as these visual styles can be confusing and affect readability.

Logos shouldn’t be visually complex or cluttered, so it’s also best to keep the design of your logo simple. Using a large, clear font, with adequate spacing will make your logo instantly more distinguishable. 

Many platforms now offer the choice of viewing a web page or app in dark mode to assist with accessibility. This feature can impact your logos visual state, so it’s always worth checking the logo’s styling within both modes.

If your logo has been created in a simple, single colour, web developers can manipulate the site’s Cascading Style Sheet (CSS) when saved as an SVG format to alter the colour between the two modes. Alternatively, for more complex logos, the path logo within the CSS or the use of javascript can also be set to contain two different coloured logos. 

Alt text assists blind and visually impaired users, who use screen reader software, to understand what is being portrayed within an image or to effectively navigate a website. 

To comply with WCAG 2.2 Level AA standards, websites are required to provide a text alternative with logos. This is due to the imagery often directing a user with a link to the homepage, rather than it being for purely decorative purposes. 

  • If the logo is not a clickable element, then the alt text should describe the image. Typically the company’s name should be sufficient in this instance. 
  • If the logo is a link to the homepage, the alt text should give a direction.

For example:

<a href=”https://www.horlix.com/”>
<img src=”HeX Productions.png” alt=”HeX Productions Homepage”>
</a>

Placing accessible design at the forefront will ensure all users can find your logo easy to perceive, read, and interact with. This creates an inclusive and welcoming brand identity. 

If you are in need of having an accessible logo designed or require assistance with adapting your colour palette to be inclusive, our experts are here to assist or advise.