What do you do with text on colored backgrounds?

Using a lighter grey color on text that has a colored background may seem like the perfect way to solve the problem,but this is not always the case it could result in bad contrast and affect the content hierarchy.

So what now?

I’m sure you're wondering what to do now.Make text closer to the background color.How will that look?Will it not reduce the text visibility?

The solution is to handpick a new color based on the background color,that is pick a color with the same hue as the background color,then adjust the saturation and lightness until the text is readable.

problem solved!