Change text colour based on background

Question

I have a CTA that slides out when you hover over it. The problem I have is that the text is sometimes hard to read depending on the background colour. I've created a demo of what I'm trying to achieve, you can check it out here:

Demo on CodePen

The essence of this demo is: HTML:

<div class="at-about-fab">
  <div class="at-about-fab__thumbnail">
    <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
  </div>
  <div class="at-about-fab__meta">
    <h2>Call Us Now</h2>
    <p><a href="te:555-555-5555">555 555 5555</a></p>
  </div>
</div>

The CSS looks like this:

.at-about-fab {
  z-index: 999999;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      color: #CCCCCC;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

Any suggestions on how to get this right? I've looked at a few JavaScript-based examples but my JavaScript skills aren't there yet...

Many thanks

In these kind of situations I put little contrasting shadow on the text. Try it once. — void, Feb 23 '18 at 08:46
Dark text on a dark background doesn't really work that well, so a text shadow won't fix this. I think OP wants a dynamic button background, based on the section background colour. — Levano, Feb 23 '18 at 08:49
You need to detect the background-color, here is a thread which might help you with a working fiddle (jQuery though): https://stackoverflow.com/questions/4259815/how-do-i-detect-the-inherited-background-color-of-an-element-using-jquery-js — t3__rry, Feb 23 '18 at 08:55

score 0 · Answer 1 · edited Feb 23 '18 at 09:13

It is not advisable to share offsite links that might be erased however this is a good start. 7 Practical Tips for Cheating at Design

Summary has been done in the comments to the CSS.

.at-about-fab {
  z-index: 999999;
  position: fixed;
  /*Dropped the right to hide the text block a little more - you can ignore*/
  right: 0px;
  bottom: 20px;
  /*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
  background-color: white;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      /*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
      color: #999;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

/* Just for the sake of testing */
.content{
    position:relative;
}


#wrapper
{
    position:relative;
}

.section
{
    width: 100%;
    text-align:center;
    padding:250px 0;
    border:1px solid #666;
}

#section1
{
    background: #fff;
}

#section2
{
    background: #000;
    color:#fff;
}

#section3
{
    background: #444444;
}

#section4
{
    background: #BA2322;
}

Codepen Demo

score 0 · Answer 2 · answered Feb 23 '18 at 09:23

You could use mix-blend-mode: exclusion; with the help from data attribute and ::after selector:

.at-about-fab {
  z-index: 999999;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.at-about-fab:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: -58px;
  width: 58px;
  height: 48px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.at-about-fab:hover {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.at-about-fab:hover .at-about-fab__meta {
  opacity: 1;
}
.at-about-fab__thumbnail {
  position: absolute;
  top: 50%;
  left: -58px;
  background: #FFFFFF;
  width: 48px;
  height: 48px;
  border: 1px solid #EEEEEE;
  border-radius: 100%;
  padding: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  overflow: hidden;
  cursor: pointer;
}
.at-about-fab__thumbnail img {
  display: block;
  width: 100%;
  border-radius: 100%;
}
.at-about-fab__meta {
  font-family: 'Open Sans', sans-serif;
  opacity: 0;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
  margin: 0;
  padding: 0;
}
.at-about-fab__meta h2 {
  color: #444444;
  font-size: 14px;
  font-weight: 600;
}
.at-about-fab__meta p {
  color: #CCCCCC;
  font-size: 12px;
  font-weight: 400;
}
.at-about-fab__meta a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

/* Just for the sake of testing */
.content {
  position: relative;
}

#wrapper {
  position: relative;
}

.section {
  width: 100%;
  text-align: center;
  padding: 250px 0;
  border: 1px solid #666;
  position: relative;
  color: black;
}
.section:after {
  content: attr(data-content);
  position: absolute;
  width: 100%;
  height: auto;
  text-align: center;
  top: 50%;
  left: 0;
  mix-blend-mode: exclusion;
  color: white;
}

#section1 {
  background: #fff;
}

#section2 {
  background: #000;
}

#section3 {
  background: #444444;
}

#section4 {
  background: #BA2322;
}

<!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-about-fab">
  <div class="at-about-fab__thumbnail">
    <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
  </div>
  <div class="at-about-fab__meta">
    <h2>Call Us Now</h2>
    <p><a href="te:555-555-5555">555 555 5555</a></p>
  </div>
</div>

<!-- Just for the sake of testing -->
<div class="content">
  <div id="wrapper">
      <div class="section" id="section1" data-content="section1"></div>
      <div class="section" id="section2" data-content="section2"></div>
      <div class="section" id="section3" data-content="section3"></div>
      <div class="section" id="section4" data-content="section4"></div>
  </div>
</div>

Here is also a link to the updated codepen with SCSS.

call us now is not visible when in section 3 – jasinth premkumar Feb 23 '18 at 09:25 — jasinth premkumar, Feb 23 '18 at 09:25

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

You can try something like this:

Idea

Add mouseover event on main container.
In this handler, have a variable that will hold classname that is to be added.
On hover:
- Get all sections.
- Check the bounds of current section with icon's bound.
- If top of icon is greater than top of section, update the className variable
- If not, break the loop.
- Now remove all classes add className to container. You will also have to write corresponding classes in CSS as well.

Sample: Updated CodePen

var iconContainer = document.querySelector('.at-about-fab');

iconContainer.addEventListener('mouseover', function () {
  var bounds = this.getBoundingClientRect();
  var sections = document.querySelectorAll('.section');
  var className = '';
  Array.from(sections).some(function(el) {
    var currentBounds = el.getBoundingClientRect();
    if(bounds.top > currentBounds.top) {
      className = el.getAttribute('id');
    }
    else {
      return true;
    }
  });
  this.classList.remove('section1', 'section2', 'section3', 'section4');
  this.classList.add(className);
})

Thanks Rajesh. I used your script and got it to work! Thanks a lot. — robhob, Feb 23 '18 at 13:58

Change text colour based on background

3 Answers3

Idea