JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

<script>
window.module = {};
</script>
<script src="https://unpkg.com/[email protected]/src/color-contrast-checker.js"></script>

<div class="grid">
  <div class="box grey">grey</div>
  <div class="box blue">blue</div>
  <div class="box green">green</div>
  <div class="box orange">orange</div>
  <div class="box pink">pink</div>
  <div class="box purple">purple</div>
  <div class="box red">red</div>
  <div class="box turquoise">turquoise</div>
  <div class="box yellow">yellow</div>
</div>

CSS

html, body {
  min-height: 100%;
}

body {
  --background-color: #fff;
  /* --background-color: #233c78; */
  
  --cara-grey: #757575;
  --cara-blue: #347ad1;
  --cara-green: #55951b;
  --cara-orange: #e58c00;
  --cara-pink: #d52860;
  --cara-purple: #97459a;
  --cara-red: #d54317;
  --cara-turquoise: #22c3af;
  --cara-yellow: #e3c600;
}

.grid {
  background: var(--background-color);
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px;
  height: 100vh;
  grid-template-columns: repeat(3, 120px);
}

.box {
  padding: 40px 0;
  border: 2px solid gray;
  text-align: center;
  text-transform: capitalize;
}

.grey {
  color: var(--cara-grey);
}

.blue {
  color: var(--cara-blue);
}

.green {
  color: var(--cara-green);
}

.orange {
  color: var(--cara-orange);
}

.pink {
  color: var(--cara-pink);
}

.purple {
  color: var(--cara-purple);
}

.red {
  color: var(--cara-red);
}

.turquoise {
  color: var(--cara-turquoise);
}

.yellow {
  color: var(--cara-yellow);
}

JavaScript

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`


document.addEventListener("DOMContentLoaded", () => {
  const bodyStyle = getComputedStyle(document.body);
  const bgColor = bodyStyle.getPropertyValue('--background-color');
  const ccc = new ColorContrastChecker();

  document.querySelectorAll('.box').forEach((boxEl) => {
    const boxElColor = rgb2hex(getComputedStyle(boxEl).getPropertyValue('color'));
    const ratio = ccc.getContrastRatio(
      ccc.hexToLuminance(boxElColor),
      ccc.hexToLuminance(bgColor)
    );
    const isAccesible = ccc.isLevelAA(boxElColor, bgColor);

    boxEl.innerHTML += `<br>${ratio.toFixed(2)}`;
    boxEl.innerHTML += ` ${isAccesible ? '✅' : '❌'}`;
  });
});