Skip to Main Content

The Other Dark Web: Coding For High Contrast Modes

taught by: Tori Clark

Session Summary:

Windows High Contrast Mode has helped low vision users and those with learning disabilities for the past 25 years, yet very few websites take into account these users. In addition, with the rise in requests for dark mode options for mobile, coding and designing for these modes will only become more important in the future. Learn about common gaps and fixes in this hands-on session about designing and coding for high contrast, inverted, and dark modes.

Description:

High contrast modes were among the first adaptive strategies made available through Windows, shipping with Windows 95 as high contrast “schemes.” They exist today in the form of Windows High Contrast Mode (WHCM), which is still alive and well—boasting 4% usage on all Windows machines. Yet 25 years later, most websites don’t consider these users in their design and code, and many can be difficult if not impossible to navigate when using WHCM. In addition, other high contrast modes like inverted and dark modes (whether built into operating systems or achieved through plugins) can face similar challenges as WHCM.

In this hands-on session, we will talk about some of the issues that can arise from websites that haven’t been designed and coded with high contrast modes in mind, including but not limited to:

  • When to use image vs background-image
  • The importance of semantic HTML (and how to fill the gaps when using ARIA)
  • SVGs in high contrast modes
  • Focus indicator remediation
  • Remediating custom form components

Practical Skills:

  • Designing with High Contrast Modes in Mind
  • WHCM CSS Queries
  • Techniques for High Contrast Remediation

Prerequisites:

Basic HTML and CSS proficiency