Image automatically changes text colour

Design help General
1

Hi all hope you are well!

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

using - BackgroundCheck
and trying here - Webflow

My knowledge of js isnt great although i did get this working however it only scans colours not images - GitHub - jamiebrittain/colourBrightness.js: A lightweight and easy-to-use jQuery plugin that determines if the background colour of an element is light or dark.

DETAILS:

Using this - BackgroundCheck
Found here at GitHub - kennethcachia/background-check: Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
JS here - https://github.com/kennethcachia/background-check/blob/master/background-check.js and https://github.com/kennethcachia/background-check/blob/master/background-check.min.js

https://cdn.jsdelivr.net/gh/kennethcachia/background-check@master/background-check.js
https://cdn.jsdelivr.net/gh/kennethcachia/background-check@master/background-check.min.js

Js -

39
391358×634 39 KB

Css -

57
57400×502 13.3 KB

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: https://preview.webflow.com/preview/background-check-test?utm_medium=preview_link&utm_source=designer&utm_content=background-check-test&preview=8e12d25d6051c4616d7a087066e7e2a6&mode=preview

https://background-check-test.webflow.io

2

Hi @AGH,

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

3

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) (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.

Cheers

Gareth

4

Maybe using this:

5

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?

6

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

7

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