MudraAccessible email signatures: contrast, alt text, size and the images-blocked test
· 5 min read
A signature that only works when every image loads and every colour is perfectly visible quietly excludes a lot of readers: people using screen readers, people with low vision, people on a phone in sunlight, and the many people whose email app blocks images by default. Fixing that mostly means a few good habits rather than a different design.
Keep the important things as real text
Your name, title, phone number and email should be actual text, not part of an image. Text is read aloud by screen readers, can be copied and tapped on a phone, and still appears when images are blocked. A signature that is one big picture of text fails all of those tests at once.
Images are for what they're good at: a logo, a headshot, a banner. If an image carries information someone needs, such as an event date on a banner, repeat it in text nearby.
Alt text: say something useful, or say nothing
Alt text is what a screen reader announces in place of an image, and what some email apps show when the image is blocked. Give a logo the company name and a headshot the person's name. Give social icons the name of the network, so "LinkedIn" rather than "icon".
A decorative icon placed next to text that says the same thing, like a phone glyph beside a phone number, should have empty alt text so it isn't announced twice. Mudra's templates follow this pattern: contact icons are marked decorative, and social icons carry the network name.
Contrast and size
The common accessibility standard asks for a contrast ratio of at least 4.5 to 1 between normal text and its background, and 3 to 1 for large text. Pale gray on white, a favourite for "quiet" lines like job titles and disclaimers, often fails. Use a free contrast checker on your brand colour before you commit to it.
Keep small print readable too. Around 12 to 14 pixels is comfortable for the main details, and even a disclaimer shouldn't drop much below 10. Don't use colour alone to carry meaning, such as red text to mean "urgent" with nothing else to say so.
- Body text: aim for 4.5:1 or better against its background.
- Brand-colour links on white: check them; saturated orange and light blue are common offenders.
- Disclaimers: keep them small but not pale.
Run the three quick tests
- Images off: send yourself a test with images blocked. Can you still tell who it's from and how to reach them?
- Dark mode: open it in a dark theme. A logo with dark text on a transparent background can disappear completely; give it a light backing or a version made for dark.
- Phone: view it on a small screen. Is the text still legible, and can you tap a link without hitting its neighbour?
Layout and links
Email signatures are built from tables, which is fine as long as they are marked as layout rather than data so screen readers don't announce them as a spreadsheet. Keep the reading order sensible, top to bottom: name, role, contact details, then the extras.
Make link text say where it goes. "Book a call" is better than "click here", and a bare URL is better than nothing. Avoid putting many links tightly together, which is hard to tap accurately.
Frequently asked
What contrast ratio do I need for a signature?＋
Aim for at least 4.5 to 1 for normal-size text against its background (the WCAG AA level), and 3 to 1 for large text. Any free contrast checker will calculate it from two hex colours.
Do social icons need alt text?＋
Yes. Without it a screen reader user hears nothing, or a meaningless filename. Use the network's name, such as LinkedIn or Instagram.
Will an accessible signature look plainer?＋
Rarely. It mostly means real text, a little more contrast and sensible alt text, none of which changes how a well-designed signature looks.
Build a signature your whole team can use
5,000+ templates, your logo and colours applied across all of them, free to start.
Start free