Accessibility Issues concerning Windows High Contrast Mode

And in the darkened underpass
I thought oh God, my chance has come at last
(but then a strange fear gripped me and I just couldn’t ask)

The Smiths, “There Is A Light That Never Goes Out”

There is more to Web Accessibility than screen readers and machine readability. One of the more excotic topics there is user preferences via operating system or user generated style sheets. The more commonly known was introduced by Microsoft with Windows 7:

Windows High Contrast Mode (Win HCM).

This is an alternative color setting that affects the entire operating system and the programs that support it when activated. It is available in the browsers Internet Explorer 10, 11, Edge and Firefox (if you activate Win HCM before you start Firefox or open a new tab there).

TL;DR

• Win HCM is a collection of user defined color themes that overwrite your definitions in CSS.
• It’s not about design but readability.
• Some stuff will disappear in Win HCM, some won’t. Best advice is to use semantic HTML to keep things visible.
• You can use transparent outline to keep things visble like focus indicators and surface boundaries or use currentColor to maintain SVG fill colors in Win HCM.
• You can use a special media query combined with special CSS color keywords to give elements the user defined colors.

Activating Win HCM in Windows

As it’s only available on Windows, I recommend to other users with a Mac or Linux system to install one of the virtual machines offered by Microsoft to test their stuff.

Start > Settings > Ease of Access > High contrast > On / Off

Or via keyboard shortcuts:
left Alt + left Shift + Print Screen

Or you can make your own Windows shortcut on your desktop:

Right click on the desktop > new > shortcut

Enter this as URL: ms-settings:easeofaccess-highcontrast

Who uses Win HCM?

There are no exact numbers, but Melanie Richards, a Microsoft program manager for Edge development claimed in her talk at View Source Conference on September 30th 2019, that 4% of all Windows machines run under WIN HCM. Assumed that there are about 1.5 billion Windows machines worldwide, this is around 60 million users (maybe a little less, because not all of them run Windows 7 or higher).
According to WebAIM’s 2018 “Survey of Users with low Vision”, more than 50% of the low vision users use High Contrast Mode.

Low vision can mean: some users who are not completely blind, but can only see to a very limited extent, e.g. have low vision in one eye while the other eye is blind. These users are often very quickly dazzled by bright screen content because they capture the content very close to the screen or use magnifying software to zoom into the screen. The regular black on white theme is very exhausting for those people.

The same can be said for people with migraine or people with Irlen Syndrome who can react very sensitive to light or special color combinations. Those might use Win HCM too in certain conditions.
Others who have dyslexia may find certain colors more difficult to read than others and like to have the same things always in the same colors, like links or buttons. To help them out, Microsoft invented the Win HCM, where they can define their own color scheme that fits their needs.

But it can affect all of us! I personally use the Twitter-App on my smartphone in night mode, because it is too bright for me, if I use it for a longer time. Or have you witnessed your GPS navigation system switching to night mode after the sunset? Did you ever use your smartphone, tablet or laptop in the bright sunlight? Here is the solution for extreme light conditions: you can just switch to Win HCM white theme and experience better contrasts for reading or working in sunlight.

And there is a health reason for activating Win HCM: studies suggest, that the exposure to the blue light of modern displays like laptops and smart devices can seriously damage retina cells. There are ways to prevent that via software driven blue light filters like the “night light” on windows, “night shift” on a mac and on iOS devices and “night mode” on Android. But using Win HCM could do the job, too.

And there are a lot of other reasons, people use Win HCM: a sound engineer, operating in the dark, a boy with autism to watch YouTube, or people, that just get tired eyes by the black on white contrast.

There is a tendency of changing display brightness and this can be controlled by developers in the near future with light level media queries.

Different Themes

There are 4 different themes to choose from. And every theme can be customized, so if black is to dark for you, you can change it to dark grey or anything else you want.

It’s not about Design but User Experience!

If you work on a web project and somebody else made the design for it, please handle her/his feelings with care. I really mean it! I recommend not to show screenshots or live view of the project in Win HCM to designers, without explaining what this is all about. Tell them, that this is not about her/his design anymore. That it’s a user defined override on the design, because the user has special needs. And that it’s only about readability.

Your custom High Contrast Switch Design is wrong!

It’s not about offering your own version of Win HCM, like a design theme to still have control over the design yourself. Like it was fashionable in the 2000s to the early 2010s to offer customized contrast setting switches on websites to address wrongly understood rules or best practices of web accessibility.

The city of Cologne offered a custom contrast switch on their site. But the effects result in leaving out background colors as huge white areas, that still might be dazzling to some users.

But changing contrasts should only be about user preferences. And user preferences should not be assumed or predicted by the author or designer. But both should assume that a user wants to override your principle design and offer the best ways to do so.

Why is this so important?

Users come with their own needs and some users have customized their settings in the browser or even in the operating system. WCAG 2.1 Success Criteria 1.4.8. is all about that and it just says:

Foreground and background color can be selected by the user.

This simple sentence carries a lot of meaning in itself. In the subtext it says, that all visual design decisions can be overridden by the user. But at the same time, all surfaces, texts, buttons, icons etc. must be perceivable to the same extent as without the users customized settings.

WCAG Success Criteria 1.4.1. can have an impact here, as well. It says:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Color must be free of semantics. This means, the colour of a button should not determine its meaning. Not only because people have a different perception of color (e.g. color blindness), but users can bring their own color to the party.

What can happen in Win HCM?

Some things might look very different under Win HCM and some might disappear unintentionally. Please check out the following Codepen examples in Win HCM.

Colors change or disappear

As just said: please do not use color for semantic reasons. CSS color, border-color and background-color can change to user defined colors, not only in Win HCM. If you tell the user to press the red button, this button might be green in Win HCM.

See the Pen Windows High Contrast Mode fails: semantic Colors fade by Accessabilly (@accessabilly) on CodePen

What you can do to have semantic elements

• Use SVGs for semantic information, at best combined with text

Areas will blur

Some areas like columns, overlays or input fields and textareas, that are designed without borders and only differ from adjacent areas by their background color, may lose their visual outline and can not be determined as a connected area in Win HCM anymore. WCAG Technique C25 explains that issue more accurately.

See the Pen Windows High Contrast Mode fails: blurring Areas by Accessabilly (@accessabilly) on CodePen

What you can do to maintain your Areas

  .area {
    outline: 1px solid transparent;
  }

• WCAG Technique C25 helps you here: Define outline: transparent in your CSS around the surface, which then will only be visible in Win HCM.
  This is pretty harmless, because an outline has no impact on the surfaces dimensions.
• Define a border: transparent around the surface, which then will only be visible in Win HCM. border or outline are preserved in Win HCM, although they don’t keep their originally defined color, but the color will differ from the background.
  But be careful! The border-width will change the dimensions of your surface. It will stretch its outside or shorten the space inside, depending on what box model (box-sizing) you’re under. So don’t forget to reduce padding or width and height of your surface according to its border-width.
• Make sure, any overlays like modal dialogs, flyout navigation or auto suggest in search inputs can have an outline or border so they can be visually determined by other areas.

Focus Styles fade away

If you have unset the standard browsers focus indicator to outline: none and changed it to some fancy box-shadow as an alternative instead, this might be OK with the Success Criteria 2.4.7. “Focus Visible” in regular mode. But in Win HCM the box-shadow simply disappears. The same can happen, if you use background images, background colors, background gradients etc. Some clever CSS people might try to create something with :before or :after pseudo elements. But if they only rely on background-color and have no border or <code>outline, this technique will also fail.

See the Pen Windows High Contrast Mode fails: Focus Styles disappear by Accessabilly (@accessabilly) on CodePen

What you can do to keep proper Focus Styles

  :focus {
    outline: 3px solid transparent;
  }

• Additionally define outline: transparent around your element. This is completely harmless and the easiest way to have a proper focus indicator in Win HCM.
• Or define a border:transparent on :focus. But be careful with changing dimensions of your element then (see above).
• If you need to set up focus styles on text elements like links or buttons, you can rely on text-decoration (underline at best) as well. It won’t disappear in Win HCM and keep the color of the text it is attached to.

SVGs can become invisible

In some cases, if you use inline SVGs as icons for buttons, as semantic indicators for data or similar stuff in a black on white context, they often are set to fill: black. In Win HCM this can make them invisible, because most time, the background is black by default there and the fill color won’t be overwritten. The same with to stroke colors.
All dark colors used in SVGs can be a problem (or light colors in High Contrast White theme), because this can fail WCAG 2.1 success criteria 1.4.11. for Non-text Contrast.

See the Pen Windows High Contrast Mode fails: SVGs become invisible by Accessabilly (@accessabilly) on CodePen

What you can do to keep your SVGs visible

  svg {
    fill: currentColor;
  }

• Heavily rely on currentColor for the SVGs fill property in CSS wherever you can. If you define an SVG as part of a link or a button, let its fill be currentColor instead of defining it new here.
• If currentColor is not possible, you may fall back on the Win HCM specific media query.

Eric W. Bailey has a great tutorial on how to keep your SVGs visible and contrasty in Win HCM with media queries on CSS-Tricks.

CSS Shapes might not work anymore

Chris Coyier once gathered a bunch of geometric shapes like arrows, polygons, stars, hearts etc. in his brilliant article on the different shapes created with CSS only. But most of them don’t work in Win HCM at all! That might be not so important, because we learned that Win HCM is only about readability. But if you would use those shapes as semantic indicators for stuff without additional text information, this can be a barrier for some people.

See the Pen Windows High Contrast Mode fails: CSS Shapes not working by Accessabilly (@accessabilly) on CodePen

What you can use instead of CSS Shapes

• Use SVGs instead (see above) an make sure, you style their fill property with currentColor or via media query.
• Use other inline images like <img> and <picture> (this can be a performance issue though!).
• Use UTF-8 symbols instead but make sure, they are not read by screen readers.

Semi Transparent Overlays are no longer transparent

If you are placing stuff over each other by using position: absolute and z-index or similar and make the upper layer semi transparent by using rgba as background-color or via opacity, its background-color will turn into Kubrickian black monolith in Win HCM and you can not see the underlying layer anymore.

See the Pen Windows High Contrast Mode fails: intransparent Overlays by Accessabilly (@accessabilly) on CodePen

What you can do to keep semi transparent layers

• Use the Win HCM specific media query to make your surface background-color: transparent in Win HCM.
• If you use this technique to place smaller elements on a bigger one (e.g. magnification buttons on a map), don’t put them in a surrounding layer with a background-color and try to position them absolute to a wrapping relative positioned container.

Background Images might vanish

Not so long ago, it was a common technique to use CSS background images (sprites) on special elements like buttons or links to add some semantic information. For example if you would want to create a language switch, some people used flags as a background-image sprite for each country. Or a company’s logo was set as a background-image to a homepage link in the header.
In Win HCM those techniques would all fail, because all background information is reduced to user specific color: mostly black as default, but it can be overridden by the user. The same thing happens, if you set it up as an base64 encoded inline background-image.

In Microsoft Edge since April 2016 background-image is (partly) supported and Microsoft introduced new media queries especially for Edge.

See the Pen Windows High Contrast Mode fails: intransparent Overlays by Accessabilly (@accessabilly) on CodePen

What you can do to keep your images visible

• The best advice would be to just avoid using background-image.
• Try to use the image inline as an <img>, <picture> (which can be a performance issue) or <svg> element.
• You can still use your image on :before or :after pseudo elements as inline content, this can be a performance issue as well and result in flickering.
• For styled list indicators (like custom bullet points) you still can use list-style-image, which is preserved in Win HCM.
• If the image has to be a background-image, use the Win HCM media query combined with SVGs, changing their filters: filter: invert(100%) or filter: contrast(400%). Adrian Roselli has a nice tutorial on this.

What does not disappear?

The following CSS properties and HTML Elements are safe from vanishing in Win HCM:

• plain text
• outline
• border
• text-decoration
• list-style-type
• list-style-image
• <img>
• <picture>
• <canvas>
• <video>

What is possible?

Best advice is to use semantic HTML. Most colors are correctly set by default there.
Combined with Win HCM media query you can apply specific user color keywords to border, outline or color. All other colors are overwritten.

Win HCM Media Query

Beware: this is a non standard prefixed media query and only works in Internet Explorer 10, 11 and Edge.

@media screen and (-ms-high-contrast: active) {/* All special rules for Win HCM here */}

@media screen and (-ms-high-contrast: black-on-white) {/* All special rules for users of black-on-white theme */}

@media screen and (-ms-high-contrast: white-on-black) {/* All special rules for users using white-on-black theme */}

You can also exclude stuff from being overwritten like this:

@media screen and (-ms-high-contrast: active) {
     body { 
      -ms-high-contrast-adjust:none;
      background-color: deeppink;
      color: black;
  }
}

See example here. But be careful with that. As stated above, it’s about user defined readability! Let the user be in charge of the colors here and don’t try to design.

DIY: Tracking Win HCM users

There are no reliable numbers on how many people out there use Win HCM. But if you want to have some numbers and run your own website, here is a little trick how to track those users. In a Twitter conversation I had with Adrian Roselli, he brought up the idea of tracking users by just embedding a transparent pixel image via CSS:

@media screen and (-ms-high-contrast: active) {
  body:before {
    display: none;
    content: url('https://www.google-analytics.com/r/collect?v=1');
  }
}

See a working example here. You just have to connect this with you Piwik, Google Analytics or other tracking tool.

Conclusion

Keeping your stuff visible on the “Dark Side of Windows” is not rocket science at all. There are only a few tricks that you have to keep in mind while developing a website and not forget, that there are users that want to overwrite your design.

Read more

• Nick Colley: Supporting users who change colours on GOV.UK
• Patrick H. Lauke: Windows High Contrast Mode: the limited utility of -ms-high-contrast
• Adrian Roselli: OS: High Contrast versus Inverted Colors
• Greg Whitworth: How to use -ms-high-contrast
• Matthew Attkinson: How “invert brightness” can improve accessibility and help us use our devices

Talks

• Julie Grundy: Can you see that OK? CSS tips for low-vision accessibility
• Eric W. Bailey: Working with High Contrast Mode
• Hans Hillen: Dealing with High Contrast Mode, Custom Stylesheets, and Icon Fonts