JavaScript Text Color Based on Background

This JavaScript code snippet helps to change text color based on the background color. It comes with a color switcher input and a resultant color output element. It also defines a function to convert hexadecimal color codes to RGB values, and another function to set the contrast color of an element based on a given color.

The setContrastColor function calculates the brightness of a color and sets the contrast color of the target element to either black or white based on the brightness value.

Overall, this code allows users to select a color and see its corresponding contrast color in real-time.

How to change Text Color Based on Background

Create the HTML structure as follows:

<div class="box">
    <h1>Press the button below to change the color</h1>
    <p>
        The text color will change automatically according to the background color brightness...
    </p>
</div>

<h4 id="resultant-color"></h4>

<button class="color-switcher" title="Change the color...">
    <input type="color" />
</button>

Style using the following CSS styles:

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
:root {
  --primaryColor: #222;
  --primaryContrastColor: #fff;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 540px) {
  body {
    padding: 25px;
  }
}

.box {
  max-width: 500px;
  padding: 15px;
  text-align: center;
  background-color: var(--primaryColor);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15) inset;
  border-radius: 5px;
  color: var(--primaryContrastColor);
  transition: color ease 250ms;
}
.box h1 {
  font-size: 1.25rem;
  margin-bottom: 5px;
}
.cd__main{
display: block !important;
}

#resultant-color {
  margin: 15px auto;
  font-size: 15px;
  text-transform: uppercase;
}

.color-switcher {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15) inset;
  background-color: var(--primaryColor);
  animation: pulse ease-out infinite 1s;
}
.color-switcher:hover {
  animation: none;
}
.color-switcher input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

@keyframes pulse {
  from, to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

Finally, add the following JavaScript function:

const colorSwitcher = document.querySelector(".color-switcher input");
const resultantColor = document.querySelector("#resultant-color");

function hexToRgb(hex) {
  const shortHexRegExp = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shortHexRegExp, (_, r, g, b) => r + r + g + g + b + b);
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  if (!result) throw Error('A valid HEX must be provided');

    return {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    };
}

function setContrastColor(color, target = document.documentElement) {
    const { r, g, b } = hexToRgb(color);
    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
    // https://en.wikipedia.org/wiki/YIQ

    let contrastColor;

    if (yiq >= 128) {
        contrastColor = "#000";
    } else {
        contrastColor = "#fff";
    }

    target.style.setProperty("--primaryColor", color);
    target.style.setProperty(
        "--primaryContrastColor",
        contrastColor
    );
}

colorSwitcher.addEventListener("input", ({ target }) => {
    setContrastColor(target.value);
    resultantColor.innerHTML = `<h1>${target.value}</h1>`;
});

That’s all! hopefully, you have successfully integrated this JavaScript code to changes text color based on background. If you have any questions or suggestions, feel free to comment below.