Using a dark font color in combination with a lighter background image<\/li>\n<\/ul>\nThe 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\u2019t 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.<\/p>\n
2. Use Neutral Colors & Sober Font Families<\/h2>\n
<\/p>\n
The next thing that\u2019ll 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\u2019re sharing too much copy in that particular color, it will likely cause people to skip reading the content you\u2019re providing because of how disturbing it is on the eyes.<\/p>\n
That\u2019s why it\u2019s recommendable to use neutral colors that don\u2019t bother the eyes and allow visitors to focus on the message you\u2019re 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\u2019t 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\u2013as long as the readability is there.<\/p>\n
3. Use Bright Colors to Highlight CTAs<\/h2>\n
<\/p>\n
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.<\/p>\n
To make sure your CTAs stand out from the other written content you\u2019re providing, you\u2019ll 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\u2019re the first thing that catches the eye.<\/p>\n
4. Add a Background Color Overlay to Your Background Image<\/h2>\n
<\/p>\n
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.\u00a0 These overlays are available for any row, column, module or section that you\u2019re 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.<\/p>\n
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\u2019s a fact. But that\u2019s something you\u2019ll 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.<\/p>\n
Once you add a background color overlay to your Divi settings, you\u2019ll have to choose the type of Image Blend you want as marked on the print screen below.<\/p>\n
<\/p>\n
5. Or Use a Gradient Background Overlay Instead<\/h2>\n
<\/p>\n
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.<\/p>\n
<\/p>\n
6. Use Text Shadow<\/h2>\n
<\/p>\n
If, however, you want to use the same color for your font and background image at the same time; there\u2019s 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.<\/p>\n
Final Thoughts<\/h2>\n
In this post, we\u2019ve shown you several ways on how to make your written content or copy readable when using image backgrounds. Of course, you don\u2019t have to apply all of these methods at the same time, but it\u2019s 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!<\/p>\n
Featured Image by FernPat\u00a0\/ shutterstock.com<\/em><\/p>\n<\/div>\nHow to Make Your Written Content Readable on Image Backgrounds with Divi<\/a><\/p><\/blockquote>\n