How to set text colour based on background colour?

Question

I need to change the text colour based on the background colour. I can use mix-blend-mode: difference and filter: invert(1) to kind of achieve what I need but the colour isn't quite correct.

For example, on this JSFiddle: https://jsfiddle.net/47bLtjum/ you can see the 'Menu' text is orange on the off-white background but needs to be white on the orange background. Is there a way I can specify the colour it needs to be? I basically need it Orange on light backgrounds and white on the orange background

Thanks :)

you may also take a try to ` -webkit-text-stroke: 1px #fff8; font-wheight: bold;` or `text-shadow:1px 1px white;` If that can make enough contrast around the letters. — G-Cyrillus, Apr 30 '23 at 10:55
Thanks for the suggestion but that hasn't seemed to have helped :( — nvaughan84, May 02 '23 at 09:52

Brett Donald · Answer 1 · 2023-05-04T03:24:54.720

I found this code on the web. Essentially you start with black and white. Your background can be any pattern of black and white, then your foreground (text) is styled with color: white; mix-blend-mode: difference. Then over both entire thing you position an overlay with a background color of your choice, styled with mix-blend-mode: screen.

    div {
        position:absolute;
        height:200px
    }

    #whitebg { 
        background: white; 
        width:400px; 
        z-index:1;

    }

    #blackbg { 
        background: black; 
        width:100px; 
        z-index:2;
    }
    span {
        position:absolute; 
        font-family: Arial, Helvetica; 
        font-size: 100px; 
        mix-blend-mode: difference;
        color: white;
        z-index: 3;
    }
    #makered { 
        background-color: red;
        mix-blend-mode: screen;
        width:400px; 
        z-index:4;
    }

<div id="whitebg"></div>
<div id="blackbg"></div>
<div id="makered"></div>
<span>test</span>

You could apply it to your design as per the snippet below. But the overlay technique will mean you can only really use it in areas where you just want white plus a single color of your choice.

body {
  margin: 1em;
}
.wrapper {
  position: relative;
}
.section-1,.section-2 {
  height: 30vh;
  background: white;
}
.section-2 {
  background: black;
}
.menu {
  color: white;
  position: fixed;
  mix-blend-mode: difference;
  font-size: 2em;
}
.wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f95b03;
  mix-blend-mode: screen;
}

<div class="wrapper">
  <div class="menu">MENU</div>
  <div class="section-1"></div>
  <div class="section-2"></div>
  <div class="section-1"></div>
  <div class="section-2"></div>
  <div class="section-1"></div>
  <div class="section-2"></div>
  <div class="section-1"></div>
  <div class="section-2"></div>
</div>

Thanks Brett, that's absolutely perfect and looks like just what I need. I'll take a look at implementing that today but it looks like it will do just what I need :) — nvaughan84, May 06 '23 at 08:23

How to set text colour based on background colour?

1 Answers1