Streaming live at 10am (PST)

Image automatically changes text colour

Hi all hope you are well!

simply put: text change to black or white depending on the background image uploaded.

using -
and trying here -

My knowledge of js isnt great although i did get this working however it only scans colours not images -


Using this -
Found here at
JS here - and

Js -

Css -

It does state -

"If an element overlaps any of the images, either .background--dark or .background--light is added to it. BackgroundCheck does not change an element’s style — you must do so using CSS.

For example, if <p> has the following default style:

p { color: white; }

you can then add the following:

p.background–light { color: black; }

THANKYOU :slightly_smiling_face:

Here is my site Read-Only:

Hi @AGH,

Can you explain again, what is it that you want to achieve? Maybe show an example?

Hi, @avivtech Thanks for checking.

So we’ve had to create a manual version (toggle in database changes nav and logo by duplicating and setting conditional format) of this now found here - (logo changes colour for each slide)

But I’m still interested in how this would work automatically using js, as think it’s such a valuable tool for anyone with a logo that go’s over a banner image.



Maybe using this:

Yes, completely loved this! we set it up and implemented it then realised when a banner is yellow the logo went purple lol. So if it needs to be staying black and white it may need to javascript?

I think that a grayscale filter on the element will be enough.

Good point! will have a go and let you know the outcome, Cheers @avivtech!