Windows High Contrast Mode (HCM) is an accessibility feature built into
Windows that replaces the colours of all interface elements — including web
content — with a limited high-contrast palette chosen by the user. It is
used primarily by people with low vision, photosensitivity, or conditions
such as migraines that make standard screen colours difficult to tolerate.
Testing in High Contrast Mode reveals a category of visual accessibility
failures invisible under normal conditions.
[1]
When High Contrast Mode is enabled, Windows overrides the colours specified
by CSS with a small set of system colours. The user's chosen theme typically
provides a dark background with high-contrast foreground colours for text,
links, buttons, and borders.
Crucially, background images are removed in High Contrast Mode. Any
information conveyed solely through a background image — including icons,
decorative separators, and certain button states — becomes invisible.
[2]
Windows 10:
Settings → Ease of Access → High Contrast → toggle on
Windows 11:
Settings → Accessibility → Contrast themes → select a theme (e.g.
Aquatic, Desert, Dusk, Night Sky) → Apply
Keyboard shortcut:
Alt + Left Shift + Print Screen toggles the most recently used High
Contrast theme on and off.
Recommended browser for testing: Edge or Chrome on Windows.
Firefox has its own forced colours implementation that behaves differently.
Modern browsers expose High Contrast Mode to CSS via the Forced Colours
API. CSS media queries can detect and respond to it:
The CSS forced-color-adjust property allows specific elements to opt
out of forced colour adjustments where the developer provides an
alternative that works in high contrast contexts.
[3]
Step 1 — Enable High Contrast Mode and load the page
Enable a dark High Contrast theme and load the page in Edge or Chrome.
Do a visual scan of the entire page before interacting with anything.
Step 2 — Check that all content is visible
Step 3 — Check interactive states
Step 4 — Check focus indicators
Focus indicators are particularly important in High Contrast Mode as
they are one of the main navigation aids for keyboard users who also
use high contrast. Verify the focus outline is thick and clearly visible.
Step 5 — Check custom components
Custom components built with CSS borders, box-shadows, and background
colours that mimic native controls may lose their visual structure in
High Contrast Mode. Verify accordions, tabs, dialogs, and other custom
widgets remain visually coherent.
[2]
Icons using background images. Background images are suppressed in
High Contrast Mode. Icons rendered as background images on buttons or
links become invisible, potentially leaving buttons with no visible label.
Custom focus styles using box-shadow only. Box-shadow is removed in
High Contrast Mode. A focus indicator that relies solely on box-shadow
disappears, leaving keyboard users without a visible focus position.
Borders using box-shadow. Similarly, card borders or component
outlines rendered only with box-shadow disappear in High Contrast Mode,
causing layout elements to lose their visual definition.
SVG icons using hardcoded fill colours. SVG icons with fill colours
hardcoded in CSS (rather than using currentColor) may not adapt to the
high contrast palette and become invisible against the high contrast background.
When developing for High Contrast Mode compatibility, use CSS system
colour keywords rather than hardcoded hex values:
| Keyword | Usage |
|---|---|
| ButtonText | Text colour for buttons |
| ButtonFace | Background colour for buttons |
| CanvasText | Default text colour |
| Canvas | Default background colour |
| LinkText | Unvisited link colour |
| VisitedText | Visited link colour |
| HighlightText | Selected text colour |
| Highlight | Selection background colour |
Last edited Apr 7, 2026, 7:43 PM · P**** J****