white color!white background
Hey guys!I have a problem:) my text color is always white,but the background can change!the problem is : when user wants to choose white background,what do you recomend?maybe you can help me with a good text-shadow👩🏻‍💻
I have tried many shadows but they just didnt look well
2 Replies
text-shadows get a little rough, depending on how you make them, especially on smaller text. The best results I've seen are by layering text-shadow with a blur, so something like this:
By setting the blur instead of the normal trick of offsetting four shadows up, down, left, and right, you end up with a smoother effect. You can get it darker by adding more layers
honestly though, I'd recommend either limiting what the user can select as a background, or switching the font color based on that selection. It's important for accessibility reasons to maintain a good contrast, and that's going to be hard with a user selected background
Limit the choices someone can choose. Either select a range of nice colours (most people don’t need a specific colour and you can present good looking ones, most people aren’t designers and can’t choose a good colour if given all of them). Or calculate the contrast ratio of a selected colour and white https://webaim.org/resources/contrastchecker/ you want it to be WCAG AA compliant as a minimum (you don’t need to be AAA compliant for most use cases). If the selected colour does not comply they cannot set it
Additionally you could also put limits on saturation so people can’t go for #F00