Forced Colors Mode

Forced colors mode is a browser state where user color preferences override author-defined colors. The CSS forced-colors media query enables targeted adjustments for interfaces to work correctly when users enable high contrast features.

What Is Forced Colors Mode

Forced colors mode activates when operating system accessibility features like Windows High Contrast override application colors. In this mode, browsers apply user-selected colors instead of CSS-defined colors.

The forced-colors CSS media feature detects this state:

• forced-colors: active - User has enabled forced colors
• forced-colors: none - Normal color mode

This standardized media feature replaces older vendor-specific queries like -ms-high-contrast, though supporting both ensures broader browser coverage.

Understanding forced colors mode helps design systems create components that remain functional and understandable regardless of color scheme.

How Forced Colors Mode Works

When forced colors mode is active, browsers override:

• Color properties (color, background-color, border-color)
• SVG fill and stroke colors
• Shadow colors (often removed)
• Gradient colors

The override respects system color keywords that map to user preferences. Using these keywords in forced-colors mode ensures colors match what the user expects:

The forced-color-adjust property controls whether elements receive forced colors treatment:

• auto: Normal forced colors behavior (default)
• none: Preserve original colors

Use forced-color-adjust: none sparingly, typically for images or elements where preserving colors is essential:

This allows brand logos or specific images to maintain their colors while the rest of the interface adapts.

Key Considerations

• Detect forced colors mode with @media (forced-colors: active)
• Use system color keywords (CanvasText, Canvas, LinkText, etc.)
• Ensure focus indicators use outline, which persists in forced colors
• Apply forced-color-adjust: none only when preserving color is essential
• Verify borders provide structure when backgrounds are overridden
• Test with actual high contrast modes, not just emulation
• Support both forced-colors and -ms-high-contrast for browser coverage

Common Questions

What system color keywords are available?

Common system color keywords include:

• Canvas: Background color
• CanvasText: Text color
• LinkText: Link color
• VisitedText: Visited link color
• ButtonFace: Button background
• ButtonText: Button text
• Field: Form field background
• FieldText: Form field text
• Highlight: Selection background
• HighlightText: Selection text

These keywords resolve to the user’s chosen colors in forced colors mode.

When should forced-color-adjust: none be used?

forced-color-adjust: none should be used sparingly for elements where color conveys essential meaning that system colors cannot replace:

• Brand logos that must maintain specific colors
• Data visualizations where color mapping is critical
• Images or photos

Do not use it broadly, as this defeats the purpose of forced colors mode for users who need it.

How do gradients and shadows behave?

Gradients typically collapse to flat system colors or become transparent in forced colors mode. Complex gradient-based designs may need border-based alternatives:

Shadows often disappear. If shadows provide depth cues or visual hierarchy, consider adding borders in forced colors mode.

Summary

Forced colors mode detects when browsers override colors for accessibility. Using the forced-colors media query, system color keywords, and careful use of forced-color-adjust creates interfaces that remain functional when users enable high contrast features.