Colours Design

How Effective Use Of Contrast Makes Designs Better

A couple on a hill watching a sunset

Contrast is when two or more visual objects in a composition are juxtaposed to show depth, emphasis and tone by changing the colour or brightness of the object. When contrast is done horribly, it is very noticeable. It’s good to have a strong foundation of composition when designing in any art and design field because it informs people about the most important information.

Good design choices can go a long way. Black and white designs are the most common examples and combinations for high contrast work. There is a very obvious reason why these two colours work well for emphasizing information. The very light background with a very dark foreground. If you are reading this with ease, it’s because of the contrast being used. Newspapers, street traffic lines and fine art are examples of everyday items high contrast makes the important information visible for processing.

Visibility is very important in design. Without the contrast being legible, the design will be difficult to decipher making it useless and a bad design. In graphic design, there are five ways to achieve good contrast in design: light and dark, colour, illustrated distance (foreground and background), shape and size. Good contrast works by creating an emphasis on an object to lead the eye to the information more clearly.

An example of high contrast would be something that looks black and white. While something that is black and grey has low contrast.

Samples of different types of contrast. From the left; white circle on a black background is high contrast, grey circle on a black background is low contrast, black circle on a black background is no contrast.

Some people have a hard time seeing bold or vibrant colours against other colours. Some people would be able to see better with high contrast objects to interpret information. This can help people with colour blindness and not have colours blend in certain conditions. On devices, the contrast of the black text on the white background could change to white text and a black background.

Here’s an example of using all of the elements of contrast to emphasize information that made things worst.

More than twenty-five years ago FOX Sports tried to incorporate glowing red, yellow and blue graphics on a black hockey puck against a white background for ice hockey matches on television. This was known as the FoxTrax. When the puck was active, it would glow an action. The blue trail was for slapshots to indicate the path on the screen while the red glow was for slapshots moving more than 70 mph. The glow would make a trail like a shooting star when it moved. The camera position never changed usually filming the rink in full on the screen.  It was one of the first times augmented reality video effects were used by FOX a national network. It was used by FOX Sports NHL broadcasts between 1996 to 1998. This not only was panned by many people (most Canadian sports watchers) but for having a stupid gimmick that was distracting and unhelpful and cheesy. It was like the network said that the viewers could not see a black puck on a white surface and making things glow like that would help the viewer and make the game more interesting.

Six minute video of the FoxTrax system used for the 1996 NHL All-Star Game.

Banner Credit: Samuel Jéronimo on Unsplash with photo editing