Jump to main content

Quick Note on high contrast mode

  • Published:
  • Category: accessibility, Windows High Contrast

When testing websites and apps in Windows high contrast mode (HCM), there are two issues I’ve come across over again and again.

HCM cares not for your ARIA roles

While ARIA roles and CSS can be used to alter the semantics and visual appearance of an element (for example, creating custom buttons or links), Windows high contrast mode can pierce through these shenanigans. The OS-level user styles will ignore the custom modifications to these elements and will provide high contrast coloring based on the element’s default semantics.

Consider the following:

screen shot of both links and other elements styled to look like links as rendered by default system settings.
This screen shot consists of two actual links and other elements styled to be semantically announced and look like links. Review the link CodePen for the source.

But when Windows high contrast mode is enabled, many of these “links” are not colored as one might expect:

screen shot of both links and other elements styled to look like links as rendered by default system settings.
With high contrast mode turned on the true links receive the high contrast theme's link coloring. The other elements that lacked an href attribute or were modified by ARIA to become links, do not receive the theme's link coloring. Note the false link within the paragraph, where color alone was used to designate it as a link...

For another example, similar issues can occur if using aria-disabled and JavaScript to disable an element such as a button, rather than using the disabled attribute.

A standard button, aria-disabled and disabled button in High Contrast mode.
The normal button and button with aria-disabled are both colored as the normal button style of the high contrast theme. The button with the disabled attribute is the only button that receives the high contrast disabled coloring.

You can review the button demo out on CodePen, and if you do, you may notice I have the following CSS commented out:

[aria-disabled] {
  border: 4px solid HighlightText;
}

If you enable that styling you’ll notice that the border width of the aria-disabled button is increased, but the color does not change.

aria-disabled changes the announced semantics of an element, but doesn’t actually disable the button. So, not actually being disabled means that the button’s high contrast style falls back to the native button style. Since buttons are one of the elements that receive specific styles from the OS-level high contrast theme, you aren’t going to be able to change the button style to another color, even if using aria-disabled and JavaScript to properly disable the control.

The best way to mitigate these, and other potentially incorrectly colored elements is to rely on the native HTML elements instead.

Background images are (mostly) ignored

While the coloring of elements not matching expectations can be a bit annoying and/or confusing, the complete disappearance of important imagery can be quite troubling. Especially if the imagery is the primary indicator of an actionable element (e.g. icon buttons).

With the exception of Microsoft Edge, IE11 and Firefox do not support CSS background images when High Contrast mode is enabled. To mitigate issues with this, I often have to advise developers to ensure any imagery that is visually important should be coded as an inline img or svg element.

The following background image demo shows two implementations for a background image. One as a CSS background image and the other as an absolutely positioned img element, with content overlaid on top of it.

See the Pen a test for background images in HCM by Scott (@scottohara) on CodePen.

The following image shows what the CodePen demo looks like with high contrast mode turned on:

screen shot showing the CSS background has vanished, and text that was set to color: transparent, has become visible. The example with the image element as background still displayes the graphic in high contrast mode.

Another example using an SVG background image for a button. Try it out with HCM enabled:

See the Pen icon button by Scott (@scottohara) on CodePen.

Read more about high contrast mode

Off-colored elements and disappearing background images just graze the surface of things one should be aware of when designing for designing for high contrast mode. For more information, check out the following links: