How to change text color depending on background color using JavaScript?

The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript.

Approach:

  • First select the random Background color(by selecting random RGB values) or a specific one.
  • Use the YIQ formula to get the YIQ value.
  • Depending on the YIQ value select the effective foreground color.

Example 1: This example using the approach discussed above.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to change text color depending 
      on background color using JavaScript?
    </title>
    <script src=
    </script>
    <style>
        #backG {
            width: 200px;
            height: 50px;
            color: white;
            background: green;
            margin: 0 auto;
        }
    </style>
</head>
  
<body id="body" align="center">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px;
              font-weight: bold;">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <br>
    <br>
    <div id="backG">This is GeeksForGeeks.</div>
    <script>
        var el_up = document.getElementById('GFG_UP');
        var rgbValue = [255, 0, 0];
        el_up.innerHTML = 
          "Click on the button to select effective pattern.";
  
        function setColor() {
            rgbValue[0] = Math.round(Math.random() * 255);
            rgbValue[1] = Math.round(Math.random() * 255);
            rgbValue[2] = Math.round(Math.random() * 255);
            var color = Math.round(((parseInt(rgbValue[0]) * 299) +
                (parseInt(rgbValue[1]) * 587) +
                (parseInt(rgbValue[2]) * 114)) / 1000);
            var textColor = (color > 125) ? 'black' : 'white';
            var backColor = 
                'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', '
             + rgbValue[2] + ')';
              
            $('#backG').css('color', textColor);
            $('#backG').css('background-color', backColor);
        }
  
        function GFG_Fun() {
            setColor();
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example using the approach discussed above but not using only black and white color for the foreground.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to change text color depending
      on background color using JavaScript?
    </title>
    <script src=
    </script>
    <style>
        #backG {
            width: 200px;
            height: 50px;
            color: white;
            background: green;
            margin: 0 auto;
        }
    </style>
</head>
  
<body id="body" align="center">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; font-weight: bold;">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <br>
    <br>
    <div id="backG">This is GeeksForGeeks.</div>
    <script>
        var el_up = document.getElementById('GFG_UP');
        var rgbValue = [255, 0, 0];
        el_up.innerHTML = 
          "Click on the button to select effective pattern.";
  
        function getforeGColor(rgb) {
            var cols = rgb.match(/^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/);
            var b = 1;
            var rValue = cols[1];
            var gValue = cols[2];
            var bValue = cols[3];
            var rV = Math.floor((255 - rValue) * b);
            var gV = Math.floor((255 - gValue) * b);
            var bV = Math.floor((255 - bValue) * b);
            return 'rgb(' + rV + ', ' + gV + ', ' + bV + ')';
        }
  
        function setColor() {
            rgbValue[0] = Math.round(Math.random() * 255);
            rgbValue[1] = Math.round(Math.random() * 255);
            rgbValue[2] = Math.round(Math.random() * 255);
            var color = Math.round(((parseInt(rgbValue[0]) * 299) +
                (parseInt(rgbValue[1]) * 587) +
                (parseInt(rgbValue[2]) * 114)) / 1000);
            var backColor = 
                'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', '
             + rgbValue[2] + ')';
              
            var textColor = getforeGColor(backColor);
            $('#backG').css('color', textColor);
            $('#backG').css('background-color', backColor);
        }
  
        function GFG_Fun() {
            setColor();
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.