How to Enable High Contrast Mode in Windows 10

Windows High Contrast Mode (HCM) is an accessibility feature. The settings reside under the Ease of access in Microsoft Windows operating system. The high contrast mode on windows was first introduced in Windows 95.
Windows 10 High contrast Mode settings screen

Turning On High Contrast Mode

In Windows 10,

Select the Start button , and then select Settings.
In settings activate Ease of Access > High contrast.
To turn on high contrast mode, select the toggle button under Turn on high contrast. Windows may display a "Please wait" screen for a few seconds, after which the colors on the screen change.

Why is High Contrast Mode important?

Remember every user will have unique needs. They may want to see the links in same color in each website and hence use a specific color theme under high contrast mode. HCM is not about great designs that can help everyone, it's about readability and usability to meet unique needs.

Different color options that can be configured in Windows HCM benefit

Users with low vision.
Users with color deficiencies
Users suffering with migraine.
Users who have light sensitivity.

The talk by Melanie Richards of Microsoft mentioned that 4% of Windows users use HCM. Web AIM low vision users survey 2 revealed that more than 50% of low vision users use the HCM settings from Windows ease of access.

High Contrast Mode Themes

Though the term High contrast mode is in use for quite some time, this is not just a single theme. In the latest Windows OS, users can select preferred theme from a bunch of themes. Let us wait and see if Microsoft want to name it differently in future versions of Windows. In addition, users can select and adjust preferred colors in the theme of their choice.

Windows 10 provides 4 default HCM themes.

High contrast #1
High contrast #2
High contrast black
High contrast white.

Each default theme comes with default colors for different types of elements. Let us see, the default element colors for high contrast black.

High contrast black

Selecting high contrast black theme converts elements to the following colors.

Text color to white with 100% brightness = #ffffff
Links color to yellow with 100% brightness = #ffff00
Disabled text color to green with 95% brightness = #3ff23f
Selected text color to black with brightness 0% = #000000
Selected text background color to aqua with brightness 102% = #1aebff
Button text color to white with brightness 102% = #ffffff
Button background color to black with brightness 0% = #000000
Background color to black with brightness 0% = #000000

Though the above colors are the defaults, each one of them can be customized to each individual needs.

Screen showing changing colors to hyperlink in high contrast black mode

How does HCM benefit users

As you observed in the previous section, when the user switches on the high contrast black,

The text color changes to white (#ffffff) and background color to black (#000000). With these the contrast between the text color and background becomes 21 : 1 making the text to be easily readable.
The color of links change to yellow (#ffff00) and background color changes to black (#000000). With these the contrast between the color of the hyperlinks and background becomes 19.55 : 1 making the links easily identifiable and readable.

See this video to understand how to check color contrast.

Accessibility testing with High Contrast Mode

Mozilla Firefox, Google Chrome and Chromium based Edge now supports windows high contrast mode. Accessibility testing for high contrast is pretty easy and do not require any additional tools. Why not do a quick check if it benefits many of your website visitors?

How to test for HCM

Open the website, application or the software you are testing. Turn on high contrast mode with the steps above. Alternately you can turn high contrast mode using left alt + left shift + print screen. Wait for few seconds to change the mode.

Check for high contrast defaults

For each high contrast theme, Windows expect the apps and browsers to render the content in certain colors. For instance, the default colors in windows high contrast black are

Text color in white
Hyperlink color in yellow
Disabled text color in green
Selected text color in white
Selected text background color in aqua
Button text color in white
Button background color in black
Background color in black

On switching to high contrast black mode, make sure the web page is converted to above colors. Web pages not respecting the colors expected in high contrast black as above needs correction.

Disappearing text

Turn on Windows HCM. Read through the page. Make sure that no text on the page is missing. It is possible that the text originally placed on top of a

background image or an icon may disappear.

Use of color

When the page is switched to high contrast mode, check if there is any content on the page that is conveyed with color alone loses its meaning.
For example, if the web page has two headings <h2> and <h3> with same font size, font style. The only differentiation between two levels is color. On high contrast mode remember both text turns white and users cannot differentiate between two levels.
Provide a secondary differentiation using change in font size or font style. More information on SC 1.4.1 use of color.

Text on images

The windows high contrast mode changes the color of real text. The text embedded in the images in most cases will not be effected by this setting. This means, people who depend on HCM will still face difficulty in reading the text embedded in the images. Except for the types of images as defined in SC 1.4.5 images of text, avoid using text embedded within images.

Disappearing focus indicator

Turn on HCM and use tab to navigate through-out the page. Observe the focus indicator for each interactive control. Make sure that the focus indicator is clearly visible in each focused instance.

Check the change in states

While testing for the high contrast mode, its worth verifying if the change in state from checked to unchecked state of a checkbox, difference between selected and unselected state of a toggle button, currently selected tab in a group of tabs.

Developing web content for high contrast mode

Handling the issues thrown by invoking HCM depend on the problem to be solved. Here is a talk by Melanie Richards from Microsoft that I thought will be useful.

How to Enable High Contrast Mode in Windows 10

Turning On High Contrast Mode

Why is High Contrast Mode important?