A lot of companies that I encounter use logos and images against a transparent background. This works well for them in most cases, because they can determine the color of the background that the logo image is placed against. One area where this can be a problem is in Windows High Contrast mode (HCM). That black transparent logo will completely disappear in High Contrast Black.
Understanding High Contrast Mode
First lets take a moment to understand how HCM in Windows works.
Text
All text colors are replaced with the HCM defined colors. These are often different colors based on the type of element. For example, buttons, links and paragraph text will usually be styled differently.
The line height and width that is occupied by the text will get a background that is defined in the HCM.
Borders
All borders are now 100% visible. This includes borders that were previously transparent. So don’t put a border on an element if it doesn’t need it! I’ve seen sites that had a transparent border on every <div>. It was not pretty.
Backgrounds
All backgrounds will adopt the high contrast mode color. Like borders, this includes transparent backgrounds. This means that if the code provided an image, logo or button UI with a background image as the visible portion, then that image is replaced with a blank colored background. This is probably the strongest case never to use image backgrounds for elements that need to be perceivable to users.
How can we provide logos and other images in a way that will be visible in all modes?
Creating a High Contrast Mode logo
There are a few different ways to do this. Possibly the best that I researched was the <picture> element. This allows us to use media queries to target all of the modes of HCM.
The <picture> element isn’t supported in some browsers and still other browsers are not aware that the HCM is even turned on (I’m talking about you Chrome). So we need to account for these. Another thing that we will account for is wanting to use a transparent logo for each mode.
If you would like to see the technique in action, please see the Pen High Contrast Logos by Jason Ament (@JasonAment) on CodePen.
See the Pen High Contrast Logos by Jason Ament (@JasonAment) on CodePen.