The Microsoft 365 admin center and the Azure portal both support Dark Mode, the popular setting available in Windows 10, MacOS, and most smartphones. Many users find it easier on their eyes, but there may be a dark side to this trend: Dark Mode and your company logo might not get along.
Here's an example:
Figure 1 – Now you see it, now you don’t. Same logo, three different background colors.
Figure 2 – As above, except this time it’s a white logo on a light-colored background that doesn’t show up.
In Figure 2, we see a (mostly) white logo designed for use in Dark Mode, set over three different background colors. It's only visible against a light-colored background. The logos shown in Figures 1 and 2 are PNGs with the background color set to transparent. (GIF images have a similar, albeit more limited color capability.) Thus, when a white logo is placed on a white background (such as a sign-in dialog box) or light gray panel (like a search results page), it’s either totally invisible or nearly so.
One solution is to use a logo on a solid background color, as shown in Figure 3.
Figure 3 – Same logo, but with a solid background color.
Another approach is to take the middle ground with a neutral gray color that lacks contrast but remains legible. Keep in mind, however, that low contrast designs can present accessibility issues for some users.
Figure 4– Beware of low-contrast combinations. They may present accessibility challenges to the vision impaired.
Another possible solution is to outline the image in a color that helps it stand out. Figure 5 shows the same logo—still on a transparent background, but with a dark outline added.
Figure 5 – Set your outline color just a little darker than the darkest background color on which you’ll be using the image and the logo will really pop off the page.
A word of caution here. Your company’s branding guidelines may forbid the alteration of colors, the addition of outlines, or other embellishments to a logo or the type associated with it. Check your guidelines and be a brand hero!
The situation may be trickier when a logo has multiple colors. In Figure 6, we’re using a transparent background for our multicolored logo and adapting the background colors as needed. Still, it’s hard to argue that, despite our best efforts at keeping the colors on brand, the logo on the dark background doesn’t show up quite as well.
Figure 6 – No outlines here. This logo keeps brand colors intact across both light- and dark-colored backgrounds.
The ultimate solution is to have separate logos for light and dark modes. Fortunately, both Microsoft Search and the M365 admin center support this feature, as described in part 2 of this article (coming soon).
Figure 7 – Here’s how light mode (left and center) and dark mode will look on various background colors.