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:
- 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.
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
outlineto show the keyboard focus state, instead of relying on a
- 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-contrastvendor 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
- 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."