Preventing High-Contrast Mode in Edge from Adding Background to Text

Preventing high-contrast mode in Edge from adding background to text

Found the answer to this eventually. Setting -ms-high-contrast-adjust: none; on the parent can disable the backgrounds that Edge puts behind text.

What actually happens to CSS in high contrast mode?

Did you define colors for both text and background for your form elements?

Here's a relevant criteria from reference list Accessiweb 2.1 : On each Web page, are CSS declarations for colours for element background and fonts used properly? (Silver level equals WCAG 2.0 AA)

Relevant WCAG 2.0 Failure Technique is F24: specifying foreground colors without specifying background colors or vice versa

A recent WebAIM post about contrast mode: http://webaim.org/blog/high-contrast/

About the Google homepage: Google is known for browser sniffing and heavily modified pages depending on browser, logged on their services or not, JS activated or not. It'll even use SPDY protocol instead of HTTP (though that doesn't change the content received by the browser per se).

I wouldn't consider pages from this company for comparisons between browsers ;)

How to programmatically enable -ms-high-contrast media query?

Since media queries are automatic (based on browser conditions) you need to emulate that block in your CSS but apply and remove it based on a user interaction.

It seems to me that you should simply write the styles to emulate IE's high contrast mode and then toggle a class on the document (probably body) when you click a button.

Put your new class and sub definitions at the bottom of your CSS so you know they'll override previous properties.

For example:

h2 {  font-size: 14px;  color: #dddddd;}/* overrides a normal h2 when highContrast class is added to the body *//* use a post processor (LESS/SCSS) to easily nest elements */body.highContrast h2 {  font-size: 18px;  color: #000;  font-weight: bold;}