Change text colour based on background

Design help General
1

Hi all,

I’m looking at ways to implement a change of text colour for the nav on my website when scrolled over sections of different background colour like this website does: https://www.archipelago.com.au/

I appreciate this type of question has been asked a few times, as I’ve already had a search - most of the answers point to either using a “difference” blending mode, or an “invert” filter, however I am quite sure that isn’t what is happening on this website - as there are areas where the nav menu isn’t fully within the section and the text hasn’t changed colour (you’ll have to scroll around to see what I mean).

Any suggestions as to how this can be achieved are welcome.

I would use “difference” blending mode, however one of my background colours is not far off being mid-grey resulting in an illegible low contrast result.

Any help is much appreciated.

Thanks in anticipation,
Chris

2

Not long after posting this I think I worked out a way to do it using interactions.

Basically you set up a “scrolled into view” action that is applied to whichever sections have a background colour class applied (for example “bg-colour-green”, or “bg-is-green”) - this interaction simply changes the text colour on scroll in, and reverts back on scroll out.