Alt text for logos

Logos look simple, but they’re one of the most commonly mishandled images on the web. The usual mistakes are alt="logo", alt="company-logo-final.png", or no alt at all. The right answer depends on where the logo is and what it does, and the word “logo” almost never needs to appear.

The short version

Why not just say “logo”?

Because “logo” tells a screen reader user nothing they need. They want to know whose logo it is, and if it’s a link, where it goes.

W3C’s tutorial covers both cases. For a logo that isn’t linked, the example is the Web Accessibility Initiative logo with alt="Web Accessibility Initiative", and W3C adds: “There’s no need to mention that it is a logo” (W3C, Images of Text). For a logo that’s the only content of a link to the homepage, the example is alt="W3C home". In that case “its primary function is to link to the homepage, so the word ‘home’ was added” (W3C, Functional Images).

A logo is usually an image of text. The rule for images of text is that “the text alternative must contain the same text presented in the image” (W3C). If the logo is only a symbol with no words (an apple, a swoosh), use the company name, because that’s what the symbol means.

Header logos

<a href="/" class="site-logo">
  <img src="/img/northwind.svg" alt="Northwind Coffee home">
</a>

Some teams prefer just “Northwind Coffee” for a header logo link, on the basis that “logo in the top-left goes home” is a widely understood convention. Either is defensible. What matters is that the name is there. “Home” helps when someone browses a list of links out of context.

If your header has the logo image and the company name as visible text in the same link, give the image alt="" so the name isn’t read twice:

<a href="/">
  <img src="/img/mark.svg" alt=""> Northwind Coffee
</a>

This is W3C’s “Logo image within link text” example.

SVG logos

Many sites inline their logo as SVG. With no <img> there’s no alt attribute, so name it explicitly:

<a href="/" aria-label="Northwind Coffee home">
  <svg aria-hidden="true" focusable="false">…</svg>
</a>

or give the SVG role="img" and a <title>. Test it with an actual screen reader, because SVG naming support has historically varied.

“As featured in” and client logo strips

A strip of eight press or client logos is common on landing pages, and often ships with eight identical alt="logo" values, or none.

If the logos are there to make a claim (“these companies use us” or “we’ve been covered by these outlets”), that claim is information. Give each logo the organisation’s name:

<p id="press">As featured in</p>
<ul aria-labelledby="press" class="logo-strip">
  <li><img src="guardian.svg" alt="The Guardian"></li>
  <li><img src="lemonde.svg" alt="Le Monde"></li>
</ul>

Putting the strip in a list with a visible heading or label gives screen reader users context (“list, 8 items, As featured in”) without repeating “featured in” in every alt.

A strong opinion worth stating: only show logos you have permission to show and that are true. It’s both an ethics and a legal issue. (Altpass shows no customer logos until it has real customers who agree to it.)

Partner logos that link out

If each logo links to that partner’s site, the link purpose is “go to Acme Logistics”. “Acme Logistics” alone is usually clear enough. If you want to signal that the link leaves your site, say so in text or with an icon that has its own alt (“opens in a new tab”) rather than cramming it into every logo.

Award, trust and certification badges

Badges are logos that make a specific claim, so put the claim in the alt:

• alt="Winner, Best Coffee Roaster 2026, Paris Food Awards"
• alt="Certified B Corporation"
• alt="Trustpilot rating: 4.6 out of 5". If the rating changes, the alt must change too. A dynamic badge with a stale alt is misleading.

Payment logos in footers (Visa, Mastercard, PayPal) are a judgement call. If they tell shoppers which payment methods are accepted, name them, or replace the strip with a text list such as “We accept Visa, Mastercard and PayPal”, which is better for everyone.

Logos in emails

Many email clients block images by default, so the alt text is what recipients see first. For an email header logo, use the brand name (alt="Northwind Coffee"). For a logo that links to your site, describe the destination. Inline styles on the <img> can make the alt text readable when images are off.

A note on logo contrast

Logos are exempt from WCAG’s colour-contrast requirements for text, and W3C notes that “images used as logos are exempt from some of the accessibility requirements that apply to other images of text… there are no minimum color contrast and text size requirements” (W3C). They are not exempt from needing a text alternative.

Checklist

• [ ] No alt contains the word “logo” unless the logo itself is the subject (for example a brand guidelines page).
• [ ] The header logo link has a name that includes the company name.
• [ ] Logos next to the same name in text are alt="".
• [ ] Each logo in a strip has the organisation’s name, inside a labelled list.
• [ ] Badges state their claim, and dynamic badges keep it current.
• [ ] Inline SVG logos have an accessible name and have been tested with a screen reader.

How Altpass handles logos

Altpass reads text it can see in the image and checks whether the logo is linked and where to. For a linked header logo it typically suggests “[Name] home”. For a logo already accompanied by the name in text, it suggests alt="". For logo strips it drafts one name per logo. Brand names in stylised lettering are a classic case where AI can misread, so check those suggestions carefully before approving.

Check your header and footer

Logos live in templates, so one fix usually repairs every page. Run the free Altpass checker on your homepage to see how your header, footer and logo strips score.

Updated 2026-10-07