High contrast text over a carousel ?
Hi, I'm doing a carousel for a hero section. I want to include some text before a CTA on top of the carousel. I find myself not satisfied with the legibility of the text on top of the image/videos. I was wondering if there were good practices when approaching such a task.
I've tried to work with text-shadow, mix-blend-mode, darken the images or place a card. Couldn't find a way to make something simple and impactful. How would you do that ? I think maybe the best solution is strong editorial guidelines for the pictures, but on that use case it's guaranteed to fail.
5 Replies
This doesn't really help you but I don't recommend using carousels, especially for Hero sections. I don't have the exact number off the top of my head, but I think carousel engagement rate is like 10 or 20% (so 8/10 people on your website will skip over a carousel entirely -- I could be wrong on these numbers though).
Why do you want to include a carousel? Movement? Think of other ways to incorporate movement.
Have you tried designing this out in Figma or equivalent?
I prefer to design directly in CSS somehow. Thanks for the tip about engagement.
It's for a kitchen manufacturing company. So to show their work first on autoplay sounded like a good idea.
at the moment I have something interesting going on with a white card and mix-blend-screen. It works on a good amount of works.
Got it. If you're still stuck and can't figure it out, I recommend opening up Figma and just playing around with different options. Should save you a signficant amount of time in the long run
Here’s a few things to consider for carousels:
- It’s annoying for users to loose control, when such design elements moving on their own.
- Moving UI elements usually reduce accessibility.
- Banner blindness. Most users will simply ignore this design element, because it looks and behaves somewhat like an ad banner.
- Some people read slowly. Users often don’t have enough time to read the information + image.
- The probability that users will spot the item they want is drastically reduced. Let’s say you have 5 items in that carousel, it makes 20% visibility for the item.
That said it’s better to came up with design without the carousel. But it might be that you can’t convince your Client to do so.
Let’s see how your carousel items look like?)
Thanks! So carousel have to be avoided. Great advice both of you!