Check how an email will survive dark mode: declared schemes, hard-coded whites and risky mid-tone text

Email dark mode 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.

Dark mode check
color-scheme meta: yes; CSS color-scheme: yes; prefers-color-scheme dark block: yes; Outlook hooks: no

- [medium] #777777 on #ffffff is 4.48:1 in light mode already (needs 4.5:1 for body text). (td) Fix: Darken the text or change the background.
- [medium] Background images are not inverted; text over them keeps its colour while surrounding colours flip. Fix: Keep a solid bgcolor fallback and test text over the image in both modes.
- [low] color-scheme meta is set but supported-color-schemes is not; some Apple clients read the second tag. Fix: Add <meta name="supported-color-schemes" content="light dark">.
- [low] 2 text colour(s) are mid-tone (e.g. #777777, #0a64d8). Mid-tones tend to land on poor contrast after forced inversion. Fix: Test both modes; provide a lighter dark-mode value.
- [low] 1 PNG/SVG/GIF image(s). Dark text in a transparent PNG disappears on a dark background; a flat white-box logo becomes a bright rectangle. Fix: Use a logo with a thin light outline or a padded background tile, or swap versions with a media query using picture/source (Apple Mail) or two images toggled by class.
... full output on the tool page

What you get

Which dark-mode hooks are present and findings on backgrounds, contrast, images and forced inversion

What it cannot do

Client behaviour notes are our own and drift over time; the email is not rendered.

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_dark_mode. 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-dark-mode-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>