Accessible email signatures: alt text, contrast and size

What makes an email signature accessible? Real text rather than pictures of text, a short description on every image, enough contrast between text and background, a readable size, and links that say where they go. None of it costs anything or makes the design worse, and it helps everyone who reads your email on a small screen or with images turned off, not only people using a screen reader.

Keep text as text

The most common accessibility fault in signatures is a whole signature, or a phone number, saved as one image. A screen reader cannot read it, a recipient whose mail app blocks images sees nothing, and nobody can copy the number. Keep names, job titles, phone numbers and addresses as text, and use images only for the logo, photo and icons.

Describe every image

Each image needs a short text alternative, read out to people who cannot see it and shown when a mail app blocks images.

• Logo: the company name, such as "Example Ltd".
• Photo: the person's name, or leave it to the name beside it.
• Social icons: where the link goes, such as "Example Ltd on LinkedIn", not "icon".
• Banner: what the banner says, word for word if it is short.

In Footer365's editor, every image has an Alt text box, and it matters most when the image is a link. A campaign banner is drawn as a single image, so its wording lives in Description for readers who cannot see the image, which can be up to 500 characters. Our guides to logos, images and photos and to how the banner is sent show where each one is.

Contrast: the 4.5 to 1 rule

The Web Content Accessibility Guidelines set a minimum contrast between text and its background. Success criterion 1.4.3 asks for a ratio of at least 4.5 to 1 for normal text, and at least 3 to 1 for large text, which it defines as at least 18 point, or 14 point bold. Text that is part of a logo has no contrast requirement.

Where signatures fail it:

• Pale grey small print. Disclaimers are often set in a light grey that looks elegant and fails the check. Make small text darker, not paler.
• Brand colours on white. A light brand colour is fine for a rule or an icon, and often too light for text. Check it with any contrast checker before using it for job titles.
• Dark mode. Mail apps that invert colours can turn dark text pale on dark. Preview the signature in dark mode as well as light.

Size and spacing

• Keep body text at a normal reading size. Footer365's editor sets the font size in points, the unit Outlook uses, so what you choose is what Outlook shows.
• Disclaimers can be smaller than the rest, but not tiny.
• Give links and icons enough space that a finger can hit the right one on a phone.

Links that make sense on their own

Screen reader users often move from link to link. "Click here" says nothing out of context; "Book a meeting" or "Read our accessibility statement" does. Write the link text as the place it goes.

Do not rely on colour alone

If the only difference between a link and plain text is its colour, some readers will not see it. Underlined links, or icons with labels, solve that.

A plain-text fallback

When Footer365 converts a plain-text email to HTML, for example one sent from the iPhone's Mail app, it also sends a plain-text copy signed with the text version of your signature, for the few recipients whose mail app prefers plain text.

A five-minute check

1. Turn images off in your own mail app and read a signed email. Does every image say what it is?
2. Run your text colours through a contrast checker against white and against your dark mode background.
3. Read the link text in order, without the surrounding words. Does each one make sense?

Fix what fails once, in the template, and every email your organisation sends is fixed with it. That is the advantage of one central signature over hundreds of personal ones.