cssfontsbackgroundcontrastcompare-contrast

Auto-contrast Font Color to Background

I have a background of a field. The bottom is green, the top is gray. There is text on top of the background. Is there a way for the text to "sense" what color the background is and to tint the font in a way to make it contrast?

For example, the the text over the gray sky would become brighter and the text over the green field would become darker, to make it more visible.

I may be reaching pretty far on this one, but any suggestions are appreciated. (Please note, I am not looking for the answer to manually change the font colors.)

Solution

  • More as an experiment than otherwise:

    Set the text with a background inherit, to get the background of the base; then clip it to the text, and then apply some filters to it:

    .test {
    width: 800x;
    height:220px;
    font-size: 200px;
    background-image: url(bosque.jpg); 
    color: white;
    position: relative;
}

.inner {
    position: relative;
    background-image: inherit;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-filter: invert() sepia();
}

    fiddle

    (Only working in webkit)

    Check also this ones:

    animated madness

    contrast animation

    UPDATE: We have new ways to handle this. See a demo using mix-blend-mode: difference

    div {
  font-size: 300px;
  color: gray;
  mix-blend-mode: difference;
}
body {
  background-image: url(https://picsum.photos/900/600);
}
    <div>TEST</div>