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;
}
}
Here is what I've tried but it doesn't get applied in Chrome
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.
How to detect if high contrast is enabled for TypeScript detection of high contrast in other browsers/platforms as well.