Your company logo is an essential component of your branding strategy — and if it’s not utilized with an accessible mindset, you could miss an opportunity to connect with potential customers. That’s especially true when you feature your logo on your website, mobile app, and other digital resources.
The Web Content Accessibility Guidelines (WCAG) doesn’t restrict brands from using logos with certain accessibility issues, provided that those logos contain accurate markup. However, if you have the opportunity to make improvements, you should certainly take that step.
Over a billion people live with disabilities worldwide; by offering simple accommodations, you can reach more people and improve perceptions of your brand. With that in mind, here are a few tips to consider when using your logo (and other company logos) online.
Related: Digital Accessibility Benefits Your Brand
1. Use color appropriately when designing your logo
If your logo contains text, that text should be legible. Maintaining an appropriate contrast ratio can improve readability, particularly for people with color vision deficiencies (also known as colorblindness) and other vision-related conditions.
WCAG 2.1 Success Criterion (SC) 1.4.3 specifically exempts company logos and brand names from contrast requirements. However, it’s important to remember that the goal of accessibility isn’t WCAG conformance — your goal is to present the best possible experience for your users. If you can meet contrast ratio requirements when designing your logo, it’s in your best interest to do so.
Color contrast is a numerical value that defines the difference between text and background elements. When designing your logo, try to maintain a minimum contrast ratio of 4.5:1 (or 3:1 for larger text). Our free Color Contrast Accessibility Validator provides an easy way to check color choices against WCAG standards.
If you can’t maintain an accessible color contrast ratio while preserving your company’s existing branding, that’s okay. You should still make sure your designers understand the importance of contrast for accessibility — contrast issues are some of the most common accessibility barriers for online content, so get into the habit of reviewing your use of color.
Related: The Basics and Importance of Color Contrast for Web Accessibility
2. Write appropriate alt text
WCAG 2.1 SC 1.1.1 requires websites to provide a text-alternative for all non-text content. Decorative content is excepted from this requirement — but in the vast majority of cases, logos aren’t purely decorative.
If your logo conveys information, you’ll need to include alternative text (also known as alt text). Some quick tips:
- Write clear, concise text. For most logos, writing the text that appears in the image (typically, the company’s name) will be sufficient.
- It is acceptable to use the word “logo" within your alt text (for example, “Bureau of Internet Accessibility logo"), but not strictly necessary.
- Don’t use the word “image" within your alt text. Screen readers will tell the user that the alternative text is for an image, so writing alt text like “image of the Apple logo" would be redundant.
Related: 5 Steps for Writing Alt Text for Accessibility
3. If clicking your logo is a hyperlink, make sure it’s accessible
Logos often function as hyperlinks. If clicking the logo redirects the user to your homepage or any other part of your website, use appropriate markup to tell people what to expect.
Here’s our markup for the Bureau of Internet Accessibility logo that appears throughout our website:
<a href="/" title="Homepage for Bureau of Internet Accessibility"><img src="https://www.boia.org/hubfs/Logos/150.png" class="img-fluid" alt="Bureau of Internet Accessibility"></a>
<img src="https://www.boia.org/hubfs/Logos/150.png" class="img-fluid" alt="Bureau of Internet Accessibility">
By identifying the target of the hyperlink (“Homepage for Bureau of Internet Accessibility"), this markup tells users what will happen when they click. Note that the hyperlink alt text doesn’t replace the image alt text — you’ll need to provide both of these attributes.
To avoid redundancy, do not use words like “link" in your hyperlink alt tags. Users will understand that they’re viewing a link, so provide just enough information to help them navigate your content.
Related: Quick Guide to Accessible Hyperlinks
4. Pay attention to all logos on your website — not just your company logo
In addition to a primary logo, most businesses display other logo images (for example, the logos of major clients or logos indicating certifications). These logos aren’t purely decorative — they add contextual information that could be important for some users. As such, you’ll need to review them for accessibility issues.
Make sure that non-visual users have access to all of the relevant information from the image. For example, if a visual logo contains the text “Top Car Salesman,” along with the stylized text “2018,” the alt text might read: “top car salesman of 2018.”
Once again, if any logos function as hyperlinks, make sure you’re including appropriate text alternatives. Keep all of your alt text concise — while logos are rarely decorative, they’re usually not an especially important part of your page, and screen readers will read out any (and all) of your alt text. Writing too much can have a negative effect on the user’s experience.
For additional guidance, contact the Bureau of Internet Accessibility or download our free ebook, Developing the Accessibility Mindset.
