High Contrast Mode

High Contrast Mode is an operating system accessibility setting that replaces the colour scheme on screen with a high-contrast palette (typically black and white or black and yellow) to improve readability for users with low vision, colour blindness, or light sensitivity. The CSS prefers-contrast media query lets websites detect and respond to this preference.

Category: Accessibility (also: Infrastructure, Design)

Author: Atomic Glue Team

## Definition

High Contrast Mode is a system-level accessibility feature (Windows High Contrast Mode, macOS Increase Contrast, browser forced colours) that applies a user-defined colour scheme to all applications and websites, replacing author-specified colours with a high-contrast palette. This significantly changes how websites appear: backgrounds may become black, text may become white, and links may become bright blue or yellow. Websites that rely on background images, subtle colour distinctions, or patterned backgrounds may become unreadable or lose critical information. The forced-colors media query and the prefers-contrast media query in CSS allow developers to detect and adapt to these modes. The key principle is that information should not be conveyed by colour alone (WCAG 1.4.1 Use of Color, Level A). In high contrast mode, background images are typically suppressed and text colours are overridden, so any content that depends on background-image for meaning will be lost.

## How high contrast mode affects web content

When a user enables High Contrast Mode, the operating system overrides the stylesheet of the website with the user's chosen colour palette. Background colours, background images, and box shadows are typically removed. Text inherits the user's chosen foreground colour. Borders may or may not be preserved depending on the mode. This means that any UI element that depends on a specific colour for meaning (a red required-field asterisk, a green success indicator, a grey disabled button) must also convey that meaning through an icon, text label, or pattern. Colour alone is insufficient. The CSS forced-colors media query (Width 2) detects whether forced colours are active and lets developers preserve essential information (e.g., keeping a visible border on buttons that might otherwise become borderless text on a solid background).

## CSS media queries for contrast preferences

prefers-contrast: more applies when the user has requested higher contrast (Windows High Contrast Mode, macOS Increase Contrast). prefers-contrast: less applies when the user has requested lower contrast (e.g., Dark Mode with reduced eye strain). forced-colors: active is the newer, more specific query for forced colour schemes. In forced-colors mode, the system palette overrides author colours, and the developer can use the forced-color-adjust property to exempt certain elements from forced colour overrides (use sparingly). The best practice is to design without relying on colour alone for meaning and to test your site in Windows High Contrast Mode by pressing Left Alt + Left Shift + Print Screen.

## In code

/* Ensure borders are visible in forced-colors mode */
@media (forced-colors: active) {
  .card {
    border: 2px solid CanvasText; /* Use system-defined text colour */
  }
  .icon-warning {
    /* Use a symbol in addition to colour */
    forced-color-adjust: none;
  }
}

/* Adapt for high contrast preference */
@media (prefers-contrast: more) {
  body {
    line-height: 1.7; /* Improve readability */
  }
  .subtle-text {
    color: #000; /* Use full black instead of grey */
  }
}

## Common questions

Q: Do I need to test in Windows High Contrast Mode?

A: Yes, if you want to be confident your site works for users who rely on this mode. Windows High Contrast Mode is the most common forced-colour implementation. Enable it with Left Alt + Left Shift + Print Screen, then navigate your site. Any content that disappears, buttons that become invisible, or icons that lose meaning are bugs that need fixing.

Q: Can I prevent my site from being affected by high contrast mode?

A: You can use forced-color-adjust: none on specific elements, but this is generally not recommended. Forced colour modes exist for a reason: the user needs that level of contrast. Instead, ensure your design works with the user's chosen colours. That is the accessible approach.

## Key takeaways

• High Contrast Mode overrides website colours with the user's system palette.
• Background images and colour-only cues are lost in high contrast mode.
• Use prefers-contrast and forced-colors media queries to adapt.
• Never convey information by colour alone (WCAG 1.4.1).
• Test your site in Windows High Contrast Mode with Alt+Shift+Print Screen.

## Related entries

• [Color Contrast Ratio](atomicglue.co/glossary/color-contrast-ratio)
• [Reduced Motion](atomicglue.co/glossary/reduced-motion)
• [Accessibility (a11y)](atomicglue.co/glossary/accessibility)

Last updated July 2026. Permalink: atomicglue.co/glossary/high-contrast-mode