A Complete Guide to Windows High Contrast Mode

Accessibility is essential to inclusive design and user experience. To ensure everyone, including those with disabilities, can access technology equally, developers must prioritize creating websites that are easy for all to use. This includes support for keyboard navigation, screen reader compatibility, and features like darker color schemes.

A vital but often overlooked tool in this accessibility toolkit is Windows High Contrast Mode (WHCM). According to a WebAIM survey, over 30% of participants with low vision reported using High Contrast Mode, emphasizing WHCM’s importance in promoting digital inclusivity.

WHCM offers a high-visibility interface designed to help users who have difficulty perceiving screen elements clearly, making digital content more accessible for those with visual impairments.

What Is Windows High Contrast Mode?

Windows High Contrast Mode (WHCM) is an accessibility feature in the Microsoft Windows operating system designed to improve the visibility and usability of the interface for users with visual impairments or those who prefer high-contrast visuals.

When enabled, WHCM adjusts the color scheme by darkening the background and using high-contrast colors for text, borders, and icons, making on-screen elements easier to distinguish. This mode is especially beneficial for users who find standard color schemes hard to perceive.

WHCM significantly enhances the interface by:

• Making text and UI elements more readable and distinguishable.
• Reducing eye strain and fatigue with a clearly defined, high-contrast interface.
• Enabling users to navigate and interact with the system more effectively.

Below are a few examples of WHCM under various effects.

LambdaTest Landing page with WHCM Theme set to Night Sky, Desert, Aquatic, and Dusk.

How To Turn On/Off Windows High Contrast Mode?

You can choose either one of the three ways mentioned below to activate the High Contrast Mode on Windows:

Enabling High Contrast Mode Manually in Windows

The first way is to manually do it by going to Start > Settings > Accessibility > Contrast themes; you can also choose a theme as per your preference by selecting it from the dropdown menu.

Note: The navigation for turning on/off the Windows High Contrast Mode can vary based on the Windows version.

Enabling High Contrast Mode Using Keyboard Shortcut

The second way is by using the keyboard shortcut Alt + Left Shift + Print Screen. This will activate the last-used contrast theme).

Enabling High Contrast Mode via Chrome DevTools

The third way to activate it is from inside the browser using an option (Rendering Tab) inside the DevTools of Chromium. To open the Rendering tab inside Chrome, go to Inspect Element or hit the keyboard shortcut Ctrl + Shift + I; this will open the DevTools.

On the top right inside the DevTools, click on Three Dots (⋮) > More Tools > Rendering. Another easier way to open the same is to simply use the Run Command (Ctrl + Shift + P) and then type the Rendering and hit Enter.

This will open the Rendering tab, where you can change the value of the Emulate CSS media feature for forced-colors from No emulation to forced-colors: active. By using DevTools, you can temporarily activate Forced Colors Mode in the browser, which applies the primary theme of the Windows High Contrast Mode (WHCM) contrast themes.

Another thing to note is that though Windows High Contrast Mode works fine with all browsers now, not all software might be fully compatible. Some third-party apps might not render perfectly in high contrast mode, potentially leading to reduced usability or visual glitches.

Factors To Consider for User-Friendly Experience in WHCM

Creating a user-friendly experience in Windows High Contrast Mode (WHCM) is essential for ensuring accessibility for users with visual impairments. By focusing on specific design factors, developers can enhance usability and provide an inclusive digital environment for all users.

To ensure your website is functional and user-friendly in WHCM, follow a few key principles. The most important rule to remember is to prioritize usability and user experience above all else. WHCM is designed to improve accessibility, so your main goal should be to make content easy to read without compromising the overall user experience.

How do you make sure that the content is clear and user-friendly in Windows High Contrast Mode?

Here are some of the important points to consider:

Using Semantic HTML

When you talk about web accessibility, one crucial aspect that cannot be overlooked is the use of semantic HTML. This concept is particularly important not only for screen readers but also for Windows High Contrast Mode.

But why is semantic HTML so vital for Windows High Contrast Mode? The answer lies in how Windows applies styles based on the semantic meaning of elements rather than their visual appearance outside of this mode. In Windows High Contrast Mode, a link will receive hyperlink styles, a button will inherit button text styles, and so on.

One example of this is found on the ECI website, which includes a toggle to choose the high-contrast theme.

Choosing the correct semantic element is crucial in avoiding confusion for users navigating through the website in this mode. By embracing semantic HTML, you promote accessibility and ensure a seamless experience for all users, regardless of their chosen display settings.

At times, developers are tempted to use ARIA roles on elements like < div > to mimic buttons for assistive technology. However, in Windows High Contrast Mode, ARIA roles do not dictate the styles applied by Windows. Instead, the focus should be on semantic elements to ensure the proper functioning of websites in this mode.

To understand this point, let’s explore how the < div > , < button > , and < a > elements behave in High Contrast Mode when styled similarly.

With Normal Mode:

With Windows High Contrast Mode:

See the Pen
WHCM – Prioritizing Semantic HTML by Aakash Rao (@aakash_codes)
on CodePen.

In the above example, the < div > , < button > , and the < a > elements share the same styling properties, ensuring they appear similar in default (normal) mode. However, the choice of semantic elements significantly affects how styles are applied in WHCM. It’s crucial to bear in mind that WHCM demands a careful focus on user experience preservation.

Semantic HTML is one of the primary accessibility best practices that must be followed, as it helps screen readers and improves compatibility with modes like WHCM. To understand and apply other best practices, follow this blog on the web accessibility checklist to ensure all key standards are met.

Using Transparent Properties and Custom Focus

Using transparent properties and custom focus, developers often adjust the appearance of buttons and links by removing elements like borders, outlines, and underlining to create a visually pleasing style for most users.

However, when discussing Windows High Contrast Mode (WHCM), it’s essential to remember that altering the visual style of buttons and links can lead to some issues.

For example, consider two types of buttons: a main button with a bright background and no border and a secondary button with a clear border but no background fill. While this design choice may look appealing under normal conditions, switching to WHCM can create confusion.

With Normal Mode:

With Windows High Contrast Mode:

See the Pen
WHCM – Transparent properties and Custom Focus [Button Example] by Aakash Rao (@aakash_codes)
on CodePen.

In the above example, the primary button, which usually fits the design style in regular views, might end up blending with regular text in WHCM. This is where the clever use of transparent borders comes into play.

By adjusting the button’s border property to 2px solid transparent, you create a transformation that gives the primary button the contrast it needs to stand out.

This transparent approach isn’t limited to buttons. When it comes to links, using the text-decoration-color: transparent property offers a new way of thinking.

In Windows High Contrast Mode, where people can set their colors, using a transparent underline serves as a guide, offering a subtle visual hint while keeping things accessible.

Let’s see this in action with an example.

Normal Mode:

Windows High Contrast Mode:

See the Pen
WHCM – Transparent properties and Custom Focus [Navbar Example] by Aakash Rao (@aakash_codes)
on CodePen.

The last thing that you need to take care of to apply is the :focus property that states for the links or buttons. Typically for this, you can use techniques like changing background colors or text color or use the CSS box-shadow property, which are effective in regular situations, but the problem with this approach is they might not work as expected in WHCM.

This is where transparent values come into play, along with CSS outline property providing a reliable way to highlight focus. This technique is useful where the other usual methods fall short. Let’s see this action by adding the :focus property on the navigation links.

Focus on Normal Mode:

Focus on using the outline on WHCM:

A key rule to remember, is that if you are using something other than an outline to highlight focus, you need to always make sure that there should be a fallback with outline-color: transparent to make it work well in WHCM.

Using Images With WHCM

When it comes to using images on a website, there are several options available: the < img > tag, the background-image CSS property, working with SVGs (Scalable Vector Graphics), and even creating art with CSS.

Let’s explore these options and how they behave in Windows High Contrast Mode (WHCM).

The < img > tag

The < img > tag is one of the most common methods for including images on a website. It is straightforward and generally behaves consistently in WHCM, displaying images as expected.

Let’s look at an example of using the < img > tag in action:

Normal Mode:

Windows High Contrast Mode:

See the Pen
WHCM – The Behavior of Images (<img> tag) by Aakash Rao (@aakash_codes)
on CodePen.

In the above example, the image will retain its appearance in both regular view and WHCM, maintaining its visual integrity and contributing to a user-friendly experience.

The background-image property

The background-image property is commonly used to set images as backgrounds for elements. This technique is effective in WHCM as long as the url() value is used. When we use a URL in the background-image property, Windows High Contrast mode allows the image to be displayed as the background, respecting the specified contrast settings.

However, if we use a gradient created with the CSS radial-gradient or linear-gradient function, the background color set by WHCM takes precedence, and the CSS gradient may not be visible as expected.

Let’s take an example to understand this better.

Normal Mode:

Windows High Contrast Mode:

See the Pen
WHCM – The Behavior of Images (background-image property) by Aakash Rao (@aakash_codes)
on CodePen.

In the above example, you can notice that only the background-image with the url() function is displayed on Windows High Contrast Mode. The linear-gradient() and the radial-gradient() images get ignored, and the background gets dark on WHCM.

The < svg > tag

Similar to other image formats, SVG (Scalable Vector Graphics) generally retains its properties in WHCM, behaving similarly to regular images. However, the fill and stroke properties of SVGs are exceptions to the rule that WHCM overrides all colors.

In WHCM, SVG colors will remain unchanged, which is beneficial if the SVG is used as a logo or a general image. However, this can be less useful if the SVG is intended to serve as a meaningful icon.

Let’s understand this with an example.

Normal Mode:

Windows High Contrast Mode:

See the Pen
WHCM – The Behavior of Images (SVG Images) by Aakash Rao (@aakash_codes)
on CodePen.

As you can notice, the fill of the SVG remains the same and doesn’t get affected by WHCM, but you want to keep the same color as the link in WHCM. This is where the CSS currentColor keyword comes in. The currentColor is defined as the value for the color or fill property, which will be overridden by high contrast mode.

Using Scrollbars With WHCM

When it comes to styling scrollbars, usability and accessibility are essential considerations. While applying visual styles to scrollbars is possible, challenges may arise, as WHCM tends to override certain styles to maintain a consistent and accessible user experience.

Suppose a website applies custom styles to the scrollbar using CSS. In that case, these styles may be ignored or overridden in High Contrast Mode, resulting in an unexpected appearance, especially when viewed in WHCM. This can cause scrollbars to appear either overly bulky or, in some cases, entirely invisible.

The solution to this problem depends on the chosen styling approach.

Let’s consider an example where you have styled the scrollbar thumb with a solid color and explore how to make it work better in WHCM:

Normal Mode:

Windows High Contrast Mode:

See the Pen
WHCM – The Behavior of Scrollbars by Aakash Rao (@aakash_codes)
on CodePen.

In WHCM, the CSS background-color property of the scrollbar thumb is forcibly replaced, rendering the scrollbar invisible. As we can notice, with our example in normal mode, our scrollbar is perfectly visible, but in WHCM, it becomes invisible,

The solution to this problem is to make use of transparent borders. By applying a transparent border to the scrollbar thumb, we can create the illusion of a solid color, resembling the default behavior of a scrollbar in WHCM:

This transparent border technique works effectively in most cases, but caution is necessary if you have styled the scrollbar thumb.

It’s important to note that these considerations primarily apply to Chromium-based browsers. Firefox offers a different method for styling scrollbars using the scrollbar-color and scrollbar-width properties. In WHCM, when using Firefox, additional adjustments are generally unnecessary, as the colors will be overridden to match the user’s selected text color setting.

What Is Forced Colors Mode?

Forced Colors Mode is an accessibility setting where assistive technology actively adjusts the colors of a website or application to suit the needs of users with low vision. WHCM (Windows High Contrast Mode) is a type of Forced Colors Mode in Windows, with similar features available in other operating systems such as:

• Ubuntu: Offers its high-contrast implementation.
• Android: Includes high-contrast text mode.
• macOS: Provides a subtle contrast-boosting option.

When Forced Colors Mode is active, the browser enforces the user’s chosen color palette—whether a default WHCM theme or a custom selection—overrides the native colors of the website to create a highly visible interface.

Key changes include:

• Darker backgrounds: It reduces glare and enhances readability.
• High-contrast text: It improves legibility.
• Simplified icons: It clarifies shapes and details.
• Bold outlines: It emphasizes buttons and text fields.
• Distinct hyperlinks and buttons: It stands out from other elements for easy access.
• High-contrast scroll bars: It facilitates easy navigation.

Styling WHCM Using Forced Colors Mode

When designing websites, ensuring accessibility and user-friendliness is vital, particularly for users employing Windows High Contrast Mode (WHCM). This mode alters the appearance of web elements to improve visibility and readability for individuals with visual impairments. Effectively styling your content to accommodate WHCM can significantly enhance the user experience across various settings.

To support this initiative, Microsoft has put efforts into new standards specifically designed for Forced Colors Mode, aimed at optimizing the functionality of Windows High Contrast Mode.

These standards include three key features that authors can utilize:

• Forced-Colors Media Query: This media query allows developers to detect when an active forced color mode is in use, enabling custom styling for enhanced accessibility.
• Forced-Color-Adjust Property: This property gives developers control over whether the user agent’s system theme color overrides should be applied to a specific element and its descendants, ensuring that design choices remain intact in high-contrast settings.
• System Color Keywords: These keywords enable developers to apply colors that align with the user’s color scheme, ensuring consistency and compliance with accessibility standards.

Forced-Colors Media Query

This media query is a feature designed to detect whether a browser or operating system has activated a mode that restricts a website’s styles to a user-selected color palette. The primary purpose of the forced-colors media query is to enable web developers to create styles that work well in high-contrast or monochromatic color environments.

Syntax:

The behavior of this media query differs slightly due to the unique characteristics of Windows High Contrast Mode (WHCM). Certain properties will have limitations on the values they can hold, while some properties won’t be modifiable at all. Interestingly, new values for certain properties come into play.

Before diving into creative applications, it’s essential to remember that modes like WHCM prioritize usability, a principle that must be respected. Therefore, it’s wise to use these properties only when necessary, specifically to enhance usability within this mode.

The media query primarily has two values: “none” and “active.” The “none” value detects when forced colors mode is inactive, while the “active” value indicates its activation.

In the forced color mode, several properties are changed to user-defined values:

• SVG fill attribute: Sets the color or pattern used to fill the interior of an SVG shape or graphic.
• SVG stroke attribute: Defines the color or pattern applied to the outline or stroke of an SVG shape.
• text-decoration-color: Specifies the color of text decorations (like underlines, overlines, or line-throughs) applied to text.
• text-emphasis-color: Determines the color of emphasis marks (such as dots or circles) used in certain languages for highlighting text.
• border-color: Sets the color of an element’s border, which can be applied to all sides or specific sides of the border.
• outline-color: Specifies the color of an outline, which is a line drawn around elements outside the border edge, usually for accessibility.
• column-rule-color: Defines the color of the line separating columns in a multi-column layout.
• scrollbar-color: Sets the color of the scrollbar’s thumb and track on a web page, improving visual accessibility.
• -webkit-tap-highlight-color: Specifies the color of the highlight that appears when a user taps on an element on touch devices.
• background-color: Determines the color applied to the background of an element, affecting its overall appearance and readability.

Also, some properties exhibit specific behavior when faced with forced color mode:

Now that you have a solid understanding of the forced-colors media query feature, let’s further understand the other two tools available to enhance the experience in Windows High Contrast Mode (WHCM).

Forced-Colors-Adjust property

This property provides control over how certain colors behave in forced colors mode. It accepts two values: “auto” and “none.”

• auto: This value allows the browser to override certain elements with its color choices.
• none: This option instructs the browser not to modify the colors you have selected.

To see this property in action, let’s revisit the example of the < button > elements where we added transparent borders for WHCM. Without the forced-color-adjust property, both < button > styles are overridden by WHCM.

By using this property, we can ensure that the background and text color we defined remain consistent, even in forced color mode.

Normal Mode:

Without the forced-color-adjust property on WHCM:

With the forced-color-adjust: none; on WHCM

See the Pen
WHCM – forced-color-adjust property with forced-colors media query by Aakash Rao (@aakash_codes)
on CodePen.

Typically, you must include this rule inside a media query specifically designed for when WHCM is active. However, it’s also possible to use this rule without a media query, and it will function in the same manner.

Let’s consider a practical example where you can display color palettes on the site. In WHCM, those colors may disappear.

To address this issue, you can apply forced-color-adjust: none to the container. As a result, the colors will reappear, restoring visibility.

Without forced-color-adjust on WHCM

With forced-color-adjust: none; on WHCM

System Colors

Now, let’s understand colors and the exciting feature known as “system colors” in Windows High Contrast Mode. Through the forced-colors media query, you gain access to a set of colors that can be used to replace specific elements of the design. To learn more about colors in accessibility, follow this blog on accessibility colors, which helps make web design accessible for all.

For instance, using color: LinkText will style the text to appear as a link.

Color Keywords of Night Sky theme of Windows High Contrast Mode

List of all CSS Color Keywords relevant to Windows High Contrast Mode

These system colors are tied to the structure of the webpage. Therefore, it’s often more effective to change an element’s tag to align with its purpose rather than focusing solely on its appearance in WHCM. However, there are also appropriate instances to utilize system colors.

Let’s examine with an example of a CTA < button > that resides within an < a > element.

See the Pen
WHCM – System Colors (button example) by Aakash Rao (@aakash_codes)
on CodePen.

Normal Mode:

Windows High Contrast Mode:

Now, you can use the ways that were discussed earlier to modify the color and background of this button, but this time, you will rely solely on the system colors.

After changing the border and text color of the CTA button using the System Color Keywords

If transparent borders aren’t an option, we can utilize system colors to enhance the appearance of the scrollbar in WHCM.

See the Pen
WHCM – System Colors (scrollbar example) by Aakash Rao (@aakash_codes)
on CodePen.

To enhance the effectiveness of these techniques, it’s essential to also understand color contrast standards and how they impact accessibility. Follow this blog on Color Contrast Accessibility, which explains the system colors and forced-colors queries that will help you create designs that are not only visually cohesive but also fully accessible to users who rely on modes like WHCM.

Increased Contrast Mode vs Windows High Contrast Mode

When it comes to enhancing accessibility on your website, the CSS media query prefers-contrast: more allows you to meet the Web Content Accessibility Guidelines (WCAG) AAA contrast threshold. This is particularly beneficial for users who have configured their operating systems to increase contrast for better visibility.

However, Windows users do not have an “Increase Contrast” toggle in their system settings; instead, they utilize Windows High Contrast Mode (WHCM). WHCM applies a pre-designed theme across the operating system, including web content, which significantly alters how elements are displayed.

It’s important to note that Increased Contrast Mode is entirely dependent on the designer or developer’s implementation.

When using the prefers-contrast media query, you can specify high-contrast styles like this:

This approach requires website owners to create and code specific styles for Increased Contrast Mode. Unfortunately, many may not be aware of this capability or prioritize it in their design process. In contrast, WHCM operates as a Forced Colors Mode, meaning it doesn’t rely on the website owner’s design choices. Instead, it imposes a selected theme onto the website.

According to Microsoft’s Fluent UI Web Components documentation, WHCM leverages the forced-colors CSS media feature. When forced-colors is set to active, the user agent applies a limited color palette to the components, ensuring consistent accessibility across all web pages.

To ensure your website is accessible to all users, especially those utilizing high-contrast modes, it’s crucial for organizations to adhere to accessibility standards like WCAG.

Accessibility testing can play a vital role in identifying and resolving potential issues early in the design process. By integrating accessibility tools, such as the Accessibility DevTools Chrome extension offered by LambdaTest, you can simplify testing workflows, ensuring that contrast settings and other accessibility factors are considered.

LambdaTest is an AI-powered test execution platform that allows you to run manual and automated accessibility testing using various frameworks like Selenium, Cypress, Playwright and more across 3000+ browsers and OS combinations.

Browser Compatibility of WHCM/Forced Colors Mode Themes

Windows High Contrast Mode (WHCM) offers a well-supported CSS media query that enables developers to apply specific styles when the mode is active:

Source

However, unlike Increased Contrast Mode, WHCM restricts styling options to a limited selection of carefully curated properties. The following elements can typically be styled in WHCM:

• Text color.
• Background color.
• Keyboard focus outline color.

It’s important to note that while WHCM provides these styling options, browser support varies. For instance, Safari does not support the forced-colors: active media query, as Apple relies on Increased Contrast Mode instead of Forced Colors Mode.

This discrepancy highlights the necessity for developers to understand the compatibility of WHCM across different browsers to ensure consistent user experiences for individuals relying on high-contrast settings.

Wrapping Up

As you dive into the world of Windows High Contrast Mode (WHCM), you uncover valuable insights and techniques to ensure that your website offers an exceptional experience for all visitors.

From semantic HTML and transparent properties to images, scrollbars, system colors, and forced-color-adjust, you’ve explored the essential elements that enhance accessibility and user-friendliness in WHCM.

At the core of this guide is the principle of inclusivity. It’s about creating a welcoming space for all users, regardless of how they choose to interact with the web. By implementing these strategies and techniques, you take significant steps toward fostering a more accessible online environment.

As you embark on your web design journey, remember the users who rely on Windows High Contrast Mode. By crafting experiences that address their needs and preferences, you not only enhance accessibility but also commit to creating a better web for everyone.

As the web continues to evolve, so will your understanding and approaches to creating inclusive and user-friendly experiences. Happy styling!