This information mostly applies to email clients that do not support Dark Mode editing. Email clients that support Dark Mode editing give you more control over how your email appears in Dark Mode. Learn more in the Dark Mode Editing article.
How Dark Mode Affects Background Images
Dark mode can change how your email content appears across different email clients.
In many clients:
Text colors are automatically adjusted
Background images remain unchanged
Contrast between text and images can become difficult to read
This issue commonly affects:
Hero banners
Text overlays
Promotional graphics
Background photography
Use the techniques in this article to improve readability in both light mode and dark mode.
Optimize Warning for Text Over Background Image
When you build emails in Knak, the Optimize tab may show a warning if you place contrasting text over a background image.
This warning appears because:
Most email clients modify text colors in dark mode
Background images usually stay unchanged
This can reduce contrast between the image and the text
Gmail and Yahoo Mail apps on Android may invert pure white areas in images. Most other email clients do not modify images in dark mode.
Example: Text Over a Background Image
In light mode, dark text over a light image may appear readable.
In dark mode, some email clients automatically invert text colors. This can make the text difficult to read against the original image.
For example, Microsoft Outlook for Windows may invert dark text to light text while leaving the background image unchanged.
Option 1: Adjust the Text Color
Try using different text colors that work better across both light mode and dark mode. This approach may require testing multiple color combinations.
Tips
Avoid pure black or pure white text
Use softer contrast colors when possible
Test renders in multiple email clients
Option 2: Use a Semi-Transparent PNG Image
If your background image is graphical, create the image using transparency instead of solid colors. Save the image as a 24-bit PNG to preserve transparency.
This allows the email background color to show through the image.
Why This Helps
In dark mode:
The darker background color becomes partially visible
Contrast improves between the text and image
Text remains easier to read
Example Workflow
Create the image using colors with 20–30% opacity
Save the image as a 24-bit PNG
Apply a dark background color behind the image in Knak
Incorrect Setup
Solid image colors remain unchanged in most email clients. The text may become difficult to read in dark mode.
Recommended Setup
Transparent areas allow the section background to show through. This improves contrast when dark mode changes the text color.
Option 3: Add a Panel Behind the Text
If you cannot edit the image, add a background panel behind the text. This method works well for photography or complex imagery.
Why This Helps
In dark mode:
The panel color changes together with the text color
Contrast is more likely to remain readable
Text visibility improves across clients
How to Add a Panel
Add a Nested Section over the background image
Apply a contrasting background color to the nested section
Place the text inside the nested section
Incorrect Setup
Complex images make text difficult to read after dark mode changes the text color.
Recommended Setup
The background panel provides consistent contrast. This improves readability in both light mode and dark mode.
Best Practices for Dark Mode Background Images
Avoid placing text directly over busy images
Use high-contrast color combinations
Test emails in both light mode and dark mode
Preview renders in multiple email clients
Use panels or transparent overlays when possible
Consider embedding a short demo video that shows:
The dark mode rendering issue
Each solution in action
Before-and-after comparisons
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.