What is High Contrast Mode?

What is High Contrast Mode?

The Windows operating system has a native High Contrast Mode which replaces colors with defaults or user-set values. It's popular with users who have low vision or photosensitivity.

The themes use black or white backgrounds, and color-code different element types. It's worth pointing out right away that CSS styles which use the **background** property don't show up in this mode. We'll learn how to maneuver around this shortly. 

How to enable High Contrast mode

High Contrast Mode is built into Windows as a native accessibility setting. It can be enabled a few different ways in Windows 10, and be customized:

  • Left Alt + Left Shift + Print Screen
  • From the sign-in screen: Ease of Access > High Contrast

Use High Contrast Mode with Edge or Internet Explorer (or other Microsoft browsers that are released). It works with Firefox, but the effects are not always consistent or usable. High Contrast does not work with Chrome.

Review this Windows support document more instructions and guidance for other versions of Windows.

What to look for

Testing with High Contrast is another way to find issues with color, since it lets you easily check for:

  • Content, icons, or other indicators that relies on color alone to convey information
  • Elements that rely on background colors alone to be distinguished from other elements, such as buttons or modals
  • Keyboard focus styles or error states that rely on color alone; common when these states rely on a change in color alone or on showing and hiding a border
  • Transparent images or SVGs that aren't visible against black or white backgrounds

Solving for High Contrast

There are usually a few simple improvements that can be made to better support High Contrast mode users.

  • Give elements that rely on a background color a transparent border. This can be done with a regular CSS property (border: 1px solid transparent;) and will only be visible in High Contrast mode.
  • Use the default browser focus outline to show the keyboard focus state, instead of relying on a border.
  • If a CSS border doesn't fix the issue, or displaying a specific color or focus style in High Contrast mode is needed, the -ms-high-contrast vendor prefix can be used to apply styles only when a person is using High Contrast. Remember that people use High Contrast to reduce the number of colors and to customize the interface, so use High Contrast-specific styles sparingly. Learn more about the limitations of -ms-high-contrast.
  • For transparent graphics, give light graphic files a dark border and dark graphics a light border so they can be more easily distinguished against black or white backgrounds.

WCAG success criteria

This comes back to 1.4.1 Use of Color which states:

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

Resources:

Back to blog