Make sure the contrast is acceptable ( test foreground and background color values here: contrastchecker.com ). If you have control over both the text and hero image it's a matter of composition.
If you don't know what hero image or text is going to be shown ( for instance when they're user defined ), you can improve contrast by adding a dark or bright overlay.
You can add the overlay on top of the entire image, or add a background color to the text element.
If you're using CSS you can use finely tuned linear gradients ( do note that these might impact performance ).
For more info, read this article on CSS-tricks: css-tricks.com/design-conside…
Great, thank you!
I think you should look into Tachyons and have fun. There are very elegant solutions to your problem in the gallery: tachyons.io/gallery/
👋 Join WIP to participate