Is it possible to make a Javascript program that changes the color of the text to the contrast of the background automatically?

user_13944038 0
Viewed 503

I have this Javascript and HTML code which changes the color of the background using an input with the type of color.

Here is the code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      outline: none;
      border: none;
      background: none;
    }
  </style>
</head>

<body>

  Change the color of the background:
  <input type="color" value="#000000" name="bgcolor" id="bgcolor" />

  <script>
    const color = document.getElementById("bgcolor");

    color.addEventListener("change", () => {    
      document.body.style.background = color.value;
    });
  </script>
</body>

</html>

So this changes the color of the page's background as the user changes the color in the color palette created by the <input type="color" value="#000000" name="bgcolor" id="bgcolor" /> .

Now imagine a situation in which the user selects black as the background and the text's color is by default also black now there are two things that we can do either,

Give an option to change the text's color him/herself or change the text's color to its background's contrast automatically.

I want to go for the second option since it is kinda fancier and looks a bit more advanced to the user like an extra advanced thing to impress the users.

So how do I implement the second option can someone explain it to me that how to change the color of the text to the complete contrast of the background automatically as the user sets the background.

dom-events colors html javascript
1 Answers

Interesting resources for this:

Here's the W3C algorithm (with JSFiddle demo too):

const rgb = [255, 0, 0];

// Randomly change to showcase updates
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update colours
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // http://www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}
#bg {
  width: 200px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bg">Text Example</div>

user_74826460
Related