<div class="wrapper">
  <div class="element">
    <h2>Enforcing High Contrast Colors</h2>
  </div>
</div>
<div class="form">
  <div class="control">
    <label for="r">R:</label>
    <input type="range" min="0" max="255" name="color" step="1" id="r" value="255" />
  </div>
  <div class="control">
    <label for="g">G:</label>
    <input type="range" min="0" max="255" name="color" step="1" id="g" value="0" />
  </div>
  <div class="control">
    <label for="b">B:</label>
    <input type="range" min="0" max="255" name="color" step="1" id="b" value="0" />
  </div>
</div>

<div class="tutorials">
  <a href="https://s.juejin.cn/ds/idkVFyE1/" target="_blank">
    <svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200">
      <path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path>
    </svg>
  </a>

</div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --r: 255;
  --g: 0;
  --b: 0;
  --color: #fff;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  color: #fff;
  font-size: 130%;
  letter-spacing: 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.element {
  padding: 10vmin 20vmin;
  display: flex;
  justify-content: center;
  background-image: radial-gradient(circle at center, rgb(var(--r) var(--g) var(--b)), #291642),
    linear-gradient(to bottom, #291642, #291642);
  background-repeat: no-repeat;
  background-position: center;
  background-clip: padding-box;
  border-radius: 8px;
  background-blend-mode: multiply, screen;
  margin-bottom: 10px;
}

h2 {
  border-radius: 2vmin;
  padding: 5vmin;
  white-space: nowrap;
  background-color: rgb(var(--r) var(--g) var(--b));
  color: var(--color);
}

.form {
  display: flex;
  align-items: center;
}

.control {
  margin: 4vmin;
  display: flex;
  align-items: center;
  font-size: 3rem;
}


.tutorials {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3f517e;
    padding: .5rem;
    display: grid;
    place-content: center;
    transition: all .28s linear;
    
    &:hover {
      background:#4161b2;
    }
    
    & svg {
      display: block;
      width: 100%;
      height: 100%;
      filter: invert(1);
    }
  }

const inputs = document.querySelectorAll("input");
const element = document.querySelector("h2");

const color = [...inputs].map((input, index) => {
  input.addEventListener("change", function (e) {
    handleUpdate(e, index);
  });
  return input.value;
});

function handleUpdate(e, index) {
  color[index] = e.target.value;

  document.documentElement.style.setProperty(
    `--${e.target.id}`,
    `${e.target.value}`
  );

  element.style.setProperty("--color", setForegroundColor(color));
}

function setForegroundColor(color) {
  const sum = Math.round(
    (parseInt(color[0]) * 299 +
      parseInt(color[1]) * 587 +
      parseInt(color[2]) * 114) /
      1000
  );
  return sum > 128 ? "black" : "white";
}