Web App
Dark Mode Simulation & Contrast
Preview client-specific dark mode transformations across WebKit, Blink, and Gecko engines with contrast warnings.
Different email clients handle dark mode with completely divergent rendering models. Emailens simulates the exact transformation logic used by each client so you can prevent illegible text or unreadable logos before sending.
Client Transformation Models
| Client | Transformation Model | Behavior & Strategy |
|---|---|---|
| Apple Mail (iOS / macOS) | Standards-Compliant (No Inversion) | Honors @media (prefers-color-scheme: dark) and [data-ogsc] selectors. Leaves content untouched unless you supply custom dark styles. |
| Gmail Web | No Inversion | Darkens application chrome, leaving email body unchanged. |
| Gmail Android | Partial Inversion | Detects light backgrounds and inverts them to dark; darkens text. Leaves elements with already-dark backgrounds alone. |
| Gmail iOS | Full Inversion | Forces full color inversion across the entire DOM tree, including elements that were already dark. |
| Outlook Web (OWA) | Attribute Inversion | Converts inline styles to custom [data-ogsc] and [data-ogsb] attributes. |
| Outlook Windows (Classic) | MSO Inversion | Applies Word rendering engine background swaps, occasionally leaving white borders around tables. |
| Samsung Mail | Partial Inversion | Inverts light containers; respects prefers-color-scheme in modern versions. |
| Thunderbird | Media Query First | Full support for @media (prefers-color-scheme: dark) with fallback color shifting. |
Automated Contrast Validation
Under the Dark Contrast audit tab, Emailens measures WCAG 2.1 AA/AAA compliance against inverted backgrounds. Common issues caught:
- Dark logos on transparent PNGs: Disappear on inverted black backgrounds (fix: add subtle white outer glow or stroke).
- Hardcoded white table cells: Clashing against inverted dark text.
- Low-contrast muted text:
#888888fading below 4.5:1 ratio when client alters container luminosity.