Email accessibility checker, including dark mode
Paste your email HTML and get real WCAG 2.1 AA contrast ratios — measured once as you authored them, then again inside a simulated Gmail dark-mode inversion. Plus the transcript a screen reader announces, and colour-vision lenses over your real email.
Free · no signup · your HTML never leaves your browser
Three things a screenshot cannot tell you
Everything here comes from keeping your colours and CSS as a model, instead of flattening them into a picture.
- 1
Measured contrast, twice
Contrast is read from the resolved cascade in a sandboxed frame — inherited colours, alpha layers and legacy bgcolor hints included — then re-measured inside a simulated Gmail dark-mode repaint.
- 2
What a screen reader says
A linear transcript in announcement order, with each element’s role. Unlabelled images, "click here" links and unmarked layout tables stop being abstract markup problems and become a sentence that does not make sense.
- 3
Colour-vision lenses
Machado (2009) matrices applied in linear light over your real email — protanopia, deuteranopia, tritanopia and the more common anomalous forms — so a red-on-green CTA that collapses into one shade is visible before you send.
The dark-mode contrast trap
A third to a half of email is read in a dark interface, and only Apple Mail honours the dark styles you author — Gmail and Outlook force-invert instead. That inversion moves luminance while preserving hue, and never touches images, so a palette signed off as AA-compliant on white can quietly fail. Because we invert the HTML rather than screenshotting a device, we can mount the inverted DOM and measure it.
- Every text style measured as authored AND after the inversion
- Rows that pass in light and fail in dark are listed first, and badged
- Images are never inverted here, exactly as they are never inverted in a real client
Why email accessibility is its own problem
Web accessibility tooling assumes semantic HTML and a live browser. Email is neither: table-based by necessity, styles inline because clients strip <style> blocks, and rewritten by the client before anyone sees it. So an axe-core run on an email is mostly noise — it flags the layout tables email requires and misses what actually breaks. This audit checks the email version of the rules instead.
- Findings reference the WCAG 2.1 criterion they come from
- Text over gradients and background images is reported as unverifiable, never as a pass
- An estimated fix time per finding, so a report is a work plan rather than a scolding
The eight fixes that cover most emails
Give every image real alt text
And an empty alt="" on spacers and decorative slices so they are skipped rather than announced as filenames. If a graphic carries the offer, the alt text has to carry the offer.
Never let an image be the only copy
Images are blocked by default in Outlook and for many Gmail users, so an image-only email arrives as a blank rectangle — and as silence for a screen reader.
Mark layout tables presentational
Screen readers announce tables as data unless told otherwise. Add role="presentation" to every table that is scaffolding, and keep real <th> headers for tables that hold data.
Write link text that stands alone
Screen reader users jump link to link, so five “Click here” links are five unknown destinations. Name the destination in the link.
Body copy at 16px, tap targets at 44px
14px is where “readable on a phone” starts to fail, and a target under 44×44px is one people miss. Bulletproof buttons built from padded table cells hit both marks.
Set the document language
One lang attribute on <html> decides which voice a screen reader uses. Without it, English copy can be read out with the wrong pronunciation rules.
Do not let colour be the only signal
“Items in red are sold out” disappears for someone with protanopia, and again after a dark-mode inversion. Pair colour with a label, an icon or a weight change.
Check the contrast in both modes
The one item here nobody can do by eye, and the reason this tool measures every text style twice.
More free email tools
Every one of these runs in your browser, needs no account, and has no usage limit.
Email accessibility, answered
- Is this email accessibility checker free?
- Yes, and there is no signup or usage limit. The contrast measurement, the read-aloud transcript and the colour-vision lenses all run inside your browser, so your HTML never leaves your machine.
- What does “passes in light, fails in dark mode” mean?
- Gmail and Outlook force-invert the colours of emails that do not author their own dark styles. A caption that clears WCAG AA at 7:1 on white can land under 4.5:1 once the panel behind it is repainted dark — and because images are never inverted, a light logo can end up on a light box inside an otherwise dark email. We measure contrast twice: as you authored it, and again inside the simulated dark render. Rows that flip from pass to fail are listed first.
- Which WCAG level does it check against?
- WCAG 2.1 Level AA: 4.5:1 for normal text and 3:1 for large text. We treat text as large at 18.66px, or 14px when bold, rather than the standard’s 18pt/14pt-bold, because email type is authored in px and the pt figures would classify almost no body copy as large. Those thresholds are exported constants in our engine, not magic numbers.
- What happens when text sits on a gradient or a background image?
- We report it as unverifiable rather than guessing. The contrast ratio of text over a photo varies across the element, and no honest single number exists for it — so the finding says the backdrop could not be determined and why. Tools that quietly composite over white and hand you a confident number are wrong more often than they admit.
- What is the read-aloud transcript?
- A linear transcript of what a screen reader announces, top to bottom, with the role of each element (heading level 2, link, image, list item 3 of 5). Read it out loud. Layout tables that were never marked presentational, images whose alt text is "spacer.gif", and link text that is just "click here" become obvious in seconds — much faster than auditing the markup.
- Do the colour-vision lenses use real simulation maths?
- They use the Machado, Oliveira and Fernandes (2009) matrices, applied in linear light via SVG feColorMatrix with color-interpolation-filters="linearRGB". Applying those matrices to gamma-encoded values — which is the common shortcut — produces visibly wrong output, so we do not do it. Both the complete dichromacies and the far more common anomalous forms are included.
- Does an accessible email have to look plain?
- No. Almost everything this tool finds is a small change: darken a caption by one step, add real alt text, put a text link next to an image button, mark a layout table role="presentation". None of that touches your design.
Get accessibility reviewed, not just checked
Share the email for review and let a designer, a copywriter and a client all leave feedback pinned to the exact pixel — then approve it on the record.
14-day all-access trial · no credit card required · reviewers never need an account