Dealing with content on a moving colored background
Hello front-end friends!
Does anyone happen to have any suggestions on how to deal with content that is on top a moving colored background? - without relying on breakpoints alone.
I have this wave background, that scales with the page, meaning the high-and-low point of the wave move based on screen size. On top of the wave I have a title, and here's the problem/question: Is there a way to ensure that the text never goes invisible (white on white) when I don't know when it happens?
My first thought was to change the text color on set breakpoints, but the issue with that is that according to WCAG, users have to be able to increase text size by 200% - meaning it's not only screen size alone that makes the text fall "out" of the wave.
I know I can move the text higher up on the wave to avoid the problem completely, but the designers will love me if I figure this out Thank you in advance for all help and suggestions!
My first thought was to change the text color on set breakpoints, but the issue with that is that according to WCAG, users have to be able to increase text size by 200% - meaning it's not only screen size alone that makes the text fall "out" of the wave.
I know I can move the text higher up on the wave to avoid the problem completely, but the designers will love me if I figure this out Thank you in advance for all help and suggestions!
6 Replies
Firstly. it's the designers job to show what they want in this scenario.
I could think of different ways. for example:
- Set the background of the title to the same blue color
- Give the text a stroke/shadow
- Play around with blend-modes
And secondly. please provide us a codepen so we we can see what you are working with.
Thanks for replying! I like the suggestions of looking into text-stroke and blend-modes.
I also realized the images I added doesn't really show the situation I'm dealing with properly. Because in many cases the content wrap as it should, but I have no way of knowing when I should change the color of the title.
In other words my question could also be rephrased to: "Is there a way to know when a flexbox has wrapped?"
Or am I gonna be forced to try and solve it with grid?
Also regarding codepen: I'm working on a larger application so I found it a bit tricky to recreate it properly in a codepen, but I'll give it another go later! Thanks for your input!
Blend modes!! Eg
mix-blend-mode https://codepen.io/Miss-Fox/pen/KwPNOow
alternative stacking method
I cam here to say a blend mode might help but was beat to the punch.
I couldn’t figure out how to do so with a colour plus white 🤦🏻♀️