How to Fix Broken Emails in Outlook, Gmail, and Dark Mode

Your HTML email looks perfect in the editor. Then Outlook breaks the columns. Gmail ignores part of the styling. Dark mode hides the button. A screen reader describes the layout as a data table. Images are blocked, so the offer disappears.

Your team may find these problems during a rushed final test. Worse, customers may find them after the email is sent. You cannot repair a message that is already sitting in thousands of inboxes.

This pain is common. The Email Markup Consortium Accessibility Report 2026 tested 376,348 HTML emails. It found that 99.88% had at least one Serious or Critical accessibility issue. Only eight emails passed every automated check.

Email compatibility makes the risk harder to control. Gmail, Outlook, Apple Mail, mobile apps, and dark mode handle email code in different ways. One email can look good in one inbox and fail in another.

Migma fixes the problem earlier. Its AI creates an editable email. Its own email language and compiler turn the design into email-safe HTML. Migma Preflight checks the final result before you export or send it.

What did the email accessibility report find?

Email Markup Consortium collected 376,404 emails between May 2025 and May 2026. Fifty-six could not be tested because their code was invalid. The group tested the other 376,348 emails with Parcel's email accessibility checker.

The report also tested 10,566 emails sent through Substack, Shopify, and Beehiiv. None passed every automated check.

Common email accessibility problems included:

• 97.41% were missing text direction inside the email body.
• 95.66% were missing language details inside the email body.
• 83.78% used layout tables without telling screen readers that they were only for layout.
• 71.23% had links with no clear name.
• 58.48% had poor color contrast.
• 47.88% had images with no alt text.

These are basic problems. They still reach real inboxes because many email tools treat accessibility as a final checklist. By then, a team may be choosing between a delayed campaign and a risky send.

What does a broken email cost your team?

Broken email creates work at the worst time.

A marketer finds a bad link minutes before launch. A designer sees Outlook spacing fall apart. A developer gets pulled in to patch table code. A campaign owner sends more test messages and waits for screenshots. Every fix can cause another problem in another client.

Recipients carry the bigger cost. Someone may miss the offer because it only exists inside an image. A low-vision reader may not see pale text. A screen-reader user may hear empty links or confusing table details. A mobile reader may need to scroll sideways to reach the button.

This is why email accessibility and email compatibility belong inside the build process. A last-minute review cannot repair a weak foundation.

Are 99.88% of emails broken?

The report found Serious or Critical automated accessibility issues in 99.88% of the emails it tested.

It did not say that every email failed to appear on screen. It also did not prove that every email broke the law or failed every part of WCAG.

Automated checks have limits. A tool can check whether an image has alt text. A person still needs to decide whether that alt text is useful. A tool can check language settings, contrast, and table roles. A person still needs to check reading order and meaning.

The report shows that basic email accessibility checks are missing from most email production systems.

How to make an HTML email accessible

Email accessibility means people can read, understand, and use a message with different needs and tools. Poor accessibility blocks that experience.

Fix common email accessibility problems before send:

• useful alt text for important images;
• clear link and button names;
• readable text and strong color contrast;
• a clear heading order;
• a reading order that makes sense;
• important information written as live text, not trapped inside an image;
• language and text-direction details in the HTML; and
• a useful message when images are blocked.

Screen readers also need layout tables to be marked correctly. Add role="presentation" or role="none" to tables used only for layout. Set the email language and text direction. Give meaningful images useful alt text. Give decorative images empty alt text. Use link text that explains where the link goes.

Without these details, a screen reader may describe every row and column in a visual layout. The reader hears code structure instead of a clear message.

Why does email look broken in Outlook, Gmail, or dark mode?

Email compatibility means the message works across different inboxes, devices, and display settings. Poor compatibility changes or breaks the design after send.

Email clients do not share one rendering engine. Outlook may handle spacing, buttons, backgrounds, and columns differently from Gmail. Apple Mail may support a font or style that another app removes. Dark mode may change colors and make text, logos, or buttons hard to see.

How to fix Outlook email rendering problems

Classic Outlook uses Microsoft Word to process HTML. Modern website layouts often fail because Word does not handle HTML and CSS like a browser. Microsoft also warns that invalid HTML and manual code changes can cause rendering errors.

Use these fixes:

1. Build email layouts with tables instead of flexbox or grid.
2. Put important styles directly on each element with inline CSS.
3. Set clear widths for tables, cells, and images.
4. Add Outlook conditional code for layouts that need it.
5. Add fallbacks for rounded buttons, background images, and custom fonts.
6. Check for open tags, bad nesting, and invalid attributes.
7. Test Classic Outlook, new Outlook, and Outlook on the web separately.

Microsoft's email rendering guide recommends generated layouts, valid HTML, and testing custom code across email clients.

How to fix Gmail email rendering problems

Gmail supports many CSS properties, selectors, and media queries, but it can ignore unsupported code.

Use these fixes:

1. Keep essential styles inline.
2. Use CSS listed in Gmail's official CSS support guide.
3. Keep the source order readable when columns stack.
4. Give images fixed or fluid dimensions that fit the email width.
5. Use hosted HTTPS image URLs.
6. Test Gmail on web, Android, and iPhone.

How to fix email dark mode problems

Dark mode may invert backgrounds, text, buttons, and logos. Different clients apply different changes.

Use these fixes:

1. Keep strong contrast between text and background colors.
2. Test every important section in light and dark mode.
3. Use logos that remain visible on light and dark backgrounds.
4. Add color-scheme and supported-color-schemes metadata.
5. Keep important text as live HTML instead of text inside images.
6. Add safe background and text color fallbacks.

How to fix mobile email layout problems

Mobile email often breaks when wide tables, fixed images, or two-column sections cannot shrink.

Use these fixes:

1. Keep the main email width near common desktop email limits.
2. Make images fluid within their container.
3. Stack columns in a useful reading order.
4. Use readable body text without zooming.
5. Make buttons easy to tap.
6. Remove horizontal scrolling.
7. Test long headlines, names, prices, and translated copy.

Final compatibility testing should cover:

• Gmail;
• Outlook on web and desktop;
• Apple Mail;
• desktop and mobile layouts;
• light and dark mode;
• blocked images; and
• fallback fonts.

A screenshot can show how one version looks. It cannot prove that every inbox or screen reader will handle the email in the same way. Send a real test message to each important client before launch.

Why can AI-generated email HTML make the problem worse?

General AI tools can write HTML. Email HTML has stricter rules than normal website HTML.

One AI prompt may need to handle copy, layout, brand colors, mobile design, inline CSS, Outlook fixes, dark mode, links, alt text, and personalization. The result may look good in a browser while using code that fails in a real inbox.

Fast generation then creates slow repair work. The team spends time finding broken code, rebuilding sections, and testing each fix again.

Migma gives AI a smaller and safer job. AI describes the email using structured email parts. A compiler handles the inbox code.

How Migma fixes Outlook and email compatibility problems

Migma uses an internal email language called Zinn. Zinn describes sections, columns, text, images, buttons, spacing, brand styles, and mobile behavior.

Migma's compiler turns that structure into production HTML. According to Migma's email compatibility guide, the output uses:

• table-based layouts for email clients;
• inline styles;
• responsive patterns with safe fallbacks;
• dark-mode details;
• Outlook-specific structures; and
• fallbacks for buttons, backgrounds, and fonts.

This gives Migma one email rendering path. It works the same way when an email starts from an AI prompt, Figma design, screenshot, HTML import, old email, or visual edit.

You edit the message and design. Migma handles the difficult email code underneath. You do not need a hand-written Outlook table patch at the end of every campaign.

If you already have broken HTML, import it into Migma and rebuild it through the same email rendering path. If you start from a prompt, Figma design, screenshot, or old campaign, Migma still produces email-specific output.

How does Migma catch problems before customers do?

Migma Email Preflight checks the production HTML before export or send.

It checks:

• email-client previews;
• CSS compatibility;
• broken or slow links;
• spelling and grammar;
• language and content quality;
• unsubscribe and sender details; and
• spam and deliverability signals.

Each result appears as a pass, warning, or error. You can use Fix with AI to create a focused edit for flagged problems. After the edit, run Preflight again.

This moves failure to a safer point. The team sees broken links, weak content, or client warnings while the message can still be fixed.

Does Migma fix every email problem?

Migma handles the full production workflow: AI creation, email-specific code, client checks, AI fixes, test sends, export, and sending.

No email platform can promise the same pixels in every inbox. Email clients can block images, replace fonts, change colors, remove CSS, and rewrite forwarded messages. Their behavior also changes over time.

Automated tools cannot judge every part of the reading experience. A person should still review:

• alt text;
• link meaning;
• reading order;
• color contrast;
• light and dark mode;
• received test emails; and
• the screen readers the team supports.

Migma removes much manual compatibility work and catches common problems before send. Human review covers meaning and final approval.

Stop patching broken email HTML

If your current workflow is “generate HTML, paste it into an email tool, and hope Outlook behaves,” every campaign carries the same risk.

Use Migma before your next send:

1. Add your brand and campaign brief.
2. Ask Migma AI to create the email.
3. Review copy, links, contrast, and alt text.
4. Run Email Preflight.
5. Fix warnings and errors with AI.
6. Send test emails to Gmail, Outlook, and Apple Mail.
7. Export or send the approved email.

Create an email with Migma.

Frequently asked questions

Why does my HTML email look different in Outlook?

Classic Outlook uses Microsoft Word to process HTML. Flexbox, grid, positioning, background images, rounded corners, fonts, spacing, and nested browser layouts may change or fail. Use table-based email HTML, inline styles, Outlook fallbacks, and real Outlook tests.

How do I fix an HTML email that is broken in Outlook?

Replace browser layouts with tables, inline important CSS, set clear widths, add Outlook conditional code and fallbacks, validate the HTML, and test each Outlook version. Migma handles these steps through its email compiler and Preflight workflow.

How do I stop dark mode from breaking my email?

Use strong contrast, test light and dark versions, add color-scheme metadata, use visible logo treatments, and keep important copy as live HTML text. Complete control is not possible because each email client applies dark mode differently.

How do I test an email before sending it?

Check links, HTML, accessibility, mobile layout, light and dark mode, and important email clients. Then send real test emails to Gmail, Outlook, and Apple Mail. Migma Email Preflight puts these checks in one workflow.

What percentage of emails have accessibility problems?

Email Markup Consortium found that 99.88% of 376,348 HTML emails had at least one Serious or Critical automated accessibility issue. The number applies to the report's dataset and tests.

Who published the 99.88% email accessibility number?

Email Markup Consortium published it in the 2026 Accessibility Report. The report was created with Parcel.io and Flourish.

What is the difference between email accessibility and email compatibility?

Email accessibility means people can understand and use the message. Email compatibility means the code and design work across different email clients, devices, and display settings.

What is Zinn?

Zinn is Migma's internal email language and compiler layer. Migma AI creates structured email designs in Zinn. Migma's compiler turns them into production HTML for real inboxes.

Does Migma work with Outlook?

Migma creates table-based email HTML with inline styles and Outlook-specific fallbacks. You should still run Preflight and send a test to the Outlook versions your audience uses.

Does Migma replace accessibility testing?

Migma handles many source, compatibility, and preflight checks. Human review is still needed for alt-text quality, reading order, link meaning, and screen-reader use.

Sources

• Email Markup Consortium: Accessibility Report 2026
• Email Markup Consortium: Email Client Feature Support Rankings
• WCAG 2.2
• Migma: Email Client Compatibility
• Migma: Email Preflight
• Microsoft: Fix email rendering issues
• Google: CSS support in Gmail

Frequently Asked Questions