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.
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.Sign up to join this community
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:
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.