CascadiaJS CascadiaJS - 11 months ago 135
CSS Question

Detect High Contrast Mode 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 and then if the browser is in high-contrast mode then 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 for to check if Chrome is using high-contrast mode. If there was 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)');

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


If you want to see more of the code, please let me know, I'm just not sure what else would be helpful to show.

Thanks if advance for all the help!


The Chrome Extension will inject some code to generate a highcontrast LAF.

The timeout is required duo to the injection.

This worked for me:

   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);