Detect High Contrast Extension Use in Chrome Browser

Detect High Contrast extension use in Chrome browser

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

How to get Chrome to respond to Windows 10 high contrast mode using javascript/typescript in a React app

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

How to check if user is in high contrast mode via JavaScript or CSS

According to this article about using CSS sprites in high contrast, in high contrast mode on Windows, background images should be set to "none" and it also changes the background color. This should override any CSS stylesheet. So you can perform some javascript to detect it after initial rendering. Check his demo page (the "FYI [Not] in high contrast mode" text).

I have Mac (FYI switch using Cmd + Alt + Ctrl + 8) and his technique doesn't work for me, but he says it works on Windows.

If it works, you can either use some JavaScript to simply change your CSS or set a (session) cookie and reload the page to pass it to the server and perform server-side actions.

How to programmatically enable -ms-high-contrast media query?

Since media queries are automatic (based on browser conditions) you need to emulate that block in your CSS but apply and remove it based on a user interaction.

It seems to me that you should simply write the styles to emulate IE's high contrast mode and then toggle a class on the document (probably body) when you click a button.

Put your new class and sub definitions at the bottom of your CSS so you know they'll override previous properties.

For example:

h2 {  font-size: 14px;  color: #dddddd;}/* overrides a normal h2 when highContrast class is added to the body *//* use a post processor (LESS/SCSS) to easily nest elements */body.highContrast h2 {  font-size: 18px;  color: #000;  font-weight: bold;}

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

Iam afraid it is not possible its at this moment.

The feature in Objective-C to determine if the accessibility mode is active (boolean AXAPIEnabled(void);) has been deprecated as of 10.9 with no indication that there is a replacement. You can see it on the Apple Developer site. By extension, if developers at that level of the system no longer have access, I expect web developers would also be restricted (just as AppleScript writers seem to not have access).

In general, testing for the presence of assistive technology or activation of assistive features is frowned upon by the users who need it most. It creates the very real risk of both well-intentioned developers breaking these features (perhaps by un-verting the page) and also of allowing bad actors to determine somebody's personal health information.

Altought it might come in future as its in stage 5 (proposal)
https://drafts.csswg.org/mediaqueries-5/#prefers-contrast

Other than that Iam afraid you are facing dead end.

High contrast mode on Mozilla browser

For Mozilla I use JS to detected high contrast mode or media query

function HCTest(idval) {
    var objDiv, objImage, strColor, strWidth, strReady;
    var strImageID = idval; // ID of image on the page

    // Create a test div
    objDiv = document.createElement('div');

    //Set its color style to something unusual
    objDiv.style.color = 'rgb(31, 41, 59)';

    // Attach to body so we can inspect it
    document.body.appendChild(objDiv);

    // Read computed color value
    strColor = document.defaultView ? document.defaultView.getComputedStyle(objDiv, null).color : objDiv.currentStyle.color;
    strColor = strColor.replace(/ /g, '');

    // Delete the test DIV
    document.body.removeChild(objDiv);

    // Check if we get the color back that we set. If not, we're in 
    // high contrast mode. 
    if (strColor !== 'rgb(31,41,59)') {
        return true;
    } else {
        return false;
    }
}
jQuery(function () {
    var HCM = HCTest();
    if (HCM === true) {
        jQuery('Body').addClass("moz-contrast");
    } else {
        jQuery('Body').removeClass('moz-contrast');
    }
});

CSS
For mozila

@-moz-document url-prefix() {

.moz-contrast{
   /**styling**/
}

}

---

Related Topics