Text colour according to background contrast

[XLD]

Dear support team,

I'm using fullscreen images (Carousel Addon).
Is it possible to display texts (Menus, Text blocks, Captions, Numbers,…) on top of these images according to the contrast of the background?

In terms of:
Dark images > White Text
Bright images > Black Text

Would be fantastic if you could provide a solution for this.
Thanks in advance!

[arminunruh]

I think some people have used mix blend mode

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

to have text that changes its color based on its background

so do u put your numbers and captions on top of the carousel?

do you put text blocks on top of your carousel?

can u post a screenshot or send a link?

[XLD]

@arminunruh

Hi Armin,

numbers, captions and text blocks are all on top of the carousel with mix blend mode on (difference).

This works great on plain and calm backgrounds.
But gets quite messy in terms of readability when it comes to detailed photos (s. screenshot).

Just wondered if there's a smarter "global" solution than targeting each illegible element…


[arminunruh]

the screenshot doesnt show

[XLD]

@arminunruh <

Mix blend works great on plain and high contrast backgrounds.
But gets close to illegible when it comes to photos (s. screenshot).

[arminunruh]

can you send a link

[XLD]

@arminunruh

Sorry - can't provide a link yet.
Hope the visual below clarifies what I mean…

[XLD]

@XLD said in Text colour according to background contrast:

@arminunruh

Hi @arminunruh,

did you have a chance to think about the above issue?
Thanks in advance!

[arminunruh]

you would need to write js code to see which elements are visible right now

either use https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

or

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

use different classes for rows where for one class the text should be one color and for the other the text should be another color

then change the text colors depending on what type of row is visible atm

i dont have time to custom code this for you but if you want to spend €€€ on this you can write me at info@laytheme.com

[XLD]

@arminunruh

Thank you for your reply and the solutions provided.

Just in case you got me wrong:
I created a one row layout with a fullscreen carousel (fixed height: 100vH, filled slides) and text elements "on image".

Now I'm trying to change these elements (e.g. the site title) on a specific carousel slide (2) like this:

.slug-fullscreen
.lay-carousel-slide:nth-child(2)
.sitetitle span{
color: white !important;
}

Does this make any sense?