High contrast mode is an operating-system setting that throws away most of a site's colours and paints the page in a palette the user chose. Windows ships the version the web can answer, now called Contrast themes. The web platform's name for what it does to your CSS is forced colors, and that entry covers the code side. On the reader's side the effect is short enough to list. The browser discards your author values for text colour, backgrounds, borders and outlines, and substitutes system colours. It forces box shadows and text shadows off. It drops any background image that is not a real image file, so gradients go and photographs stay. Text sitting on top of them stays readable because the browser draws a solid plate behind it. The failures are predictable once you know that list. Meaning carried in a gradient or a shadow disappears. A card drawn with background colours instead of real borders loses its edges. And a focus ring built from a box shadow stops existing for exactly the people most likely to have the mode turned on.
In practice
Turn it on and look. On Windows the shortcut is left Alt plus left Shift plus Print Screen, which makes this a two-second check rather than a chore. Four themes ship with it, Aquatic, Desert, Dusk and Night sky, and Aquatic is what you get if you have never chosen one. Test a dark one and a light one at least, and remember that people edit the colours inside any of them, so four is where the palettes start rather than where they stop. What you are looking for is anything that vanished, anything that lost its boundary, and anything that now reads as the same thing as its neighbour. Worth knowing that the macOS setting called Increase contrast is a different feature, which strengthens borders and reduces transparency rather than replacing the palette, so it needs its own look.
The palette is not yours and it is not fixed either, because people customise it. That is the point of the system colour keywords, which are how a chosen palette reaches your CSS. Windows maps them onto names a user recognises, so Canvas is their background, CanvasText is their text, LinkText is their hyperlink colour and ButtonText is their button text. Styling for this mode means asking for those rather than picking colours.
There is an override and it should stay rare. Setting forced-color-adjust to none on an element keeps your author colours, and it also removes the plate the browser draws behind text. That is a fair trade for a colour picker or a chart key, where the colours are the content. Reaching for it because the mode made your brand look wrong is how you take the feature away from the person using it.
Why it matters
Contrast themes are the clearest reminder that people override your design routinely and legitimately, and that the palette you shipped is not the one everybody sees. The job is to build something that survives having its colours replaced, and the reason that is worth doing rather than tolerating is that the same discipline catches other things. Anything that only communicates through colour, anything that exists only as a shadow, and anything whose boundary is a background rather than a border will fail somewhere else too. Turn the theme on once.
The focus ring that disappears
A design system swaps outlines for box shadows so the focus ring can follow its rounded corners. It looks better, it passes every contrast check, and in a Windows contrast theme it is gone, because shadows are forced off while outlines survive and simply take the system colour. Same page, same code, and the one group most likely to be running a contrast theme is now tabbing blind.
Where this shows up on the site
Related terms
- Contrast ratioA contrast ratio is a number from 1:1 to 21:1 measuring how far apart two colors are in brightness, computed from a formula rather than judged by eye.
- Low visionLow vision is sight loss that ordinary glasses cannot correct, and it covers far more ground than a single blurred-vision picture suggests.
- Color blindnessColor blindness is a reduced ability to tell certain colors apart, and the figure everybody quotes, roughly 1 in 12 men and 1 in 200 women, is for red-green deficiency among people of Northern European descent.
- Screen magnifierA screen magnifier enlarges part of the screen, from the zoom built into every operating system up to dedicated software like ZoomText.
- Dark modeDark mode is a second colour scheme with a dark background.
- Forced colorsForced colors is what the web platform calls it when somebody's operating system throws your palette away and repaints the page in colors they chose.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.