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

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.

1 Answer

I feel this should solve the problem

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