Web Design Essentials: Which Colors to Avoid?


which colors to avoid

Source: Unsplash

Have you ever wondered why the world's biggest fast-food brands, such as McDonald's, Wendy's, Pizza Hut, and Burger King, don a red and yellow brand combination?

Or why major tech brands (Dell, Intel, HP) and social network platforms (Facebook, Twitter, LinkedIn) have blue as their dominant color?

Color psychology assumes a prominent role in today's branding and marketing efforts for big and small brands alike.

The answer to why is a no-brainer - several studies have shown that as much as 90% of the decision-making process on the web is made solely based on the color of the website or product.

In fact, designers, marketers, and psychologists today work hand-in-hand with brands on researching, testing, and tweaking color choices - from logos and CTAs to branding and website design.

Yet, psychology isn't the only deciding factor in website design - some colors simply look dull, faint, or unprofessional on the screen.

Website design involves a lot of trial and error, but choosing the right colors can help you save time and cut your costs. That’s why we asked web designers from a top Miami web design company to help us outline the colors you need to stay away from in web design.

Colors Not to Use in Website Design

Despite the indisputable power of colors on the human psyche, some web design color choices may do more harm than good.

So, without further ado, here are the three colors to stay away from in website design.

Pure Black

Unless you've been living under a rock for the last few years, the dark mode is a hot design trend you've simply had to come across. The light-on-dark color scheme has swept through the designs of websites and smartphone apps alike.

Benefits such as prolonged battery life, reduced eye strain, and overall modern appearance made dark mode a household name. But how dark is dark mode really?

Dark-themed websites use tones of dark grey, rather than black, as surface colors. This is due to the dark grey's ability to express a range of colors, highlight shadows, and add depth to other website elements.

Moreover, pure black is overpowering - it creates a stark contrast and causes severe eye strain. Nothing is completely black, and therefore, neither should your website.

Pale Colors

Subdued colors, lacking vitality and intensity, shouldn't find their place in your website's design. Although some might argue, these low-key choices help other colors and website elements stand out. However, pale colors actually create a washed-out appearance.

For example, bright blue or pale yellow oftentimes cause issues with hues of other colors, especially when the two are used as background. On the other hand, colors that lack vibrance and power can't be used as accents because they draw no attention from users.

Neons

They're attractive, vibrant, and eye-catching - but it's one of the design's cardinal rules not to use them on websites.

But why are neons banished from the web design world? Well, using them makes it seem as if you're trying too hard. Neon colors are not natural; they easily tire the eye and generally look unprofessional and childish.

If neons are your cup of tea, apply them to accent elements and details, never the background, titles, or text.

Web Design Color Combinations: Three Combos to Avoid

We've already established that colors are powerful and persuasive - if used correctly. You don't want to repeat the mistakes of many before you, so check out the three color combinations that don't belong on a website.

color combinations

Source: Pinterest

Brights on Brights & Darks on Darks

Check out the online presentations of some of the top website design companies - nowhere will you see a combination of two (or even worse, more) bland colors.

Besides a dull vibe, a possible migraine for the readers, and a very likely high bounce rate, a blend of bright colors will spoil your website's readability.

In other words, your readers may fail to discern the text from the background, and poor accessibility is a big no-no for your SEO in the eyes of Google.

Naturally, the same goes for combining two dark colors.

Red and Green

Now you're wondering - what about all the shopping websites around Christmas?

Well, it turns out that red and green cause deuteranopia, i.e., a type of color blindness that makes it hard to distinguish between the two colors. This happens when red and green are next to each other. However, popping another color in between should alleviate the blindness issue.

There's another reason why red and green are so disapproved of by designers. It stems from the now common usage of these two colors - yes and no buttons on errors, alerts, pop-ups. We got so used to red and green meaning confirmation and denial, that coming across them in a different setting may cause confusion.

Vibrating Colors

Blue and pink, red and purple, or green and orange are some of the highly contrasting color combinations that create a sort of a "vibrating effect." The strong saturation of these color combos makes it painful for the readers to look at, as the letters seem to "glow" or "jump" right before their eyes.

So, How Do You Approach Website Design - Colorwise?

The colors and color combinations outlined above don't work within a website setting for the following reasons: they hinder readability, are a sign of a bad style, and produce a poor user experience.

The power of color in web design is an under-researched and neglected area. But with the help of a professional, your brand can benefit from a strategic, thought-out, and examined use of colors on your website.

Mainly, the colors of your brand and website should be in line with your industry affiliation and client expectations. For example, a website of a children's playroom ought not to have blacks, whereas a financial consulting business can utilize blues to evoke confidence.

Try out different color matching tools, do A/B testing, but ultimately, if you yourself have to squint, zoom in, or double read the text on your website - there's an issue to address.


Related Articles

Post a Comment

You must be logged in to post a comment.
X

Terms Updated

We’d like to inform you that we have updated our Terms of Use. The most substantive changes are:

This platform was acquired by a joint venture in Israel.
changes have been made to the relevant jurisdiction for disputes which may arise out of your use of the platform.
Changes made to the monetization of users’ creations and the ability to opt out from your account settings.

Please view the revised Terms here. If you don’t mind anything there, then you don’t need to do anything. Your continued use of the platform will constitute your acceptance of the latest version of the Terms. If you disagree with anything there, you can terminate your account within seven days from today.