Detect High Contrast extension use in Chrome browser

问题

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 images are disabled, because high-contrast mode disables background images. Then if the browser is in high-contrast mode, I append a CSS file to make fixes for displaying in high contrast. This works fine in Firefox, Edge, and IE, but Chrome uses its own extension to create high-contrast, and it does not disable the background images, so in Chrome the CSS for high contrast is not appended.

From searching I have found that Chrome adds a filter over the website as opposed to enabling/disabling/changing the website colors or images themselves. I have searched and searched, but I can't find anything to test to check if Chrome is using high-contrast mode. If there were a way to detect which extensions are being used that would also solve the problem, but I haven't been able to find a way to do that either.

My code actually works fine, all I need is to be able to detect the high-contrast mode in Chrome. Here is the method I use to check for high-contrast mode.

let highContrast = (options) => {

  let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
  hcDetect.appendTo(document.body);

  if (hcDetect.css('background-image') === 'none') {
    $('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');

  }
}

回答1:

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

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/38492220/detect-high-contrast-extension-use-in-chrome-browser

标签

javascript

css

google-chrome

accessibility

high-contrast