Working with High Contrast Mode

A presentation at #a11yTOCamp in November 2017 in Toronto, ON, Canada by Eric Bailey

Eric Bailey
@ericwbailey

1 / 109

Accessibility is more than just making things work in a screen reader. This talk discusses Windows High Contrast Mode's capabilities and limitations, and how to best design and develop for it.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on social media.

Awesome #a11yTOCamp talk by @ericwbailey on Windows High Contrast Mode, where he even shows the CSS2 keywords. pic.twitter.com/WY73vPhbiw
— Adrian Roselli 🗯 (@aardrian) November 18, 2017
Light level media queries! Neat. @ericwbailey #a11yTOcamp pic.twitter.com/u4s39FrAFS
— Bryson Gilbert (@bryg) November 18, 2017
"Upcoming media query: inverted-colors." @ericwbailey #a11yTOCamp
More info: https://t.co/uy9sztc98Z
— Scott Vinkle (@svinkle) November 18, 2017
Eric's switching between High Contrast and default themes as he gives his talk to demo examples in his slides; live theme switching! It's awesome! 😄 @ericwbailey #a11yTOCamp
— Scott Vinkle (@svinkle) November 18, 2017
Great talk on responsible UI design for high contrast mode by @ericwbailey during #a11yTOCamp #accessibilty #webdev
— Chris O'Brien (@a11ycob) November 18, 2017
"SVGs can inherit the current text color—works in High Contrast mode, too."

.icon-svg {
fill: currentColor;
}

@ericwbailey #a11yTOCamp
— Scott Vinkle (@svinkle) November 18, 2017
Working with colour contrast mode? "Keep it predictable. Gentle nudges not complete overhauls." - @ericwbailey #a11yTOCamp
— Nell Chitty (@NellChitty) November 18, 2017

Working with High Contrast Mode

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

Working with High Contrast Mode

Building a more accessible web platform - Microsoft Edge DevBlog

Greg Whitworth - How to use -ms-high-contrast

Windows High Contrast Mode: the limited utility of -ms-high-contrast

CSS Background Images & High Contrast Mode | Adrian Roselli

Windows High Contrast and Background Images | Terrill Thompson

Accessible SVGs in High Contrast Mode | CSS-Tricks

How users change colours on websites - Gov.UK

Media Queries Level 5 - W3C Editor's Draft

Writing CSS with Accessibility in Mind - Medium

Buzz and feedback