Windows High Contrast Audits for Data UIs

Windows contrast themes (formerly “High Contrast mode”) replace every colour on a web page with a small palette the user has chosen — typically near-black background with white text and yellow or cyan accents, or the reverse. Browsers apply this as forced colours: author colours for text, backgrounds, borders and SVG fills are overridden, and backgrounds images and shadows are often removed. Data interfaces rely heavily on the things that disappear: zebra-striped rows, background-highlighted selection, box-shadow focus rings, coloured status badges, and chart series identified by fill colour.

This page is an audit procedure for data UIs in forced colours. It belongs to manual accessibility audits.

Spec reference

Forced colours are defined by CSS Color Adjustment (forced-colors: active, system colour keywords, forced-color-adjust). WCAG does not have a criterion named for it, but failures in forced colours are failures of existing criteria for the users who depend on it:

  • SC 1.4.1 Use of Color — information carried by background colour (selection, status) disappears.
  • SC 1.4.11 Non-text Contrast — borders and focus indicators drawn with shadows vanish.
  • SC 2.4.7 Focus Visible — box-shadow focus rings are removed.
  • SC 1.1.1 Non-text Content — SVG icons drawn in a fixed colour may disappear against the forced background.

The practical standard: every piece of information and every state visible in the normal theme must remain perceivable in a forced-colours theme.

What typically happens to data UI parts in forced colours Matrix of data UI elements, what forced colours usually does to each, and what to check. What typically happens to data UI parts in forced coloursElementTypical resultCheckZebra stripingRemovedRow boundaries still visible?Selected row tintRemovedSelection shown another way?box-shadow focus ringRemovedOutline-based focus visible?Status badge colourReplacedText or icon carries status?Chart series fillsOne colourPatterns, dashes or labels?Sort arrow SVGMay vanishUses currentColor?
Anything carried by background colour or box-shadow is at risk; borders, outlines, text and icons in currentColor survive.

When to audit — and what to prioritise

Audit every data page type once per major design change, and every new component that uses colour for state. Prioritise selection, focus and status — the states users cannot work without — then charts and decorative styling.

Use DevTools emulation for speed (Chromium: Rendering panel → Emulate CSS media feature forced-colors: active), and confirm on real Windows with Edge before release, because emulation does not reproduce every system colour mapping and user palettes vary.

The misapplication to name is judging the page by whether it “looks like the design”. Forced colours is meant to replace the design. The question is only whether information and states survive.

Annotated code example

FORCED COLOURS AUDIT — Invoices grid — Edge 128, Windows 11
Themes: "Night sky" (dark), "Desert" (light)      Emulation pass: Chromium DevTools

TABLE / GRID
  [ ] Cell and row boundaries visible (borders, not only zebra backgrounds)
  [ ] Column headers distinguishable from body cells
  [ ] Sort indicator visible on the sorted column (icon in currentColor or text)
  [ ] Focused cell visible (outline, not box-shadow)
  [ ] Selected rows distinguishable (outline, icon or checkbox — not only tint)
  [ ] Focused AND selected cell distinguishable from each

STATUS AND BADGES
  [ ] Every status badge has text ("Overdue"), not colour only
  [ ] Icons visible against the forced background

CHARTS
  [ ] Series distinguishable (dashes, markers, patterns, direct labels)
  [ ] Axis lines and labels visible
  [ ] Focused data point visible

CONTROLS
  [ ] Buttons have visible boundaries
  [ ] Disabled state distinguishable (GrayText)
  [ ] Toggle state (aria-pressed) visible
/* Typical fixes found by the audit */
@media (forced-colors: active) {
  [role="gridcell"]:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
  [role="row"][aria-selected="true"] { outline: 1px solid SelectedItem; outline-offset: -3px; }
  .badge { border: 1px solid CanvasText; }                    /* shape survives */
  .sort-icon, .icon { fill: currentColor; forced-color-adjust: auto; }
  tr + tr td { border-top: 1px solid CanvasText; }            /* replaces zebra */
}

Styling states from ARIA attributes ([aria-selected="true"]) rather than from classes means the forced-colours rules follow the real state automatically.

Keyboard & AT behaviour

The audit is visual but done with the keyboard, because focus is the most commonly lost state.

Action Expected in forced colours Failure indicator
Tab into the grid Focused cell outlined in Highlight No visible focus
Arrow through a selected range Focus distinct from selection Cannot tell which cell is focused
Toggle a row checkbox Checkbox state visible Custom checkbox drawn with background only
Arrow through a chart Focused point ringed Ring removed with shadows
Open a row menu Menu boundary and focused item visible Menu blends into the page
Styles that vanish and styles that survive Comparison of CSS techniques that are removed or overridden in forced colours against techniques that remain visible. Styles that vanish and styles that survive✗ Vanish or collapsebackground-color for statebox-shadow for focus and bordersbackground-image iconsFixed-colour SVG fills✓ Surviveoutline and borderText labels and icons with shapeSVG using currentColorSystem colour keywords in a forced-colorsquery
Choose the right column for anything that carries meaning.

Integration context

Chart-specific fixes — mapping chart roles to system colours, patterns for series — are in forced colours mode for SVG charts. Focus rings that survive are designed in designing focus indicators for dense data grids.

Low-vision users often combine forced colours with zoom; run the key grid stages of zoom and reflow testing at 400 percent in a contrast theme as well.

A forced-colours audit pass Timeline of a forced-colours audit: emulation pass in DevTools, fixes, real Windows pass in two themes, screenshots of remaining failures. A forced-colours audit passEmulateDevTools forced-colors: activeWalk the checklisttable, status, charts, controlsFixoutlines, currentColor, textReal WindowsNight sky and Desert themesRecordscreenshots of remaining failuresone audit cycle
Emulate first for speed; confirm on real Windows before release.

Gotchas

forced-color-adjust: none overuse. Opting whole components out of forced colours to “fix” them breaks the user’s chosen contrast. Opt out only colour-scale marks, with system-colour borders.

Custom checkboxes. Checkboxes drawn with appearance: none and a background-colour tick disappear. Use native checkboxes or draw the tick with a border or currentColor SVG.

Images of text. Text in images (logos, chart PNGs) is not adapted. Avoid for anything informational.

Design system notes

Every design-system component should have a forced-colours screenshot in its documentation and a forced-colours stylesheet section maintained with the component. State styles driven by ARIA attribute selectors make those sections short and reliable.

Testing checklist

FAQ

How do I test a site in Windows High Contrast mode without Windows?

Use Chromium DevTools’ Rendering panel to emulate forced-colors: active for a first pass. Confirm on a real Windows contrast theme in Edge before release, since emulation does not reproduce every system colour mapping.

What usually breaks in data tables in high contrast mode?

Anything carried by background colour or box-shadow: zebra stripes, selected-row tints, focus rings drawn with shadows and coloured status badges. Borders, outlines, text and currentColor icons survive.

Should my page look like its normal design in high contrast mode?

No. The user’s palette replaces your design on purpose. What matters is that all information and states — focus, selection, status, chart series — are still perceivable.

Is it acceptable to use forced-color-adjust: none?

Sparingly, for elements whose colours are the data, such as heat map cells, with system-colour borders. Never to keep the brand palette on whole components.

← Back to Manual Accessibility Audits