Tilda Blog

How to Improve Text Readability With Color

🧡 Color helps tell the story of your products or services by immersing visitors in the brand atmosphere and evoking the right associations. In addition, color in web design can be used for practical purposes - to improve the readability of text.

If you want, for example, to combine a photo and text on the cover, add a color filter that mutes and evens out the illustration. The text won't get lost in the background and will become more contrasting.

To add a color filter to the cover, open the block Settings and select the desired shades and opacity for the "Filter start color" and "Filter end color" fields. Choosing different colors creates a gradient. Make sure that the text contrasts sufficiently with the background color. If the text is still had to read, increase the opacity.

If you design in Zero Block, you can place a colored shape under the text which will highlight the text and make it easier to read.

Experiment with colors, shapes, and opacity to discover what works well for your design ⭐️
Made on