JSFiddle - React, Tailwind, and code Playground

HTML

<p>FOO</p>
<div id="message"></div>

CSS

/**
*
* Props to Hans Hillen for original code that I just
* Basically made a fiddle for.
*
* To see how this works, turn on High Contrast Mode in Windows
* Then come to this page. Below it would say "FOO" and "TRUE"
*/

JavaScript

// Determines if document is in High Contrast Mode or not
// Returns boolean - true if high contrast, false otherwise
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;
    }
}

$(function () {
    var HCM = HCTest();
    if (HCM === true) {
        $('#message').text('TRUE');
    } else {
        $('#message').text('FALSE');
    }
});