How to Contrast Between Colors for Designing?

One of the main things that make a design stand out and look amazing is the ‘contrast’ of colors used on the design. A design has a foreground and a background. And if the colors for both these are not well contrasted, the design might be a disaster. The background should be a color which makes the text or the design on the foreground stand out. Likewise, the colors you use for the content on the foreground, you must make sure that it is balanced with the background and doesn’t seem out of place.

If you see a website with poor choices of contrast, you might find it very difficult to read what is written on the webpage. That is one of the main reasons why the traffic on such websites is extremely low. Their low readability and bad choices of contrast.

When designing a website, it is highly recommended that you try out different contrasts to analyze which contrast would look the best for your website. You want the viewers to be impressed by your design while they can clearly read what is written. If the background is too bright and the foreground is too light, the viewer will not be able to read or even see the content in fact.

Things to Keep in Mind When Selecting Contrast For Your WebPage

Choose a Contrast of Colors Matching Your Theme, But It’s OK to Add New Colors to Contrast

You might have already decided the contrast matching it with the colors of your logo, but, you might want to reconsider a few options. It would be great to use the same colors as your logo, but, if you can make a suitable contrast with another color while maintaining the relationship with the logos color scheme, you might be surprised with the different contrasts that you just discovered.

The purpose of trying new colors with the brand colors is to find alternate options for the website in case the brand colors do not turn out the way you want it to look. While the client probably would want you to use the colors given by them, but, if the color palette provided by them doesn’t make the design stand out on the website, you should try new palettes for a better view for the client.

A Bad Contrast of Colors

Let’s say that there is a brand whose basic colors for the brand include a bright green and lemon yellow. Can you imagine these two in the foreground and the background? No. Because both of these colors are super bright for the eye. Bright on bright will never make the text readable. In such a  case, you can always use other colors, along with these colors, to make a website stand out and add clarity to it while it stays connected to the roots of the brand.

A Good Contrast of Colors

A good contrast of colors does not always mean that the design would come out perfectly. Sometimes, the good contrasts strain the eye too much because of which the reader or viewer of the website will not be able to continue reading the content on the webpage. For example, a brand has a color scheme of black and white, background and foreground respectively. Black and white is a great combination as it looks great. However, if you look at a website, which has a black background, and white foreground content, the eyes of the reader will get strained undoubtedly. For situations like this, adding a contrasting color, or changing the contrast with other shades of the same color could be a good experiment.

Background Colors
Foreground ColorsRedOrangeYellowGreenBlueVioletBlackWhiteGray
RedPOORPOORGOODPOORPOORPOORGOODGOODPOOR
OrangePOORPOORPOORPOORPOORPOORGOODPOORPOOR
YellowGOODGOODPOORPOORGOODPOORGOODPOORGOOD
GreenPOORPOORPOORPOORGOODPOORGOODPOORGOOD
BluePOORPOORGOODGOODPOORPOORPOORGOODPOOR
VioletPOORPOORGOODPOORPOORPOORGOODGOODPOOR
BlackPOORGOODGOODGOODPOORGOODPOORGOODPOOR
WhiteGOODGOODGOODPOORGOODGOODGOODPOORGOOD
GrayPOORPOORGOODGOODPOORPOORPOORGOODPOOR

 

This table for contrast can always be used to pre-analyse how your color contrast will look on your design. While there are some which look good here, but there are chances they might not look so good when applied on the design. Working on your design with these contrasts, and different shades will bring out some amazing contrasts for you. So experiment with the color palette confidently. Just remember that your design, whether it’s for web or for print, should be clear. Clarity is one of the most important characteristics in designing, and for that, and for this, the contrast plays a very significant role.

Habiba Rehman
Major love for reading, but writing is what keeps me going. Dream to publish my own novels someday.