How to Change Text Color Based on Background Color Using CSS

Invert CSS font-color depending on background-color

There is a CSS property called mix-blend-mode, but it's not supported by IE. I recommend using pseudo elements. If you like to support IE6 and IE7 you can also use two DIVs instead of pseudo elements.

.inverted-bar {    position: relative;}
.inverted-bar:before,.inverted-bar:after {    padding: 10px 0;    text-indent: 10px;    position: absolute;    white-space: nowrap;    overflow: hidden;    content: attr(data-content);}
.inverted-bar:before {    background-color: aqua;    color: red;    width: 100%;}
.inverted-bar:after {    background-color: red;    color: aqua;    width: 20%;}

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

CSS Custom text color based on background

You can try using inverted colors and re-inverting the whole thing with a CSS filter like so:

body {
  margin: 0;
}

#sf-coming-up {
  filter: invert(1);
  height: 100vh;
}

.blob {
  position: absolute;
  top: 15%;
  right: 15%;
  z-index: -1;
  width: 70%;
  height: 70%;
  border-radius: 25% 75% 25% 50% / 75% 25% 50% 25%;
  background: springgreen;
}

.title {
  padding: 25vh 0 0 12.5vh;
  color: springgreen;
  mix-blend-mode: difference;
}

<div id="sf-coming-up">
  <div class="title">Binnenkort in ons theater</div>
  <div class="blob"></div>
</div>

invert text color based on background in css

You could also apply this styling to the element you'd like to invert the colors of:

filter: invert(1);
mix-blend-mode: difference;

It especially works if you need to base the difference on a child or a element further away, not a parent or a close element.

I used it with a custom cursor (the black circle), which made it contrast nicely with the elements behind. Sample pen here: https://codepen.io/m3t4lch7/pen/VwwOKNd

CSS - Change text color depending on background

You can use mix-blend-mode:difference

body,html {  padding: 0;  margin: 0;}
.header {  position: fixed;  width: 100%;  height: 50px;  margin: 20px;  color:#fff;  mix-blend-mode: difference;}
.section1,.section2,.section3{  background: black;  height: 100vh;  display: flex;  align-items: center;  justify-content: center;  color: white;}
.section2 {  background: white;  color:#000;}

<div class="header">  Header Content</div><div class="wrapper">  <div class="section1">    Section One Content  </div>  <div class="section2">    Section Two Content  </div>  <div class="section3">    Section Three Content  </div></div>

Change font color based on background image

I felt I should post an answer to explain what is going on with OPs example.

Simply settings a fill: white on an SVG does not fully reproduce the desired result. OP's example also requires a parent div with mix-blend-mode: difference set as well.

You can actually reproduce this without any SVGs at all. You simply need an element with a color/fill of white, and a parent element with mix-blend-mode: difference. This has to do with how the blending mode of difference works with the color white over a background.

function _Swap() {
  document.querySelector(".backgroundDiv").style.background = (document.querySelector(".backgroundDiv").style.background == "rgb(0, 0, 0)") ? "rgb(255, 255, 255)" : "rgb(0, 0, 0)";
}

.backgroundDiv {
  background: #FFF;
  padding: 4em;
}

.test {
  mix-blend-mode: difference;
}

p {
  color: #FFF;
}

<div class="backgroundDiv">
  <div class="test">
    <p>This is a test</p>
  </div>
</div>
<input type="button" value="Swap Background Color" onclick="_Swap()">

Change text color based on its background

You could do something like this:

<style>
.container {
    display:block;
    position:relative;
    width:150px;
    height:50px;
    text-align: center;
}
.black-half div {
    background: #000;
    color: #fff;
}
.white-half div {
    background: #fff;
    color: #000;
    width:150px;
}
.white-half {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
}
.black-half {
    height: 100%;
    position: absolute;
}
</style>

<div class="container">
  <div class="black-half">
      <div>Split background and text color</div>
  </div>
  <div class="white-half">
      <div>Split background and text color</div>
  </div>
</div>

How to change font color based on background image with javascript?

Explanation

---

Here is an example showing how to get the average using a canvas rendered to a 1x1-px scale. From there we set the header background and then apply a light or dark class based on the luminance of the aforementioned average.

Notes

---

Note 1:
There is some extra code to allow for easier visualization, this is commented and can be removed.

Note 2: The below code is not guaranteed to run on all browsers. Please see this thread for more specifics.

Note 3: This code only works with local images and CORS-enabled image URLs due to it's reliance on canvas.drawImage. Please see this for more information.

Example 1:

this example shows the functionality. It uses two image URLs in the JS to toggle between.

/* 
     
     THE TOGGLE ACTION
     
     */

/* The urls for toggling between */
const urlLight = 'https://images.unsplash.com/photo-1484503793037-5c9644d6a80a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=930&q=80';
const urlDark = 'https://images.unsplash.com/photo-1517999144091-3d9dca6d1e43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80';
let currentUrl = urlLight;

const toggle = document.getElementById('toggle');

toggle.addEventListener("click", function() {
  if (currentUrl === urlLight) {
    currentUrl = urlDark;
  } else {
    currentUrl = urlLight;
  }

  getImageBrightness(currentUrl, function(brightness) {

    const header = document.getElementById("header");
    header.style.backgroundImage = `url(${currentUrl}`;

    header.classList.remove("dark");
    header.classList.remove("light");

    console.log(brightness);

    if (brightness > 225 / 2) {
      header.classList.toggle("dark");

    } else {
      header.classList.toggle("light");
    }
  });

});

/* 

Important get brightness code

*/

function getImageBrightness(imageSrc, callback) {
  var img = document.createElement("img");
  img.src = imageSrc;
  img.style.display = "none";
  img.crossOrigin = "anonymous";
  document.body.appendChild(img);

  var colorSum = 0;

  img.onload = function() {
    // create canvas
    var canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);

    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    var r, g, b, avg;

    for (var x = 0, len = data.length; x < len; x += 4) {
      r = data[x];
      g = data[x + 1];
      b = data[x + 2];

      avg = Math.floor((r + g + b) / 3);
      colorSum += avg;
    }

    var brightness = Math.floor(colorSum / (this.width * this.height));
    callback(brightness);
  }
}

getImageBrightness(currentUrl, function(brightness) {

  const header = document.getElementById("header");
  header.style.backgroundImage = `url(${currentUrl}`;

  header.classList.remove("dark");
  header.classList.remove("light");

  if (brightness > 225 / 2) {
    header.classList.toggle("dark");

  } else {
    header.classList.toggle("light");
  }
});

.dark {
  color: black;
}

.light {
  color: white;
}

* {
  text-align: center;
}

#header {
  padding: 2rem 0;
  font-size: 4rem;
  background-size: cover;
  margin-bottom: 1rem;
  background-position: center center;
}

<div id="header">
  Header
</div>

<button id='toggle'>
Toggle Background
</button>

---

Related Topics