Email Signature Accessibility: A WCAG Compliance Checklist

Here's something uncomfortable: if your signature uses a cursive font and colored text on a colored background, about 15% of recipients struggle to read it.

That's not a hypothetical. The WHO estimates 2.2 billion people globally have vision impairments. Add in cognitive differences, motor impairments, and situational disabilities (like reading email in bright sunlight), and accessibility isn't niche - it's baseline professionalism.

Yet most email signatures fail basic accessibility tests. Let's fix that.

What is Email Signature Accessibility?

An accessible email signature is one that works for everyone, including people who:

• Use screen readers (JAWS, NVDA, VoiceOver)
• Have low vision or color blindness
• Have cognitive differences like dyslexia
• Use keyboard-only navigation
• Are in challenging environments (bright light, small screens)

The standard to follow is WCAG (Web Content Accessibility Guidelines). While technically designed for websites, the principles apply perfectly to HTML email signatures.

The Quick Wins

1. Use Text, Not Images of Text

This is the single biggest accessibility issue in signatures. When you export your entire signature as a PNG:

• Screen readers see nothing (or just "image")
• Users can't copy your contact information
• Zoom doesn't help - the image just gets pixelated
• Low bandwidth connections may not load it

Do this instead: Use actual HTML text for all contact information. Reserve images for your logo and optional headshot only.

2. Choose Accessible Fonts

Script fonts and decorative typefaces cause problems for:

• Screen readers (inconsistent pronunciation)
• People with dyslexia (letter confusion)
• Anyone reading quickly

Safe choices: Arial, Verdana, Tahoma. These have clear letter differentiation and consistent rendering.

Font size: 12pt minimum. 11pt is technically passable but harder for many readers.

3. Fix Your Color Contrast

The WCAG requirement is a 4.5:1 contrast ratio for normal text. What does that mean practically?

Pass: Black text (#000000) on white background (#FFFFFF) = 21:1 Pass: Dark gray (#333333) on white = 12.6:1 Fail: Light gray (#999999) on white = 2.8:1 Fail: Most brand blues on white (check yours specifically)

Use a contrast checker tool before finalizing colors.

4. Add Alt Text to Every Image

Every image in your signature needs an alt attribute. Even decorative images need alt="" (empty but present).

For logos:

<img src="logo.png" alt="Acme Corp logo" width="100">

For headshots:

<img src="jane-headshot.jpg" alt="Jane Smith, Sales Director">

For decorative separators:

<img src="divider.png" alt="">

Without alt text, screen readers might announce the filename ("image-dash-final-dash-v3-dot-png") or skip the image entirely.

5. Make Links Descriptive

Screen reader users often navigate by links. "Click here" tells them nothing.

Bad: "Click here for our website" Good: "Visit acmecorp.com" or "Acme Corp website"

For social icons: The alt text should identify the platform:

<a href="https://linkedin.com/company/acme">
  <img src="linkedin-icon.png" alt="Acme Corp on LinkedIn">
</a>

The Detailed Checklist

Run through this before deploying any signature:

Text and Typography

• All contact info is real text, not images
• Font size is 12pt or larger
• Font is web-safe (Arial, Verdana, Tahoma, Georgia)
• No script or decorative fonts for important information
• Line height is at least 1.5x font size

Color and Contrast

• Text-to-background contrast is 4.5:1 or higher
• Links are distinguishable without relying only on color
• Information isn't conveyed by color alone
• Works in both light and dark mode (if applicable)

Images

• Every image has appropriate alt text
• Images have explicit width and height
• Logo doesn't exceed 150px width
• No text information is embedded in images

Links

• Link text describes the destination
• Phone numbers use tel: links for click-to-call
• Email addresses use mailto: links
• No "click here" or "learn more" links

Structure

• Logical reading order (name first, then role, then contact)
• Table-based layout is used correctly (if using tables)
• No complex nested tables
• Information hierarchy is clear

Testing Your Signature

Screen Reader Test

Try this: have someone read your signature aloud as a screen reader would.

Do they know:

• Who it's from?
• What company?
• How to call or email you?
• What the links go to?

If any answer is unclear, your accessibility needs work.

Keyboard Navigation Test

Tab through your signature's links. Can you:

• Reach every link?
• Tell where each link goes?
• Activate links with Enter?

Color Blindness Test

Use a tool like Coblis to simulate how your signature looks with different types of color blindness.

Common Accessibility Mistakes

Using "Phone" as a Link

<!-- Bad -->
<a href="tel:+15551234567">Phone</a>

<!-- Good -->
<a href="tel:+15551234567">+1 (555) 123-4567</a>

Missing Language Attribute

If your signature includes text in multiple languages, mark it:

<span lang="es">Habla Espanol</span>

Icon-Only Social Links

<!-- Bad (no alt text) -->
<a href="linkedin.com/in/jane"><img src="linkedin.png"></a>

<!-- Good -->
<a href="linkedin.com/in/jane">
  <img src="linkedin.png" alt="Jane's LinkedIn profile">
</a>

Frequently Asked Questions

Is email signature accessibility legally required?

In many cases, yes. The ADA in the US, the Accessibility for Ontarians with Disabilities Act in Canada, and similar laws in the EU can apply to business communications. Government contractors and public organizations have explicit requirements under Section 508.

Do I need to be WCAG AAA compliant?

WCAG AA is the typical target for business communications. AAA is aspirational - nice to achieve but not legally required in most contexts.

Will accessible signatures look boring?

No. Accessibility and design aren't opposites. You can have brand colors (just check contrast), images (with alt text), and visual hierarchy (using proper HTML). The constraints actually tend to produce cleaner designs.

How do I test with a screen reader?

VoiceOver (Mac/iOS), NVDA (Windows, free), and JAWS (Windows, paid) are the most common. Start with VoiceOver since it's built into every Mac. Turn it on, close your eyes, and try to understand your signature.

What about email clients that strip HTML?

Some security-conscious recipients view emails in plain text. Include a text-only fallback by ensuring your signature reads sensibly when all HTML is stripped.

Key Takeaways

• Text-based signatures beat image-based for accessibility
• Color contrast of 4.5:1 minimum is required for WCAG compliance
• Every image needs alt text, even decorative ones
• Descriptive link text helps screen reader users navigate
• Test with actual screen readers, not just visual inspection
• Accessibility constraints often improve design for everyone

Making It Happen

Accessibility can feel overwhelming, but start with the quick wins: use real text, check your contrast, and add alt text. Those three changes solve 80% of accessibility issues.

If you're managing signatures for a team, this gets harder fast. That's why Signkit's templates are built with accessibility in mind from the start - proper HTML structure, contrast-checked colors, and correct alt text handling.

Check out our accessible signature templates or read more about our approach to inclusive design.

Every email you send is a chance to include everyone. That's worth getting right.