1

I'm using two solid icons on a card which has different background colors ( sometimes colorful images). I wanted to see if there's a way that I could make my icons visible and readable on all color tones.

Thanks.

  • 1
    Try adding a background shape or shadow to the icon so there's good contrast? Change the color depending on the background? What are you expecting us to say? There's no magic to make any color have contrast with another color – Zach Saucier May 31 at 13:34
  • You could look into the blend-mode css property and its various settings. It can make an icon visible on more background colors than normal color blending, but it can also make the color of your icons look very strange. – Daniel C May 31 at 20:06
2

Since you mentioned readability, I guess there is some text on the icons. To make them readable when background is causing problem, you can add a solid circle or rounded square behind the main icons with some padding.

If you icons already have circle shape or rounded square like thing, the visibility issue can occur if background color matches the icon colors. In that case, you may want to add a contrasting stroke to the icons. Or give them a shadow.

See two images below:

enter image description here enter image description here

1st image has 2 types of icons. Left one has already a shape (circle or square at least). Right one doesn't have. Both have contrasting issues with background (to some extent).

In 2nd image, I used Stroke Color to fix the contrast issue in the icon on left, and for right one, used a shape behind icon with contrasting color to fix the icon.

Having said that, there's no fix easy rule you can apply for all your icons and backgrounds, that would work. Most of the time you have to play with it if your backgrounds vary a lot according to requirements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.