Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

The difference between Increased Contrast Mode and Windows High Contrast Mode (Forced Colours Mode)

Martin Underhill describes Increased Contrast Mode (ICM) – a setting that users can opt into, and which website designers/developers can accommodate through a media query:

@media (prefers-contrast: more) {
    /* High contrast styling goes here */
}

Not a lot of people know about this, or they don’t have it high on their list of priorities. It’s utterly reliant on the website creator to support.

Windows High Contrast Mode (WHCM), on the other hand, is a ‘forced colours mode’. It doesn’t rely on the website creator, and instead forces the chosen theme onto the website. It has a well supported media query like ICM, but only allows a handful of carefully selected things to be styled:

@media (forced-colors: active) {
    /* WHCM styling goes here */
    /* Limited to things like text colour, background colour and keyboard focus outline colour */
}

Martin has made the decision to not attempt to define styles for WHCM users, instead delegating this to the user’s operating system. It should mean they have a more consistent/familiar experience, and it will automatically support their choice of dark or light theme.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.