Change Color of Text Responding to Background Color

Change color of text responding to background color

You may simply add a text-shadow with a dark color and you will have a better rendring whataver the image you will use:

.infobox {    width: 110mm;    height: 65mm;    background:    linear-gradient(to bottom,transparent,#fff),    url(https://i.pinimg.com/564x/86/70/f2/8670f2ab34bf4082bf3cef004aae0826.jpg);  background-size: cover;  position: relative;}
.text {  position: absolute; bottom: 0;   text-align: center; color: white;  text-shadow: -1px 0 1px #000,               1px 0 1px #000,               1px 1px 1px #000,               -1px -1px 1px #000,               0 1px 1px #000,               0 -1px 1px #000;}

<div class="infobox">  <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel quam in enim pulvinar fringilla. Etiam molestie convallis pharetra. Sed et tortor tortor. Vestibulum ligula ex, rhoncus semper metus ut, hendrerit porttitor risus. Quisque at porta magna. Phasellus vel vulputate diam. Maecenas sem est, aliquet nec odio euismod, posuere luctus nisl. Vestibulum posuere iaculis massa, sed cursus dui pellentesque sed.</span></div>

How to decide font color in white or black depending on background color?

Building on my answer to a similar question.

You need to break the hex code into 3 pieces to get the individual red, green, and blue intensities. Each 2 digits of the code represent a value in hexadecimal (base-16) notation. I won't get into the details of the conversion here, they're easy to look up.

Once you have the intensities for the individual colors, you can determine the overall intensity of the color and choose the corresponding text.

if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff

The threshold of 186 is based on theory, but can be adjusted to taste. Based on the comments below a threshold of 150 may work better for you.

---

Edit: The above is simple and works reasonably well, and seems to have good acceptance here at StackOverflow. However, one of the comments below shows it can lead to non-compliance with W3C guidelines in some circumstances. Herewith I derive a modified form that always chooses the highest contrast based on the guidelines. If you don't need to conform to W3C rules then I'd stick with the simpler formula above. For an interesting look into the problems with this see Contrast Ratio Math and Related Visual Issues.

The formula given for contrast in the W3C Recommendations (WCAG 2.0) is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lightest color and L2 is the luminance of the darkest on a scale of 0.0-1.0. The luminance of black is 0.0 and white is 1.0, so substituting those values lets you determine the one with the highest contrast. If the contrast for black is greater than the contrast for white, use black, otherwise use white. Given the luminance of the color you're testing as L the test becomes:

if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff

This simplifies down algebraically to:

if L > sqrt(1.05 * 0.05) - 0.05

Or approximately:

if L > 0.179 use #000000 else use #ffffff

The only thing left is to compute L. That formula is also given in the guidelines and it looks like the conversion from sRGB to linear RGB followed by the ITU-R recommendation BT.709 for luminance.

for each c in r,g,b:
    c = c / 255.0
    if c <= 0.04045 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b

The threshold of 0.179 should not be changed since it is tied to the W3C guidelines. If you find the results not to your liking, try the simpler formula above.

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>

How do I set a background-color for the width of text, not the width of the entire element, using CSS?

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

And then apply the background color on the inline element.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

An inline element is as big as its contents is, so that should do it for you.

How to change the background and text color within button using button onClick in React JS

You can use States to control color dynamically.

import React, { Component } from 'react';

class Page extends Component {
 constructor(props){
   super(props);
   this.state={color:"black"}
}
    render() {

        return (
            <div>

                <div style={{ background: "#f0f0f0f" }}>
                    <h3 style={{ color: this.state.color }}>Heading</h3>
                    <p style={{ color: '#706c61' }}> This is a text...</p>
                </div>
                
                    <div>
                        <button onClick={()=>this.setState({color:"white"})}> White </button>
                        <button  onClick={()=>this.setState({color:"purple"})}> Purple </button>
                        <button  onClick={()=>this.setState({color:"red"})}> Red </button>
                        <button  onClick={()=>this.setState({color:"green"})}> Green </button>
                    </div>
            </div>
        );
    }
}

export default Page;

Sandbox - Link

Background color for text (only)

Yes. Add a <span> inside the <h1>, and apply the background colour and a line-height to it.

Demo

---

Related Topics