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">');
}
}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);