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!
11 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 🤦🏻♀️
Does the text have to be a direct child element of the wave for mix-blend-mode to work?
Managed to put together a codepen showing the issue: https://codepen.io/HeleneKassandra/pen/JoPbqgq
Thanks for all your help and suggestions so far! 💜
I played with it and couldn't figure it out either. I will say I'm pretty positive, the text element will need to be inside of the element with the background it is trying to render against to work.
this is the example I was trying to follow which is exactly what you want to do.
https://css-tricks.com/reverse-text-color-mix-blend-mode/ (note, their UI example is a loading bar, I spent longer than I'd like to admit waiting for the example to load before I realized the loading UI IS the showcase of
mix-blend-mode: difference;)Robin Rendle
CSS-Tricks
Reverse Text Color Based On Background Color Automatically In CSS |...
Over the weekend I noticed an interesting design for a progress meter in a videogame. The % complete was listed in text in the middle of the bar and didn't
I was trying to do exactly this woth a pseudo element and a difference , gonna have to dive in to see what step I missed. I think it's that I was setting the color I wanted , and difference was rotating it. I needed to start with the opposite color like how they use "aqua" on this and not "red"
And mix blend mode works for everything in the same containing block.
Weirdly enough , @Chris Bolson discovered that this pattern works with red, blue, green, or black but otherwise the text on the colored bg isn't white. It was driving me nuts as I was using rebeccapurple and couldn't get it to work until I changed it to red. Also inverting the colour instead of having to figure out it's opposite manually is thanks to Chris.
My second attempt, works with red but still figuring out the right color values and blend modes so that the text turns white when its blending with the "wave". See below
https://codepen.io/Miss-Fox/pen/azoJjOa
EDIT: in case anyone is interested , because of the difference blend mode formula, trying to get white text is very dependant on the rgb values used , this is why only red green and blue values will work for pure white. The formula takes the bg color rgb(255,0,0) and the text color rgb(0,255,255) and finds the absolute difference to find the output color.
It moves channel by channel:
- red channel: | 255 - 0 | = 255
- green channel: | 0 - 255 | = 255
- blue channel: | 0 - 255 | = 255
So resulting in an output color of rgb(255,255,255) And as far as using filter(1) or hue-rotate(), the order of operations (no matter the order your declarations are written) is that any filters are applied before any blend modes
So resulting in an output color of rgb(255,255,255) And as far as using filter(1) or hue-rotate(), the order of operations (no matter the order your declarations are written) is that any filters are applied before any blend modes