Change Text Color Based on Brightness of the Covered Background Area

const rgb = [255, 0, 0];
// Randomly change to showcase updatessetInterval(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>

change text color depending on background image / color

<div id="home_wrapper">
    <div id="home_top_t_wrap"> <!-- DARK BACKGROUND -->
        <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK -->    </div>
    <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div>
 </div>

    <script>

    $(document).ready(function() {
        $("#home_top_t_wrap").hover(function() {
            $("body").css("background-color","light"); //change light to your color
        });
    $("#the_market_container").hover(function() {
            $("body").css("background-color","dark"); //change dark to your color
        });

    });
    </script>

I tried on div hover. Hope this helps

How to automatically change text color base on background color in Angularjs?

Finally, i found for my own solution. I have a function which will convert the hex string to rgb then i use some logic to handle the font color. Here is some code.

$scope.setColor = function (color) {
    var rbg = hex2rgb(color);
    var o = Math.round(((parseInt(rbg[0]) * 299) +
            (parseInt(rbg[1]) * 587) +
            (parseInt(rbg[2]) * 114)) / 1000);
    var force = (o > 200) ? '#888' : 'white';
    return {background: color, color: force};
};
function hex2rgb( colour ) {
    var r,g,b;
    if ( colour.charAt(0) === '#' ) {
        colour = colour.substr(1);
    }
    if ( colour.length === 3 ) {
        colour = colour.substr(0,1) + colour.substr(0,1) + colour.substr(1,2) + colour.substr(1,2) + colour.substr(2,3) + colour.substr(2,3);
    }
    r = colour.charAt(0) + '' + colour.charAt(1);
    g = colour.charAt(2) + '' + colour.charAt(3);
    b = colour.charAt(4) + '' + colour.charAt(5);
    r = parseInt( r,16 );
    g = parseInt( g,16 );
    b = parseInt( b ,16);
    return [r, g, b];
}

Reference source:

1. https://stackoverflow.com/a/12944084/11580916

2. https://stackoverflow.com/a/11868159/11580916

Dynamically change color based on brightness of background color

You can retrieve the alpha value for your color with

myColor.colors.alpha

So you can use a check similar to:

span.style.color = myColor.colors.RGBLuminance > 0.22 || myColor.colors.alpha < 0.5 ? 'black' : 'white';

You'll likely have to play around with the conditions (or add more cases) to get the behavior you want.

jQuery: Change text color based on containing element's background color?

First, create a function that determines whether a color is dark or not (source, modified):

function isDark( color ) {
    var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
    return parseFloat(match[1])
         + parseFloat(match[2])
         + parseFloat(match[3])
           < 3 * 256 / 2; // r+g+b should be less than half of max (3 * 256)
}

Then, use something along the lines of:

$('elem').each(function() {
    $(this).css("color", isDark($(this).css("background-color")) ? 'white' : 'black');
});

http://jsfiddle.net/QkSva/

Dynamically change font color based on contrast

There's no mechanism I can think of that would let you achieve such a thing. The normal solution is to use text-halo-color to set an outline colour, so the label's colour is readable against any background.

Make background-color darker dynamically without making text color darker

After trying different methods I came up with this solution using box-shadow.

box-shadow: -200px -200px 0px 200px rgb(0 0 0 / 10%) inset
/* This is an inset `box-shadow` and will not affect the color of the text. */

Cross platform solution:

box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;
-webkit-box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;
-moz-box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;

---

Related Topics