Most people are familiar with the psychology of color; Hundreds of articles, case studies, even charts from different perspectives. The influence of color on us will affect every choice in our decision-making process. There is no dispute about that. However, we should not blindly follow a principle to distinguish. Today, we’re going to test the power of contrast in attracting attention.

A shift from soft, calm green to intense, vivid red can attract more attention. Of course, it doesn’t necessarily work. If you don’t lay the groundwork to make it stand out, it will be much less attractive.

The “foundation” in this case is transformation. Here we’ve collected 10 examples of dramatic transformations that help users blend in quickly and get noticed quickly.

Color vs contrast

A quiet transformation:

ESPN Sports Programming

The front page of ESPN’s sports website is a good example of how color can play a role in transformation. The site has two attractions: the intense, vivid red color; The second is a solid background. Isn’t that more attractive than the simple text on the right?

Moovrs

The site is considered a success, despite the lack of bold red tones. Mainly due to the strong transformation, background and main color scheme, THE CTA immediately catches the eye, which is a point of success.

Metaverse Mod Squad

This is another great example of how design fits into color psychology. The red tone of the site is an important element and is a great tool to easily distinguish important details. Despite the artsy background, the burger menu buttons and other red-based elements still draw the eye.

S-Trip

The website designer designed the buttons to look unique and eye-catching. A bright yellow shadow and a contrast background are enough to make the artist feel good.

Squad Digital

The deep red tone makes the button a focal point. Of course, you shouldn’t diminish the dark background. The large amount of white space and core components do not take away the appeal of the middle button.

El Passion

Although green is usually used to create a peaceful, natural environment, in this case the green button is attractive enough to make it the focus of the entire page. This is mainly the result of background images and short text messages.

Icons Responsive

The Icons Responsive website seems quite busy, as there are so many interesting things. One animation worth keeping an eye on is the recognizable navigation bar with a short description. Despite the content, the two strong green buttons stand out.

Chatrify

Not only was the bright, warm yellow chosen as the background color of the button to set the environment, but the size also increased the visual weight and enhanced the significance of the CTA. That’s why the “Get started now for Free” button looks so striking.

Teletrack Plus

Teletrack Plus’ gorgeous pragmatic atmosphere gives people trust and reliability. Although the landing page has elements of a device model and feature list, it is relatively small and the placement of highly saturated yellow buttons is striking. As always, subtly avoid the main tone of color to accentuate an element.

Mobirise

Which button catches your attention in advance? I’m sure many people will choose the more solid and clickable orange button over the elegant ghost button.

To be honest, it’s not too hard to find examples of transitions and seamless colors. However, there are examples including CTA that need some improvement to bring about more transformation.

100 Thoughtful Acts

100 Thoughtful Acts is a website that gives you a very aesthetic impression. However, the tiny CTA is a combination of text and color. The red tone is clearly the most obvious choice, allowing buttons to blend into the environment rather than stand out from it.

Lucerne Health

Lucerne Health’s website uses spectacular scenery as a backdrop, which makes it hard to hold your attention. CTA is a blue tone button that fits perfectly into the theme, calm and peaceful. However, this color only makes it a focal point.

Convect Air

The Convect Air website is an example of great design. The CTA is lost in a luxurious setting. The lack of transition and the small size of the button is not distracting, but decorative.

Soundsnap

The site’s two buttons are identical in appearance and have equal priority. More importantly, they blend into the background. The only distraction at the moment is the message bar at the top.

Wiser Digital

Ideally, the “Find out more” button should be separate from the overall design and contribute to the aesthetics of the site. Although the background has good enough text and graphics fundamentals, the buttons are still ambiguous.

Spire

The CTA here has a unique look, the only drawback being its size. The interesting background and some fancy overlay effects have a lot of visual impact, not to mention the large font slogan that takes center stage. As a result, the buttons on the site don’t seem attractive enough to attract visitors.

The Green Guys

Yellow and green dominate here. Obviously, white does not contrast with these two colors, but only serves as a supplementary hue. So the white button on the site doesn’t stand out as the core, let alone the size of the element.

Martin Wren

Martin Wren’s bright colors win over visitors. While the black color of the button fits the overall design better, the orange CTA has a stronger conversion rate.

Royal Albert Hall

The site is set against a lush backdrop of landscape paintings, creating an aesthetic atmosphere and conveying a message to visitors. Due to its relatively large size, the name brand looks different. The sharp typography and search boxes, as well as the submit button, look smooth and seamless.

Desperados

The site creates a creative aesthetic with some decorative fonts and graphics. The additional graphic object CTA has been highlighted.

The choice of color plays a huge role in website design. However, practice has shown that maintaining contrast between the background and the CTA is critical. If you want to increase conversion rates and improve user interaction, you should consider these two elements in your design.

Nataly Birch

Andy Leong of BESD Design Lab, a user experience consultancy

Scan the qr code for more quality articles oh ~