How to Make Your Written Content Readable on Image Backgrounds with Divi

Last Updated on September 16, 2022 by 7 Comments

How to Make Your Written Content Readable on Image Backgrounds with Divi
Blog / Divi Resources / How to Make Your Written Content Readable on Image Backgrounds with Divi
Play Button

Making sure the content or copy for your website is readable is equally as important as making sure you’re choosing the right words. Of course, getting the overall right look and feel for your website is important as well. But without readable and valuable content, the purpose of a site will most likely get lost.

When you’re creating your website with Divi, you have different design options that allow you to make sure that the copy you’re sharing is readable on whatever kind of image background you’re using. That’s what this post is going to be all about. We’re going to share some tips and tricks and Divi options that will make sure the written content you share on image backgrounds is readable and easily understood.

Let’s take a look!

How to Make Your Written Content Readable on Image Backgrounds with Divi

Subscribe To Our Youtube Channel

1. Contrast is King but Avoid Extreme Contrasts (Black & White)

content

The first bullet point and essential aspect of creating readable content is making sure there is enough contrast between the written content you’re providing and the image background you use. If you’re using a background image that leans too much towards the color of your font, the content you’re sharing can easily go lost. Choose between:

  • Using a light font color in combination with a darker background image
  • Using a dark font color in combination with a lighter background image

The most obvious contrasting colors are black and white. However, using them in combination can be heavy on the eyes. Therefore, rather opt for two contrasting colors that aren’t as heavy on the eyes as black and white are. Instead of choosing a black color for your background, choose a dark gray color or any other type of dark color. Same counts for a light font color; choose a light gray color or any type of light color that leans close towards white.

2. Use Neutral Colors & Sober Font Families

content

The next thing that’ll determine whether or not your content is readable is the color and font family you choose. Sure, using bright and notable colors draw attention. But if you’re sharing too much copy in that particular color, it will likely cause people to skip reading the content you’re providing because of how disturbing it is on the eyes.

That’s why it’s recommendable to use neutral colors that don’t bother the eyes and allow visitors to focus on the message you’re trying to bring. You can never go wrong by choosing a sober font family for most of the copy you share as well. However, that doesn’t mean you should always go with default fonts, like Arial, only. You can also opt for something that is a bit more sophisticated for your titles–as long as the readability is there.

3. Use Bright Colors to Highlight CTAs

content

As mentioned in the previous bullet point, a good website mostly uses neutral colors and sober font families. By doing so, you allow visitors to pay special attention to your calls to action.

To make sure your CTAs stand out from the other written content you’re providing, you’ll have to a find a color that contrasts with both the background image and the font color. Visitors are used to this kind of website structure and will automatically recognize your calls to action if you make sure they’re the first thing that catches the eye.

4. Add a Background Color Overlay to Your Background Image

content

In many cases, the background image you want to use is a combination of light, dark and bright colors. That makes it hard to find a readable font color. Luckily, you can add color overlays to your background images within the Divi builder itself.  These overlays are available for any row, column, module or section that you’re using and can be found in the Background subcategory of the Content tab. You could add overlays to images with photo editing software as well, but using Divi built-in options in combination with the Visual Builder allows you to see changes happen in real time and makes using photo editing software hardly necessary.

You can change the overlay color up to the point where you feel like the written content is readable. By doing so, some of the colors of your images will go lost, that’s a fact. But that’s something you’ll have to sacrifice willingly. If you want to keep a colorful image within its original form, using it in a two-column structure with no text overlap is the way to go.

Once you add a background color overlay to your Divi settings, you’ll have to choose the type of Image Blend you want as marked on the print screen below.

content

5. Or Use a Gradient Background Overlay Instead

content

Another option you have is using a gradient background overlay. This gives you the same possibilities as the color overlay does, but allows you to add a gradient of two colors instead. Once you add a gradient background, you will, again, have the option to choose your Image Blend as marked on the print screen below.

content

6. Use Text Shadow

content

If, however, you want to use the same color for your font and background image at the same time; there’s an alternative. You can use the Text Shadow built-in option of Divi. For this option, you will need to use a shadow color that is the opposite of your font color and background image or overlay color. Not only will you be able to maintain the same color for your font and background image at the same time, but the Text Shadow option also allows you to create some depth which is a helpful contribution to the look and feel of your website.

Final Thoughts

In this post, we’ve shown you several ways on how to make your written content or copy readable when using image backgrounds. Of course, you don’t have to apply all of these methods at the same time, but it’s great to keep them in the back of your mind while designing your next website. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Featured Image by FernPat / shutterstock.com

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

7 Comments

  1. Good Work, Thanks

  2. Great Article. A helpful encouragement for newbies. Thanks.

  3. Excellent tutorial, I was looking for a way to do this, but my codes did not look elegant.

  4. Good summary of typographical basics. Just to be a bit technical, I believe the article is referencing “legibility” rather than “readability”.

    Legibility describes the ability to identify individual elements on a page such as letters defined by clarity of typeface and contrast with the background.

    Although encompassing legibility, I believe readability has more to do with how the words formed by the text flow into paragraphs and convey the writer’s ideas to the reader. Legible text isn’t always readable.

  5. I would like to add to the “gray on gray” prior comment. The recent design trend I see a lot of now where body text is getting lighter and lighter gray is ridiculous. Pretty soon it will just disappear.

  6. Hello! I’m from Brazil! I have several blogs and the content you post here has helped me a lot. Thank you for the tips!

  7. Thanks for the design tips. For people whose vision is not so great, particularly the elderly or people with other eye problems, high contrast and reasonable point sizes have a lot to do with how readable type is. For that reason, a couple of your suggestions make things harder, not easier, for them to read web text. Both gradient and gray overlays reduce contrast. And in the examples you give the “lorem ipsum” text is quite small. Black text on white is the most readable, even if it looks stark. Gray on gray (as, for example, in the “Recent Posts” footer on this blog site) is the worst, especially at 14px, which that type is.

    One way for designers to solve this is to create more readable styles and give readers a way to choose them. Another is to remember that not everyone has perfect eyesight and design accordingly.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today