What Actually Happens to CSS in High Contrast Mode

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 ;)

Detect High Contrast extension use in Chrome browser

The Chrome Extension will inject some code to generate a highcontrast LAF.

The setTimeout could be required duo to the injection. In my case it was required.

This worked for me:

setTimeout(function(){
   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);

How to get Chrome to respond to Windows 10 high contrast mode using javascript/typescript in a React app

Here is what I've tried but it doesn't get applied in Chrome

How to get Chrome to respond to Windows 10 High Contrast mode:

Chrome does its own thing with its High Contrast Extension. This extension doesn't respond to Windows 10 High Contrast mode!

Chrome also won't respond to the ms-high-contrast media queries, which are for IE and Edge Legacy only.

However, you can detect if Chrome's High Contrast Extension is enabled via TypeScript like this:

const htmlTag: HTMLElement = document.getElementsByTagName('html')[0];
const isUsingChromeHighContrastExtension: boolean =
    htmlTag.getAttribute('hc') !== null;

Now you have a boolean, isUsingChromeHighContrastExtension, that you can use to adjust your styling based on whether the extension is enabled.

Note that Chrome's High Contrast Extension doesn't have a black on white or a white on black setting, but it does have a variety of other options that some visually impaired people benefit from.

Related:

How to detect if high contrast is enabled for TypeScript detection of high contrast in other browsers/platforms as well.

Targeting Firefox

I see borders in high contrast mode even if I don't specify any borders to form input fields. why?

Color contrast mode gets rid of many subtle color differences and tries to make the "foreground" stand out from the background. Text and form fields are considered foreground, regardless of their color and visual settings. Placing a border around these ensures that users will be able to identify them.

---

Related Topics