This information mostly relates to email clients that do not support dark mode editing. In those that do support it, you have more control over how your email will look in dark mode. Find out more about dark mode editing here.
When you are building in Knak, we’ll show a warning on the Optimize Tab if you have used contrasting text over the top of an image, because it’s likely that the text will become difficult to read once it has been modified in Dark Mode.
We provide this warning because images are generally not modified at all in Dark Mode, while the text over the top of them almost always is. (The Gmail and Yahoo Apps for Android will sometimes invert pure white in images, they are the only email clients that will modify your images in Dark Mode.)
Below is an example of some dark text over the top of a light background, and how it looks in an email rendering test in Dark Mode:
Above, contrasting text over the top of a background image.
In many email clients in Dark Mode the text will be changed while the background image remains the same. This example, Microsoft Outlook for Windows:
There are a couple of things you can do to try to resolve this situation.
1. Adjust the color of your text
If it’s an option for you, then you can try to adjust the color of your text to try and achieve a better outcome in Dark Mode. This can be tricky but it can be worth trying a few different colors to see if any of them are a better fit across Light and Dark Modes.
2. Make your image semi-opaque and use a dark background color
If your background image is graphical, then try to create the image using transparency and save it as a 24-bit PNG so that the transparency is maintained in the image file.
For example, these two header images are almost identical, but the one of the left was created with solid colors, whereas the one on the right was created using darker colors that only have an opacity of 20-30%.
By saving that image as a 24-bit PNG, the transparency is baked into the image, meaning the background shows through when it’s placed in an email. In light mode, the effect is the same as the original image:
Above, the background created with solid colors. Below, the background created with semi-transparent colors.
In dark mode, the dark background has a chance to show through, and this helps to create a lot more contrast which makes our text much more readable in Dark Mode.
In dark mode, the dark background has a chance to show through, and this helps to create a lot more contrast which makes our text much more readable in Dark Mode:
In this image, we created the background image using opacity and saved it as a 24 bit PNG. This allows the dark background to show through, which helps to maintain some contrast with the text once it has also been modified for Dark Mode:
3. Add a panel behind the text
If you are using a photograph which isn’t easily edited, or you can’t edit the image yourself, then another approach is adding a panel behind your text.
For example, while text over the top of this dark photograph looks great in Light Mode, in Dark Mode it becomes illegible.
Light mode - the contrast here is great:
Dark mode - in Outlook for Windows, the white text is inverted:
To combat this, you can add a Nested Section over the top of your background image so that you can apply a contrasting background color behind the text. This contrast will then have a better chance of being maintained in Dark Mode when both of the colors are adjusted.
Here we have added a panel beneath the text:
In Dark Mode, the panel and text and adjusted in tandem, so contrast is maintained:
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com