Find accessibility faults in an email: missing alt or lang, vague links, low contrast, text in images

Email accessibility checkFreeFor developers and designers

25/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Your October receipt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<style>.row{display:flex}.btn{background:#0a0a0a url(btn.png) no-repeat}@media (prefers-color-scheme: dark){.bg{background:#111!important}}</style></head>
<body style="margin:0;background:#ffffff">
<div style="display:none;max-height:0;overflow:hidden;opacity:0">Receipt for order 1042, total $48.00&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</div>
...

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Email accessibility check

- [high] 1 image(s) have no alt attribute at all. Fix: Describe the image, or alt="" if decorative.
- [high] #777777 on #ffffff is 4.48:1; needs 4.5:1 at 12px. (td) Fix: Darken the text or lighten the background.
- [medium] 1 link(s) use vague text ("click here"). Screen reader users often browse a list of links out of context. Fix: Name the destination or action: 'Track your order'.
- [low] 1 inline link(s) have the underline removed with no other cue (WCAG 1.4.1: do not rely on colour alone). Fix: Keep the underline in body copy, or add weight or a border.
- [low] 3 font-size declaration(s) under 14px. Fine for legal footers (11px or more), too small for body copy. Fix: Use 14 to 16px for body text.

Email client support notes are from our own testing notes dated 2026-10 and may have drifted. Confirm in real clients (Litmus, Email on Acid, or seed accounts) before sending.
Limits: static markup checks. Contrast is read only where text and background colours sit on the same element, so inherited colours and images behind text are not measured. Reading order, focus and real screen reader output are not tested.

What you get

Findings with severity for lang, title, layout tables, alt, link text, headings, contrast and small text

What it cannot do

Static checks only; it does not replace a screen reader pass, and contrast reads colours set on the same element.

Who it is for

Developers
Designers

Free and Pro

Free	25 runs a day per IP address, up to 200,000 characters a run.
Pro	No daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called check_email_accessibility. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp

curl -X POST https://designers.allthepossibles.com/api/email-accessibility-check -H 'content-type: application/json' -d '{"html":"<!DOCTYPE html>\n<html lang=\"en\"><head><meta charset=\"utf-8\"><title>Your October receipt</title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"color-scheme\" content=\"light dark\">\n<style>.row{display:flex}.btn{background:#0a0a0a url(btn.png) no-repeat}@media (prefers-color-scheme: dark){.bg{background:#111!important}}</style></head>\n<body style=\"margin:0;background:#ffffff\">\n<div style=\"display:none;max-height:0;overflow:hidden;opacity:0\">Receipt for order 1042, total $48.00&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</div>\n<table role=\"presentation\" width=\"640\" align=\"center\" style=\"width:640px\"><tr><td class=\"bg\" style=\"background-color:#ffffff;color:#777777;font-size:12px\">\n<img src=\"https://example.com/logo.png\" width=\"120\">\n<h1 style=\"font-size:22px\">Thanks for your order</h1>\n<p>Your total was $48.00. <a href=\"https://example.com/receipt\" style=\"color:#0a64d8;text-decoration:none\">click here</a></p>\n<a href=\"https://example.com/track\" style=\"display:inline-block;padding:6px 10px;background:#0a0a0a;color:#ffffff;font-size:13px\">Track it</a>\n<p style=\"font-size:11px\">Sent by Example Co. <a href=\"https://example.com/unsubscribe\">Unsubscribe</a></p>\n</td></tr></table></body></html>"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

The email HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Your October receipt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<style>.row{display:flex}.btn{background:#0a0a0a url(btn.png) no-repeat}@media (prefers-color-scheme: dark){.bg{background:#111!important}}</style></head>
<body style="margin:0;background:#ffffff">
<div style="display:none;max-height:0;overflow:hidden;opacity:0">Receipt for order 1042, total $48.00&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</div>
<table role="presentation" width="640" align="center" style="width:640px"><tr><td class="bg" style="background-color:#ffffff;color:#777777;font-size:12px">
<img src="https://example.com/logo.png" width="120">
<h1 style="font-size:22px">Thanks for your order</h1>
<p>Your total was $48.00. <a href="https://example.com/receipt" style="color:#0a64d8;text-decoration:none">click here</a></p>
<a href="https://example.com/track" style="display:inline-block;padding:6px 10px;background:#0a0a0a;color:#ffffff;font-size:13px">Track it</a>
<p style="font-size:11px">Sent by Example Co. <a href="https://example.com/unsubscribe">Unsubscribe</a></p>
</td></tr></table></body></html>