<h1>This is a sample text</h1>
<button>Generate random background color</button>
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

button {
  font-size: 16px;
  font-weight: 500;
  background: white;
  border-radius: 3px;
  border: none;
  padding: 5px 10px;
}
View Compiled
function generateRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return `#${color}`;
}

function getRGB(c) {
  return parseInt(c, 16) || c;
}

function getsRGB(c) {
  return getRGB(c) / 255 <= 0.03928
    ? getRGB(c) / 255 / 12.92
    : Math.pow((getRGB(c) / 255 + 0.055) / 1.055, 2.4);
}

function getLuminance(hexColor) {
  return (
    0.2126 * getsRGB(hexColor.substr(1, 2)) +
    0.7152 * getsRGB(hexColor.substr(3, 2)) +
    0.0722 * getsRGB(hexColor.substr(-2))
  );
}

function getContrast(f, b) {
  const L1 = getLuminance(f);
  const L2 = getLuminance(b);
  return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
}

function getTextColor(bgColor) {
  const whiteContrast = getContrast(bgColor, "#ffffff");
  const blackContrast = getContrast(bgColor, "#000000");

  return whiteContrast > blackContrast ? "#ffffff" : "#000000";
}

function roll() {
  const bgColor = generateRandomColor();

  const button = document.querySelector("button");

  const textColor = getTextColor(bgColor);


  document.body.style.backgroundColor = bgColor;
  button.style.backgroundColor = textColor;
  button.style.color = bgColor;
  document.body.style.color = textColor;
}

document.querySelector("button").addEventListener("click", roll);

roll();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.