High Contrast Mode

High contrast mode increases color contrast throughout the interface, helping users with low vision or light sensitivity perceive content. Design systems must ensure components remain functional and understandable when users enable high contrast settings.

What Is High Contrast Mode

High contrast mode is an operating system accessibility feature that overrides standard colors with high-contrast alternatives. Windows High Contrast has been available for decades; macOS and other systems offer similar features.

When enabled, the operating system replaces colors across all applications, including web browsers, with user-selected high-contrast color schemes. Common schemes use white text on black backgrounds, black text on white, or custom color combinations.

Web content should work with high contrast mode, not fight against it. Attempting to override high contrast settings defeats their purpose and creates accessibility barriers for users who need them.

How High Contrast Mode Works

The CSS forced-colors media query detects when the user has enabled high contrast or forced colors mode:

Within this media query, designers can adjust elements that might not work well with system color overrides. However, the goal is minimal adjustment to preserve the user’s chosen scheme.

System color keywords respect user preferences:

• CanvasText: Foreground text color
• Canvas: Background color
• LinkText: Link color
• ButtonText, ButtonFace: Button colors
• Highlight, HighlightText: Selection colors

Using these keywords in forced-colors mode ensures content uses the user’s chosen colors:

Elements that rely on color for meaning (error states, focus indicators) may need additional visual cues in high contrast mode. Borders, outlines, and text can supplement color-based information.

Images and icons may lose visibility in high contrast mode. Testing reveals which elements need adjustment. Background images often disappear; foreground images remain visible.

Key Considerations

• Test interfaces with Windows High Contrast and similar features
• Use forced-colors media query for necessary adjustments
• Apply system color keywords to respect user preferences
• Ensure focus indicators remain visible in high contrast
• Add borders or outlines to elements that rely solely on color
• Verify icons and images remain perceivable
• Do not attempt to override or disable high contrast mode

Common Questions

What happens to CSS colors in high contrast mode?

In forced-colors mode, the browser overrides most color properties with system colors. Background colors, text colors, and borders change to match the user’s high contrast scheme.

Some properties remain unaffected: images, shadows, and certain decoration elements. This can create unexpected results if designs rely heavily on color-based differentiation.

How can focus indicators work in high contrast mode?

Focus indicators must remain visible across all high contrast schemes. Using transparent or color-based-only focus indicators may fail. Ensure focus styling uses properties that persist:

The outline remains visible because browsers preserve outlines for focusable elements in forced-colors mode.

Should designs provide their own high contrast themes?

Design systems can provide optional high-contrast theme variants in addition to supporting system high contrast mode. These theme variants work for users who want increased contrast without enabling operating system features.

System high contrast mode support is not optional: designs must work when users enable it. Custom high contrast themes are supplementary options.

Summary

High contrast mode provides increased contrast for users who need it. Design systems support this by testing with forced colors enabled, using system color keywords, ensuring focus and state indicators remain visible, and avoiding attempts to override user preferences.