Should my Logo be Accessible under the Web Content Accessibility Guidelines?

There are two factors to account for when it comes to the WCAG 2 accessibility of logos:

• Contrast of colours against the background colour that the logo will appear on
• Alternate text which identifies to screen-readers the text variant of the logo

There are also a number of techniques that are employed for generating the images themselves for example:

• A traditional raster image such as in .jpg, .png or .webp format
• A vector image such as in .svg format

And finally there are different techniques to actually embed the logo within a website such as:

• Within an img tag
• Inline with markup
• Using a CSS text-replacement technique

Colour Contrast

When it comes to colour contrast, logotypes are exempt from contrast requirements:

With that said, our experience informs us that when you are creating a new brand (or in the process of a rebrand), you should carefully consider the contrast of the colours used in the logotype. In practice, the logo colours often tend to be informed by the primary brand colours. And in an organization where all of the content is not necessarily generated by a designer that is aware of contrast requirements, we find staff tend to informally use the logotype colours to create headings or other text without consideration of the accessible usage of these colours.

This is why we advise, and often develop for our clients, simplified brand guidelines that take this common use-case into consideration. Unless your team is able to strictly produce content using approved variations of the primary logotype colours, it’s advisable to consider the contrast of your logotype colours against common background colours that you employ, commonly white, light gray, dark gray and black so that you can easily employ those same colours within your branding.

The following checkers can help you with choosing colours that are contrastful:

Alternate Text

If your logo appears within an img tag, you should mark it up with alt text such as:

<img src="org-logo.jpg" alt="Organization's Logo">

If it appears as an inline SVG however, you should mark up a title tag within the SVG as follows:

<svg ...><title>Organization's Logo</title></svg>

On the other hand, you may choose to use a CSS text-replacement technique to display your logo. In this case, ensure that the text that is being replaced contains the text variant of the logo so for example:

<span class="org-logo">Organization's Logo</span>

Need Help?

If your organization needs support in developing its branding, our experienced designers and web developers can help you with developing a detailed branding guideline document together with developing logotypes and provide best-practices to your team towards an inclusive, distinctive and easy-to-use brand. Connect with us to set up a quick call and discuss your requirements.