Landing Page Course Home

Part Seven

Landing Page Design Principles - Contrast

The design principle of contrast is used to improve the readability and visual clarity of your landing page designs. Having a low contrast ratio between your headline and its background (colors, images, or videos) can create readability issues. This is also common when ghost buttons are used for your call to action. In this video, you'll learn how to use contrast to create more readable landing page designs. 

©2018 - The Conversion Platform for Marketers

Try the Unbounce Landing Page Builder

No signup required. Give it a whirl to see what you think.


Landing Page Design Principles - Contrast - 6:58

Skip IntroMore Design Videos

The design principle of contrast. This one's awesome. Now, you may have seen a case study on a blog post about an 'AB Test' where a red button performed better than a green button. It got more clicks, more conversions. This is what it looked like.

Is it because the red was so attractive? No. It's because of the contrast. It was a green page. So the green button was virtually invisible. Here green page, red button, it stands out because of the contrast, the color contrast, more specifically.

You may see the case study where Google increased conversions by testing a gazillion different shades of blue to find the perfect one. Well if you have the amount of traffic Google has, then good luck, run a test like that and see if you can make a difference. You won't. Don't follow those types of examples when you're trying to optimize for conversion.

Not to mention that 6% of men are color blind. Contrast can have a big impact on readability. Sometimes negatively. There's a great tool called the contrast ratio calculator. It will allow you to determine the contrast between a foreground element such as your headline or a button and the background, which might be a background image or a solid color or it could be a background video. Background video being the worst candidate for causing contrast problems.

There's a cool tool called a contrast ratio calculator. You can put in the color of your background and maybe your headline that's above it or a button, to determine the ratio between one and the other. Particularly text because readability is really important and you want to get around a score of about fourteen. Twenty one is the best. You don't need to worry about that. Anything above seven is good. Fourteen is kind of really good. I'd advise you to use the calculator and see what the contrast ratio is between your headline and the background of your landing page.

Here's an example of contrast gone wrong, homepage. You'll see it has one of those promo sliders. You can click through to get different news stories. Well, they've been shown many times to either not have a positive impact on conversion or negatively impact it. Very common, the people won't interact with it. They won't get to that second, third, fourth slide that you hope they'll get to, particularly when you can't find the navigation.

Now on this example, there is a previous and next arrow and they're both white. Why is that a problem? Well for starters, this is hockey. Ice hockey. Everything's white so if you want to have white arrows on a white background, you're not going to see them. Can you see them on here? It's really hard. There were seven slides in this carousel. Six of them were white. Only this one, you could see them. That's how important contrast is and how easily you can negatively impact the user experience if you don't do it correctly.

You can see here, there's a lot of contrast here. The white on black. Very stark contrast which, is why it stands out so much and you may also have noticed along the color contrast spectrum, that these flowers get a lot of your attention because this is all fairly flat in colors, neutrals, black and white. And this just really stands out. That's the positive impact that contrast can have when you try to use the principle to make people pay attention to what they should be doing on your landing page.

I'm going to jump into the Unbounce Landing Page Builder and I'll show you some examples of good and bad uses of contrast. You can see how to measure the contrast, how to get it wrong, but also how to fix it if you see you do have a problem.

Inside the Unbounce Landing Page Builder, now the principle of contrast. If you look at this button here, it's a ghost button. I'll be talking about that in a lot more depth in the Affordance video, but for now, if you just look at this, the button's kind of hidden because of the transparency in it. It's just a line.

So this is really simple. I have our standard button color from this page. It's right down here, that 1AC6FF. All I'm going to do with this, it already has that but it's got some opacity set to make it transparent. I'm just going to do that. Now you can see it really stands out compared to the ghost button version, but it's still mixing in with the background a little bit. I'm just going to get black to illustrate. Now it has a lot of contrast compared to the background, because none of those colors are being mixed in and it's very clear. That's a call to action. It's right in my face. The contrast ratio between this and the background is way higher, making it stand out a lot more, allowing it to be more readable.

That's another landing page design principle that you have in your toolkit. So please, try them out on your landing pages. You'll improve the clarity. You'll improve the impact of the design and ultimately increase conversions.

I recommend you check out You can follow me on Twitter, @oligardner. Click that link up there. It will take you to a preview of the Unbounce Landing Page Builder. You can play around with it and see how easy it is to use. Apply some of the design principles I've been teaching you and you'll have higher conversion landing pages in no time.

Video Transcription - The Landing Page Design Principle of Contrast