Working with High Contrast Mode

Hi there!

Designer at thoughtbot in Boston, MA
Occasional author at CSS-Tricks
MDN contributor
Janitor at the The A11Y Project

Head’s up

Video
High contrast
Mild strobing

The ideal

WCAG AA

We don’t live in a perfect world

Grey (eh?) and gray (ah!)

Two gray squares, one light and one dark. The light gray square has a failing contrast ratio of 1.1, and the dark gray square has a failing contrast ratio of 2.8.

The real world is complicated

Irlen Syndrome

Scotopic sensitivity

You don’t know what you don’t know

Keep your content open and interoperable

It's important to recognise that experience is not a singular thing, our experience is not universal, not everyone accesses content the same way we do, on the same devices, on the same networks, in the same modalities we do.

And when we design the web in the way that we expereince it, we actually limit the way that other people experience it. We actually exclude the people that are not like us, and that's not great.

—Aaron Gustafson

High Contrast Mode

A thing that exists

Internet Explorer 10+

Microsoft Edge

Stock Windows 10 High Contrast Mode themes

Screenshots of the 4 themes: High Contrast 1, High Contrast 2, High Contrast Black, High Contrast White

High Contrast 1 theme example

High Contrast 2 theme example

High Contrast Black theme example

High Contrast White theme example

Custom themes

Video example of a custom high contrast theme creation

People experiencing a biological condition

People experiencing an environmental condition

Tweet explaining universal utility

Tweet by Shaun Finglas: Protip - max brightness and high contrast mode enabled allows you to use your laptop in the garden. Looks ugly but functional.

1.4.8

Visual Presentation

“Foreground and background colors
can be selected by the user.”

Firefox support

So close, and yet so far away

Chrome support

Screenshot of Chrome prompting the user to install a high contrast extension when High Contrast Mode is enabled.

How it works

Semantic
HTML

Using it

The three Microsoft vendor-prefixed media queries

/* Targets the High Contrast Black theme: */
@media (-ms-high-contrast: white-on-black) { }

/* Targets the High Contrast White theme: */
@media (-ms-high-contrast: black-on-white) { }

/* Targets any active High Contrast theme */
@media (-ms-high-contrast: active) { }

The one usable Microsoft vendor-prefixed media querie

/* Targets the High Contrast Black theme: */
@media (-ms-high-contrast: white-on-black) { }

/* Targets the High Contrast White theme: */
@media (-ms-high-contrast: black-on-white) { }

/* Targets any active High Contrast theme */
@media (-ms-high-contrast: active) { }

CSS2 System Color keywords
ActiveBorder	ActiveCaption	AppWorkspace	Background
ButtonFace	ButtonHighlight	ButtonShadow	ButtonText
CaptionText	GrayText	Highlight	HighlightText
InactiveBorder	InactiveCaption	InactiveCaptionText	InfoBackground
InfoText	Menu	MenuText	Scrollbar
ThreeDDarkShadow	ThreeDFace	ThreeDHighlight	ThreeDLightShadow
ThreeDShadow	Window	WindowFrame	WindowText

Using CSS2 system color keywords to do malicious things

A fake Windows 95 error message that reads, 'Windows requires additional information before it can continue displaying this web page. Please provide your credit card number.'. Screenshot.

High Contrast Mode Keywords

CSS2 System Color keywords
ActiveBorder	ActiveCaption	AppWorkspace	Background
ButtonFace	ButtonHighlight	ButtonShadow	ButtonText
CaptionText	GrayText	Highlight	HighlightText
InactiveBorder	InactiveCaption	InactiveCaptionText	InfoBackground
InfoText	Menu	MenuText	Scrollbar
ThreeDDarkShadow	ThreeDFace	ThreeDHighlight	ThreeDLightShadow
ThreeDShadow	Window	WindowFrame	WindowText

Remaining High Contrast Mode color keywords
ActiveBorder, deprecated	ActiveCaption, deprecated	AppWorkspace, deprecated	Background, deprecated
ButtonFace	ButtonHighlight, deprecated	ButtonShadow, deprecated	ButtonText, deprecated
CaptionText, deprecated	GrayText, deprecated	Highlight	HighlightText
InactiveBorder, deprecated	InactiveCaption, deprecated	InactiveCaptionText, deprecated	InfoBackground, deprecated
InfoText, deprecated	Menu, deprecated	MenuText, deprecated	Scrollbar, deprecated
ThreeDDarkShadow, deprecated	ThreeDFace, deprecated	ThreeDHighlight, deprecated	ThreeDLightShadow, deprecated
ThreeDShadow, deprecated	Window	WindowFrame, deprecated	WindowText

High Contrast color keywords and how they are applied
Keyword	Content Type
`<a>`	Links
`windowText`	Text
`highlightText`	Selected Text Foreground
`highlight`	Selected Text Background
`buttonFace`	Button Text
`window`	Background Color

Keyword	Content Type
`<a>`	Links
`windowText`	Text
`highlightText`	Selected Text Foreground
`highlight`	Selected Text Background
`buttonFace`	Button Text
`window`	Background Color

Keyword	Content Type
`<a>`	Links
`windowText`	Text
`highlightText`	Selected Text Foreground
`highlight`	Selected Text Background
`buttonFace`	Button Text
`window`	Background Color

Keyword	Content Type
`<a>`	Links
`windowText`	Text
`highlightText`	Selected Text Foreground
`highlight`	Selected Text Background
`buttonFace`	Button Text
`window`	Background Color

Keyword	Content Type
`<a>`	Links
`windowText`	Text
`highlightText`	Selected Text Foreground
`highlight`	Selected Text Background
`buttonFace`	Button Text
`window`	Background Color

“Isn’t this limited?”

Yes, that's the point!

Explaining High Contrast Mode's utility

Tweet by Hugo Giraudel: High contrast mode is not about design anymore, but strict usability. You should aim for highest readability, not color aesthetics.

Keep it predictable

Gentle nudges, not complete overhauls

Using it

Example of an input that does not work in High Contrast Mode

Your name

Move the placeholder label

Your name Example: John, Priyanka, 张伟

Activate High Contrast Mode

/* Apply styling when High Contrast Mode is active */
@media (-ms-high-contrast: active) {
}

Your name Example: John, Priyanka, 张伟

Apply a border

/* Apply styling when High Contrast Mode is active */
@media (-ms-high-contrast: active) {
    input {
        border: 2px solid #ffffff;
    }
}

Your name Example: John, Priyanka, 张伟

Apply a color keyword to the border

/* Apply styling when High Contrast Mode is active */
@media (-ms-high-contrast: active) {
    input {
        border: 2px solid buttonFace;
    }
}

Your name Example: John, Priyanka, 张伟

Example of a button written using ARIA

<span class="button" role="button" tabindex="0">
  Download Pizza
</span>

Download Pizza

Activate High Contrast Mode

<span class="button" role="button" tabindex="0">
  Download Pizza
</span>

/* Apply styling when High Contrast Mode is active */
@media (-ms-high-contrast: active) {
}

Download Pizza

Target ARIA using a CSS attribute selector and style

<span class="button" role="button" tabindex="0">
  Download Pizza
</span>

/* Apply styling when High Contrast Mode is active */
@media (-ms-high-contrast: active) {
    [role="button"] {
        border: 0.15em solid buttonText;
        color: buttonText;
    }
}

Download Pizza

Content considerations

“Don’t use CSS background images to deliver content.”

—Terrill Thompson

Edge generates backgrounds for text over background images

Screenshot of Microsoft Edge on Windows 10 running in High Contrast Mode. Edge has generated a background when text is placed over background images to help legibility.

Raster images

JPEGs, PNGs, GIFs, etc.

Adjust images in High Contrast Mode using CSS filters

/* Slightly enhance important images */
@media screen and (-ms-high-contrast: active) {
  img.hero {
    filter: brightness(1) contrast(1) saturate(1.5);
  }
}

Example of toggling filter adjustments

Photo of Vice President Biden meeting Biden the Golden Retriever.

Source: AP/REX/Shutterstock

SVG

Scalable Vector Graphics

Non-interactive icons

/* Only applies to inline SVG */
/* Non-interactive icons */
.icon-svg {
  fill: currentColor;
}

File saved!

Button icons

/* Interactive icons */
@media screen and (-ms-high-contrast: active) {
  button.icon-svg {
      background: none;
      border-color: buttonText;
      fill: buttonText;
  }
}

Styling SVG with CSS

/* Static color declarations */
.bar-chart { background-color: #ffffff; }

.bar-chart .frame { stroke: #000000; }

.bar-chart .text { fill: #000000; }

.bar-chart .age-sixtyfour-under { fill: #0074d9; }

.bar-chart .age-sixtyfour-under { fill: #ffdc00; }

Dynamically styling SVG with CSS in High Contrast Mode

/* Dynamic color when High Contrast mode is active */
@media (-ms-high-contrast: active) {
  .bar-chart { background-color: window; }

  .bar-chart .frame { stroke: highlightText; }
  .bar-chart .text { fill: highlightText; }

  .bar-chart .age-sixtyfour-under { fill: windowText; }

  .bar-chart .age-sixtyfour-over { fill: highlight; }
}

SVG chart example, again

Complicated SVG illustration

A detailed vector illustration of a Gallardo sportscar.

Source: https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/gallardo.svg

Media

Audio, video, etc.

CSS that removes content from High Contrast Mode

/* Remove from High Contrast Mode, but maintain layout */
@media (-ms-high-contrast: active) {
    .hcm-remove {
        visibility: hidden;
    }
}

CSS that forces content to display as text in High Contrast Mode

/* Force content to display as text in High Contrast Mode */
@media (-ms-high-contrast: active) {
    .hcm-display-as-text {
        color: windowText;
    }
}

Tweet about transparent borders working in High Contrast mode

Adding a transparent border to buttons that have no borders can help make the buttons more obvious in high contrast mode.

Cut the Microsoft mustard

if (window.matchMedia("(-ms-high-contrast: active)").matches) {
  // We have support for IE 10+
} else {
  // Load a good fallback experience
}

Related Media Queries

Screnshot of Humans of New York on an iPhone

Screnshot of Humans of New York on an iPhone with Inverted Colors turned on

CSS targeting images when colors have been inverted

/* Invert inverted images */
@media (inverted-colors) {
  img {
    filter: invert(100%);
  }
}

Screnshot of Humans of New York on an iPhone with Inverted Colors turned on and images inverted to look better

CSS targeting content when the ambient light level is high

/* Boost contrast between elements */
@media (light-level: washed) {
  body {
    background-color: #ffffff;
  }

  p {
    color: #000000;
    font-size: 120%;
  }
}

Demonstrating potential interoperability

A fake Chrome extension demonstrating how extensions could be used to trigger a washed media query.

Testing!
Testing!
Testing!

Early in your process

Late in your process

“But I don't have
a Windows computer!”

Free Virtual Machines from IE8 to MS Edge
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

Amazon WorkSpaces - Amazon AWS
https://aws.amazon.com/workspaces/