Windows High Contrast

Windows High Contrast mode provides a high-contrast color scheme for users with low vision or light sensitivity. Web interfaces must work correctly when this feature is enabled, maintaining functionality and visual clarity.

What Is Windows High Contrast

Windows High Contrast is an accessibility feature in Microsoft Windows that replaces system-wide colors with high-contrast alternatives. Users can choose from predefined themes (High Contrast Black, High Contrast White) or create custom color schemes.

When enabled, Windows High Contrast affects all applications including web browsers. Browsers override CSS colors with the user’s chosen scheme, fundamentally changing the appearance of web content.

Users enable Windows High Contrast because standard color schemes are difficult or impossible to perceive. Respecting and supporting this mode is essential for serving users with low vision.

How Windows High Contrast Works

Browser behavior in Windows High Contrast overrides CSS color properties:

• Color values become system colors
• Background colors may be removed or overridden
• Borders become visible with system colors
• Shadows and gradients may be removed
• Images remain visible but backgrounds may change

The -ms-high-contrast media query (Microsoft-specific) and forced-colors media query (standard) detect high contrast mode:

Within these queries, adjustments ensure elements remain functional. Focus indicators, for instance, may need outline or border reinforcement:

System color keywords adapt to the user’s chosen scheme:

• WindowText: Text color
• Window: Background color
• Highlight: Selection background
• HighlightText: Selection text

Using these keywords ensures colors match user preferences rather than fixed values.

Key Considerations

• Test with Windows High Contrast themes enabled
• Use both -ms-high-contrast and forced-colors for browser coverage
• Ensure focus indicators use outline or border, not just color
• Verify icons and images remain visible
• Check that interactive elements are distinguishable
• Maintain text readability and contrast
• Do not disable or override high contrast mode

Common Questions

How can custom focus styles work in Windows High Contrast?

Custom focus styles that rely on background color or box-shadow may become invisible in high contrast mode. Using outline ensures focus remains visible because Windows High Contrast preserves outlines:

The transparent keyword allows the outline to show only in forced-colors mode without affecting standard appearance.

What happens to decorative elements?

Decorative elements using background colors or gradients may disappear in high contrast mode. If decorative elements have semantic meaning (separating content sections, indicating state), they may need borders or other non-color indicators:

Should testing use real Windows or can it be simulated?

Testing with actual Windows High Contrast provides the most accurate results. Browser developer tools in Edge and Chrome offer forced-colors emulation for initial testing, but real Windows testing catches issues emulation misses.

Test with multiple high contrast themes: High Contrast Black (light text on dark), High Contrast White (dark text on light), and custom themes if possible.

Summary

Windows High Contrast mode overrides colors to provide high-contrast interfaces for users with low vision. Web interfaces must remain functional by using forced-colors media queries for adjustments, outline-based focus indicators, and system color keywords that respect user preferences.