Detect High Contrast extension use in Chrome browser

Question

I am trying to make my website accessible in high-contrast mode. In order to detect when high-contrast mode is enabled, I created a JavaScript method to detect if background

Answer 1

...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.