2

I'm looking for a simple way to detect if the user's system is in high contrast mode or not using javascript/typescript within a react app.

Is there a public method available in a library somewhere?

These stackoverflow posts don't give me what I'm looking for, which is a method from an import:

Detect if 'High contrast' is enabled in Android accessibility settings

How to detect MAC OS inverted color mode in JavaScript / CSS?

How do I detect if a user has Mac OS high contrast accessibility settings enabled?

EDIT: I intend to be able to differentiate between black on white and white on black mode

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

/* Targets displays using the Windows’ "High Contrast Black" theme: */
@media screen and (-ms-high-contrast: white-on-black) {
    .targetClass {
        color: white;
        background-color: black;
    }
 }

/* Targets displays using the Windows’ "High Contrast White" theme: */
@media screen and (-ms-high-contrast: black-on-white) {
    .targetClass {
        color: black;
        background-color: white;
    }
 }
Super Jade
  • 5,609
  • 7
  • 39
  • 61
springathing
  • 425
  • 3
  • 8
  • 28

1 Answers1

1

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

Super Jade
  • 5,609
  • 7
  • 39
  • 61