JSFiddle - React, Tailwind, and code Playground

HTML

<div id="colors"></div>

JavaScript

// convert HEX code to RGB
function hexToRgb(hex) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
// compare colors
function luminanace(r, g, b) {
    var colorArray = [r, g, b];
    var colorFactor;
    var i;
    for (i = 0; i < colorArray.length; i++) {
        colorFactor = colorArray[i] / 255;
        if (colorFactor <= 0.03928) {
            colorFactor = colorFactor / 12.92;
        } else {
            colorFactor = Math.pow(((colorFactor + 0.055) / 1.055), 2.4);
        }
        colorArray[i] = colorFactor;
    }
    return (colorArray[0] * 0.2126 + colorArray[1] * 0.7152 + colorArray[2] * 0.0722) + 0.05;
}
function contrast(hex1, hex2) {
    var color1 = hexToRgb(hex1);
    var color2 = hexToRgb(hex2);
    if (color1 != null && color2 != null) {
        var result = (luminanace(color1.r, color1.g, color1.b)) / (luminanace(color2.r, color2.g, color2.b)); if (result < 1) result = 1 / result;

        // show result
        // Google says lowest:4.5 | enough:7 | good:14 | best:21
        var rgood = 7;
        var rbad = 4.5;
        contrastratio = result;
        switch (true) {
            case result >= rgood:
                contrastratiomessage = '<span class="cr-green">Text is well readable</span>';
                break;
            case result > rbad && result < rgood:
                contrastratiomessage = '<span class="cr-orange">Text is enough readable</span>';
                break;
            case result <= rbad:
                contrastratiomessage = '<span class="cr-red">Text is not readable!!!</span>';
                break;
            default:
        }
       ...