Set text color to white on red background and black text color on white background with CSS

Question

I need a CSS styling that makes the text color white when the background is red and a black text color when the background is white.

My red background has the following color: #d6002e

I added this CSS to my text:

mix-blend-mode: difference;
color: #29FBFF;  // Inverted color of my red

Now it looks like this :

My text gets the inverted color of the background, which is not exactly what I want.

Does this answer your question? [Invert CSS font-color depending on background-color](https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color) — tacoshy, Oct 15 '21 at 11:24

score -2 · Answer 1 · edited Oct 15 '21 at 09:17

-2

I feel this should solve the problem

.my-red-bg {
    background: #d6002e;
    color: white
  }


.my-black-bg {
    background: black;
    color: white
 }

edited Oct 15 '21 at 09:17

Abdur Rahman

answered Oct 15 '21 at 09:07

1 Answers1