Change text color based on the background color

Question

Is it possible to dynamically change the text color based on the background color using CSS, or JS if it's not possible with CSS? I have a image that comes under the text. My text color is white, but the image has a white shape on. And when text goes above the white shape, I need to change the text color in a darker color.

HTML:

<div class="biography">
            <img src="http://s16.postimg.org/c09zw94jp/author_photo.png" alt="author" class="bio-img">
            <div class="biography-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>
                    Vestibulum pellentesque auctor quam a sollicitudin.<br>
                    Pellentesque accumsan a sem eget dictum.
                </p>
                <p>
                    Morbi dictum lorem tortor, id consequat libero gravida ut.<br>
Nullam dictum sed massa et bibendum.
                </p>
                <p>Praesent sed dui mattis, dictum urna sit amet, imperdiet purus.</p>
                <p> Suspendisse potenti.</p>
            </div>
        </div>

CSS:

body {
  background-color: #7ccbe6;
}
.biography {
    min-height: 410px;
}
.biography .biography-text {
    position: relative;
    margin-top: -420px;
    padding: 82px 130px 0 380px;
    z-index: 1;
}

.biography-text {
    color: #fff;
}

Here's a Codepen to see the better picture.

Related -http://stackoverflow.com/questions/35443187/how-do-i-determine-background-color-of-visible-underlying-element/35444374#35444374 — Paulie_D, Feb 20 '16 at 12:49

score 6 · Answer 1 · edited May 23 '17 at 12:18

6

Probably you need this:

Change text color based on brightness of the covered background area?

var rgb = [255, 0, 0];

setInterval(function() {
  var c = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  var o = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) / 1000);
  (o > 125) ? $('#bg').css('color', 'black'): $('#bg').css('color', 'white'); //http://www.w3.org/TR/AERT#color-contrast
  $('#bg').css('background-color', c);
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);
}, 1000);

JSFiddle

Updated:

Use this example on JSFiddle, just change background color

edited May 23 '17 at 12:18

Community

1
1

answered Feb 20 '16 at 12:29

Pedram

15,766
10
44
73

I do not see a way how I can implement this in my example? Can you help out if you see this as a solution? – Vadim Badea Feb 20 '16 at 12:54
It's not working for me, can you try it on my example? [Link here](http://codepen.io/anon/pen/obRKEy) – Vadim Badea Feb 20 '16 at 14:54

score 6 · Answer 2 · answered May 23 '17 at 03:19

6

I do realize you are looking for a JS solution. However, if anyone wants a css solution here is a solution http://codepen.io/hellouniverse/pen/JNwvyL

$bg-color: black;  // This can change
$white : #fff;
$black : #000;

@function set-text-color($color) {
    @if (lightness( $color ) > 50) {
      @return $black; // Lighter color, return black
    }
    @else {
      @return $white; // Darker color, return white
    }
}

.text--color {
    background: $bg-color;
    color: set-text-color($bg-color);
}

// this is here just for demon purpose
.text {
    padding: 10px;
    text-align: center;
}


<p class="text text--color">I change in color</p>

answered May 23 '17 at 03:19

True. I did not notice you want css solution. – Aug 22 '17 at 05:40
@Petroff In css editor (on CodePen) you can see compiled css easily, just click on arrow button (_top right corner of css editor_) and click on `View Compiled CSS`. – Mehdi Dehghani Nov 26 '18 at 13:21
2

That's compiled to that specific color, it didn't work as a "change text color based on the background color" – Alynva Mar 28 '21 at 03:45

score 4 · Answer 3 · answered May 23 '17 at 03:56

For this kind of problem I'd use a pure CSS solution to outline the text...

.biography-text {
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #333,
        -1px -1px 0 #333,
        1px -1px 0 #333,
        -1px 1px 0 #333,
        2px 2px 5px rgba(0,0,0,0.65);
}

Change the letter-spacing and the final directive of the text-shadow property according to your needs.

score 1 · Answer 4 · answered Feb 20 '16 at 12:41

There are some ways to achieve this. You could render the image on a (hidden) canvas and parse the image colors to know which color the text should be. You could also do the same with php and pre process the image color information.

I also found this JavaScript library that could help you: http://www.kennethcachia.com/background-check/. (You could wrap each letter in a span element to determine the right color to use per letter.)

Change text color based on the background color

4 Answers4