Skip to main content
Category: Visual and Media Accessibility

High Contrast Mode

Also known as: Windows High Contrast Mode, Forced Colors Mode, High Contrast Themes
Simply put

High Contrast Mode is an accessibility feature built into operating systems that changes the colors used across the system, applications, and websites to make content easier to read. It is commonly used by people with low vision or other visual disabilities who benefit from stronger contrast between text and background. Users typically turn it on through their operating system's settings.

Formal definition

High Contrast Mode is an operating-system-level display feature that overrides the default color palette of the OS, applications, and rendered web content to maximize legibility for users with low vision or other visual disabilities. On Windows, this is implemented through High Contrast Themes, which web pages can detect and respond to via the CSS 'forced-colors' media feature; when 'forced-colors' is set to 'active', the user agent applies a limited, user-defined color set to page elements. Note that increased or enhanced contrast settings on other platforms operate differently from Windows High Contrast Mode and should not be treated as equivalent. This entry describes a user-agent and OS feature rather than a WCAG conformance requirement, and support and behavior vary across operating systems and browsers.

Why it matters

High Contrast Mode addresses a practical need for users with low vision or other visual disabilities, who may find default color palettes difficult to read. By allowing people to substitute a limited, user-defined set of colors across the operating system, applications, and web content, the feature can make text and interface elements significantly more legible. Because it is controlled by the user through their operating system settings, it reflects individual preferences rather than a single fixed appearance.

For teams building digital products, High Contrast Mode matters because web content that relies on background images, CSS backgrounds, or subtle color cues can behave unexpectedly when the user agent overrides colors. Elements that appear clear under default styling may lose visibility, borders, or meaning once a forced color set is applied. Testing with these settings active helps surface issues that would otherwise go unnoticed by users who do not rely on the feature.

It is important to keep this feature distinct from WCAG conformance. Supporting High Contrast Mode is a matter of respecting a user-agent and operating-system feature rather than satisfying a specific WCAG success criterion, and its behavior varies across operating systems and browsers. Increased or enhanced contrast settings on other platforms operate differently from Windows High Contrast Mode and should not be treated as equivalent. This guidance is not legal advice, and organizations with compliance questions should consult qualified counsel and current agency guidance.

Who it's relevant to

Users with low vision or visual disabilities
The feature is commonly used by people with low vision or other visual disabilities who benefit from stronger contrast between text and background. Users typically enable it through their operating system's settings to suit their own needs.
Front-end developers and engineers
Developers should be aware that when the CSS 'forced-colors' media feature is active, the user agent applies a limited color set that can override intended styling. Content relying on background images or color-only cues may lose meaning, so testing with High Contrast Mode enabled helps catch rendering issues.
UX and visual designers
Designers can plan for the possibility that their color choices may be overridden when High Contrast Mode is active. Ensuring that information is not conveyed by color alone, and that interface elements remain distinguishable under a forced color set, supports users who depend on this feature.
QA and accessibility testers
Because support and behavior vary across operating systems and browsers, and because increased contrast settings on other platforms differ from Windows High Contrast Mode, testers should validate content under the specific settings they intend to support rather than assuming equivalence across platforms.

Inside High Contrast Mode

Operating System High Contrast Settings
Platform-level features, such as Windows Contrast Themes (formerly High Contrast Mode) and similar options on macOS, iOS, and Android, that let users override default color schemes with higher-contrast palettes across the interface.
Forced Colors Mode
A browser-level behavior, exposed in CSS through the forced-colors media feature, that applies a limited, user-defined color palette to web content when a high-contrast or forced-colors setting is active at the system level.
User-Defined Color Palettes
The constrained set of colors (for example, foreground text, background, links, and buttons) that the system substitutes for author-defined colors, giving users control over the presentation to suit their visual needs.
System Colors and CSS Keywords
CSS system color keywords (such as CanvasText and Canvas) that allow authors to map interface elements to the user's chosen palette so content remains legible when forced colors are active.
Author Adjustments for Forced Colors
Techniques authors use to support these modes, including the forced-colors media query and properties like forced-color-adjust, to ensure important visual information conveyed by color, backgrounds, or images is preserved.

Common questions

Answers to the questions practitioners most commonly ask about High Contrast Mode.

Does supporting High Contrast Mode mean my site meets WCAG contrast requirements?
No. High Contrast Mode is a user-controlled operating system or browser setting that overrides page colors according to the user's preferences; it is a separate mechanism from your site's own color choices. WCAG success criteria such as the contrast requirements at Level AA apply to the content and colors you author, and they are evaluated independently of whether a user has activated a high contrast setting. Supporting High Contrast Mode gracefully is good practice, but it does not by itself establish conformance with WCAG contrast criteria, and conformance with those criteria does not guarantee an accessible experience for every user. Manual testing with assistive technologies remains necessary.
Is High Contrast Mode the same as Dark Mode?
No. Although both alter the appearance of a page, they generally serve different purposes and are triggered by different mechanisms. High Contrast Mode is typically an accessibility feature that forces a limited, high-contrast palette to aid users who need stronger visual distinction, and it may override author-defined colors. Dark Mode is commonly a preference that swaps a light color scheme for a darker one, often for comfort or reduced glare, and it usually respects author-defined styling. Treating them as interchangeable can lead to designs that break under one while appearing correct in the other.
How can I detect when a user has enabled High Contrast Mode?
Detection generally relies on media features exposed by the browser or operating system that indicate a forced-color or contrast preference. Because the available mechanisms and their support vary across platforms and browsers, you should test your detection approach across the environments your audience uses rather than assuming a single method works everywhere. Detection is a means of adapting presentation, not a substitute for building content that remains usable when colors are overridden.
How should I test my site under High Contrast Mode?
Enable the high contrast or forced-colors setting on the operating systems and browsers relevant to your users, then navigate the interface manually to confirm that text, controls, focus indicators, icons, and boundaries remain visible and distinguishable. Automated tools detect only a portion of potential issues, so manual review and testing with assistive technologies are generally required. Pay particular attention to elements that convey meaning through color or images that may be dropped or altered when colors are forced.
What common elements tend to break when colors are forced?
Elements that rely on background images, CSS-drawn graphics, subtle borders, box shadows, or color alone to convey state or boundaries can become invisible or lose meaning when a forced color palette is applied. Focus indicators, custom form controls, and icons implemented as background images are frequently affected. Reviewing these components under a forced-color setting helps identify where additional cues, such as visible borders or text alternatives, may be needed.
Can I override or disable a user's High Contrast Mode to preserve my design?
As a general practice this is discouraged. High Contrast Mode reflects a deliberate user preference, often for accessibility reasons, and overriding it can defeat its purpose and harm the users who depend on it. A better approach is to design content that adapts gracefully to forced colors, ensuring that essential information and controls remain perceivable rather than attempting to reimpose author-defined styling.

Common misconceptions

High Contrast Mode is a single, standardized feature that behaves the same across all platforms and browsers.
It is implemented differently across operating systems and browsers. Windows Contrast Themes, macOS and mobile settings, and browser forced-colors behavior are distinct, so results can vary and should be tested on the relevant platforms.
Meeting WCAG color contrast success criteria means content will automatically work well in High Contrast Mode.
Contrast conformance and support for user-forced color modes are separate concerns. Content can meet contrast requirements yet still lose meaning when the system replaces author colors, for example when information is conveyed by background images or borders that are stripped or altered.
High Contrast Mode is only about making text darker or backgrounds lighter.
It replaces the color scheme with a user-defined palette that affects many elements, including links, buttons, borders, and images, so authors must consider how the full interface responds rather than text color alone.

Best practices

Test interfaces with the relevant system high-contrast and forced-colors settings enabled across the platforms and browsers your users rely on, rather than assuming consistent behavior.
Use the forced-colors media query to detect when a forced-colors palette is active and adjust styling so essential content remains visible and legible.
Map interface elements to CSS system color keywords where appropriate so foreground, background, and interactive elements follow the user's chosen palette.
Avoid conveying information through color, background images, or decorative styling alone, since these may be altered or removed when a forced-colors mode is active.
Verify that focus indicators, borders, and interactive states remain distinguishable when author colors are overridden.
Complement automated checks with manual testing and assistive technology testing, recognizing that support for high-contrast modes is distinct from meeting WCAG contrast success criteria and does not on its own guarantee an accessible experience.