• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Who we are
    • Our values
    • Our story
    • Our clients
    • Our world presence
    • Locations
  • What we do
    • Solutions
    • Content services platforms  ▸ 
      • What is CSP?
      • Solution Enablement Toolkit (SET)
      • Nuxeo systems integrator
      • Meet our Nuxeo developers
      • Content Services Platforms resources
    • Robotic process automation  ▸ 
      • What is RPA
      • Solution Enablement Toolkit
      • Automation center of excellence
      • Journey to intelligent automation
    • Collaboration software
    • Services
    • Accessibility compliance  ▸ 
      • Accessibility development & design
      • Accessibility testing
      • Accessibility training & learning
      • Accessibility file & document remediation
      • Accessibility resources
    • Cloud & application development
    • Data & analytics
    • Support services
  • How we do it
    • Getting started
    • Governance model
    • Project management office
    • QA Framework
    • Insights
    • Case studies
    • Events & community
  • Join us
iSoftStone

iSoftStone

A step above: We help you reach the next level in digital transformation

  • Who we are
    • Our values
    • Our story
    • Our clients
    • Our world presence
    • Locations
  • What we do
    • Solutions
    • Content services platforms  ▸ 
      • What is CSP?
      • Solution Enablement Toolkit (SET)
      • Nuxeo systems integrator
      • Meet our Nuxeo developers
      • Content Services Platforms resources
    • Robotic process automation  ▸ 
      • What is RPA
      • Solution Enablement Toolkit
      • Automation center of excellence
      • Journey to intelligent automation
    • Collaboration software
    • Services
    • Accessibility compliance  ▸ 
      • Accessibility development & design
      • Accessibility testing
      • Accessibility training & learning
      • Accessibility file & document remediation
      • Accessibility resources
    • Cloud & application development
    • Data & analytics
    • Support services
  • How we do it
    • Getting started
    • Governance model
    • Project management office
    • QA Framework
    • Insights
    • Case studies
    • Events & community
  • Join us

Microsoft Edge adopts industry standards for high contrast mode

Microsoft Edge has adopted industry standards for high contrast mode. Prior to this update, developers had to use the -ms prefix on CSS class definitions, which usually caused problems.

Home ‣ Insights ‣ Articles ‣ Microsoft Edge adopts industry standards for high contrast mode

November 9, 2020 by Brad Hamilton

Giving users the option of a light or dark mode has been a popular feature for apps and websites over the last few years. These settings help users manage the brightness and contrast of their screen based on lighting conditions, the time of the day, or coolness factor. Giving users this option gives them a bit of freedom while still allowing site owners and businesses to retain styling and brand control of the look and feel of their app.

This is a win for both users and site owners, but there are a set of users for whom increased contrast and color control is a necessity, not a nice to have. These users utilize their systems high-contrast modes to increase legibility and limit visual distractions. These settings are controlled by the user and these applied styles will over run an app or site’s developer defined color scheme. These settings are controlled by the user and these applied styles will over run an app or site’s developer defined color scheme and it is on us as developers to make affordances for these styles.

 

Styling for high-contrast

Making allowances for users of high-contrast that work across browsers has required the use of browser prefixes, and css media queries. When it came to styling for everyone’s favorite browsers—Internet Explorer (and both versions of Microsoft’s Edge browser)—we had to fall back on the -ms prefix. I’ve never found browser prefixes to be ideal and making sure sites worked across all browsers required remembering the all the prefixes or, add a library to process our css. Developing for the web is hard as it is, but luckily there are changes coming that will allow us the included users of high-contrast without having to fall back on browser prefixes.

Concrete examples work best: here’s a one from Imagine Cup, a Microsoft property that we work on here at iSoftStone.

The Imagine Cup page features a purple banner near the bottom of the screen which holds all the social media icons for the Imagine Cup. The icons are white which shows on the purple banner, as well as in the white on black color scheme offered in Windows, so we only had to move the color we wanted for the fill to the global style sheet. We had already styled this footer to handle Windows high-contrast Mode using the -ms browser prefix and the media query:

Figure 1: Web site example - Original content with no color contrast
 
@media screen and (-ms-high-contrast: black-on-white) {
	.svg-contrast {
		fill: #000;
    }
}
 

Forced colors media query

This is how we’ve had to do things in the past. The upcoming changes will allow us to handle high-contrast styles with the new forced-colors and prefers-color-scheme media queries. To handle the new implementation we had to add the below css to our global stylesheet.

@media (forced-colors: active) and (prefers-color-scheme: dark) {
	.svg-contrast {
		fill:#000;	
    }
}
Figure 2: Web site example - Content with forced-color contrast
 

This dumps the browser prefix, and takes care of two browsers at once. For Firefox, you’ll have to switch over to the prefers-contrast media query, and if you’re still supporting IE and legacy versions of Edge, you’ll have to keep the browser prefix. Luckily, you can stack them like so:

@media (-ms-high-contrast), (forced-colors: active) {
	/* your styles here */
}

These changes aren’t live yet, but you can code and test for them now in Chrome by enabling the force-colors flag in Google’s Chrome browser and Microsoft’s new chromium based version of Edge. If you’d like to learn more about how high-contrast styles work the Edge team has a great write up here and if you’d like to read about how these changes can be implemented in Firefox you can find their documentation here.

 

Want more information?

Ready to start your digital transformation implementation? Or are you interested in learning about how iSoftStone can help you with your next web development project? Please contact us!

Robert Grunau profile picture by Robert Grunau Web Developer | iSoftStone, Inc.
Posted:
Nov 11, 2020
Reading Time:
4 minutes
Share:
 

Articles web-development

Footer

Get in touch

  • info@isoftstone.com
  • +1 425-216-6300
CONTACT US

iSoftStone

  • North America Headquarters
    5808 Lake Washington Blvd. #201
    Kirkland, WA 98033
    USA


    New York
    777 Westchester Avenue, Suite 101
    White Plains, NY 10604
    USA

Our other channels

Twitter LinkedIn Instagram YouTube Channel

Navigation

Who we are
  • Our values
  • Our story
  • Our clients
  • Our world presence
  • Locations
What we do
  • Content services platform
  • Robotic process automation
  • Collaboration software
  • Accessibility compliance
  • Cloud & application development
  • Data & analytics
  • Support services
How we do it
  • Getting started
  • Governance model
  • Project management office
  • QA framework
  • Insights
  • Case studies
  • Events & community
Join us
Privacy

Copyright © 2005–2021 iSoftStone, Inc. All rights reserved.

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in settings.

Privacy Overview
iSoftStone

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognizing you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookies

Strictly necessary cookies should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Google Analytics

This website uses Google Analytics to collect anonymous information such as the number of visitors to the site and the most popular pages. Keeping this cookie enabled helps us improve our website.

Please enable strictly necessary cookies first so that we can save your preferences!

Cookie Policy

More information about our Privacy and Cookie Policy.

Powered by  GDPR Cookie Compliance