Detect High Contrast extension use in Chrome browser
If you are asking about Windows High Contrast Mode, Chrome does not know when that is active.
In general, if a Windows user has chosen to enable High Contrast Mode, then that user is surfing in Microsoft Internet Explorer or Microsoft Edge (as these browsers support it). Both of them support the proprietary -ms-high-contrast @media rule.
Checking for a missing background image is a tactic that would work in IE/Edge, but using the media query is a better approach. Especially since Windows High Contrast Mode will soon allow background images in Edge.
If you are looking to detect when a particular extension has set its own high contrast mode in Chrome, it would be helpful to know which extension.
For example, with the High Contrast extension you can look for the following attributes on the <html> tag: hc="a3" and hcx="3" (the values may be different for you, but the attributes should match). If you open the browser dev tools you can see some other things it does. but those attributes are at the highest level of the DOM and probably safest to use.
If you are asking about Chrome for Android, that is also a different process.
...all I need is to be able to detect the high-contrast mode in Chrome
Solution #1:
In my React/TypeScript project, I used code similar to @Wesley Abbenhuis's answer, but found I didn't need the timeout for my component that took seconds to load. In fact, I created a demo React project that tested for the extension in the first loading component, and no delay was necessary.
const htmlTag: HTMLElement = document.getElementsByTagName(
'html'
)[0];
const isUsingChromeHighContrastExtension: boolean =
htmlTag.getAttribute('hc') !== null;
Solution #2:
Make your non-high contrast code accessible, and you shouldn't have to detect Chrome's high contrast extension in the first place.
From the WCAG Criterion 1.4.11: Non-text Contrast:
Success Criterion 1.4.11 Non-text Contrast (Level AA): The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components
Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.