Do you have a good contrast between your text and the background on your website? What about between your buttons and the background? Why is this even important?
Let’s find out!
What is Contrast?
First, let’s look at what contrast means. Contrast refers to the difference between the lightness and darkness of different elements on a page. In this case, we’re specifically talking about your text and your background, and your buttons and your background.
Why is Contrast so Important?
The contrast between your text and your background is super important for the readability and accessibility of the content on your website. It helps make sure the text is easy to see, read, and understand!
If visitors have a hard time reading your content because of low contrast, then they are going to leave your website before even learning about what you have to offer.
The contrast between your buttons and your backgrounds is just as important as this can affect your conversions. If your buttons blend into the background and the visitor can’t clearly see and read your buttons, then they won’t click on them. Which means that you will lose out on sales!
We don’t want that!
Tips to Help Ensure You Have Good Contrast on Your Website.
- A good rule of thumb for text is to use light-colored text on dark backgrounds and dark-colored text on light backgrounds.
- Increasing the size and weight of your font can also improve your contrast ratio.
- For your text aim for a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
- For buttons, ensure a contrast ratio greater than 4.0 between your button color and background colors.
- You can also make sure your buttons stand out by using an accent color and providing plenty of space around them.
- Make sure your button design is consistent throughout your website. (Example: If you use rounded buttons, be sure that all your buttons are rounded.) You want to train your visitors that when they see that color and that button’s look that it is something to click on. Consistency will help to do that.
- Also, ensure that your buttons look like buttons. It’s great to be creative but sometimes we get too creative and forget about the user experience. Don’t confuse your users. Buttons should look like buttons.
Want to see how your text does? You can test out the contrast of your text, background and button colors here: https://webaim.org/resources/contrastchecker/
