Create Contrast in Blog Design - dummies

Create Contrast in Blog Design

By Melissa Culbertson

Contrast in blog design occurs when two or more elements are different from one another. The more difference between the elements, the greater the contrast. Your blog design can benefit from contrast in a few ways:

  • Contrast can provide visual interest. Your eyes are drawn to contrasting things, such as a pale moon against a black sky or a tall building surrounded by others a fraction of its size. In blog design, contrast can keep a blog pleasing to look at instead of being bland and uninteresting.

  • Contrast can make an element jump off the page and encourage the reader to take action. If you want to highlight a button that links to your new e-book, you can use contrast so the button stands out while still fitting into your overall design.

    Pat Flynn’s blog Smart Passive Income uses light green boxes with a dark green border to make important areas of his blog design stand out. The “Don’t know where to start?” and eBook Guide boxes contrast with the black video and e-book image to make those elements pop off the page and drive interest in his blog.

    [Credit: © Smart Passive Income]
    Credit: © Smart Passive Income
  • Contrast makes text easy to read. Have you ever been to a blog where you couldn’t read an actual blog post because the background color and text color were too similar? Contrast needs to exist for blog post readability to entice your visitors to actually stay and read your posts.

    A white background with black or dark gray text is always a safe choice for main areas of content like a blog post.

Explore methods to create contrast

You can apply contrast to your blog design in a few ways. Here are some common ones:

  • Color: Probably the most common way to apply contrast is through color. You can use contrasting colors of the same shade (such as black with a light gray) or two colors on opposite ends of the color wheel (orange and blue). You can even use a single color to make a certain blog element stand out, such as how the red Free Instant Access button stands out against a pale green background.

  • Fonts: Using two different fonts that complement each other can also create contrast in your text. For example, pairing a script font with a sans-serif font provides visual interest.

    You can also apply contrast with the same font by applying bold and italics. Just use either in moderation. Also, avoid underlining text because most online visitors would assume that an underlined word is a hyperlink.

  • Size: Having two or more design elements of different sizes also creates contrast. For example, most all blog designs use a blog post title that’s larger than the subheadings within the post’s content.

  • Images within your blog content: Adding images to your blog content provides contrast by breaking up large passages of text and drawing the reader further down into your blog.

After you understand these ways to apply contrast, you can start combining them to add even greater contrast, such as using two different fonts with two different colors.


Apply the right amount of contrast

Contrast in blog design can be tricky. More contrast doesn’t always equal better contrast. And sometimes you might not want to apply enough contrast for fear of taking it too far.

Too much contrast can be jarring to the reader or hinder your blog’s readability. For example, using white text on a black background is a frequently cited example of too much contrast. Although it may work in small doses, reading paragraph after paragraph becomes tiring because your eyes have to work harder to read the text.

It also produces halation, the tendency of white characters or text to “glow” when on a black background.

Although not necessarily jarring, too little contrast can also make your blog hard to read. For example, creating subheadings in your blog post by just bolding text may not make the subheadings stand out enough for someone skimming your blog post. (Most people skim.)

In this example, using a different font and a different color adds enough contrast for the way people will likely interact with your blog’s content.


When you’re deciding how elements should contrast, keep in mind the following questions:

  • What are the most important and second most important actions you want blog visitors to take? Add contrast to highlight the areas of your blog where readers will take those actions (such as the Free Instant Access button example mentioned earlier).

  • How can contrast make this content easily accessible to blog visitors? Sometimes, breaking up text with photos is ideal. For example, a how-to post full of photos that show the steps is the most efficient and easy-to-skim way to present that information and break up the text. If your content is more conceptual than visual, breaking text into subheadings as shown may be a better choice.