10 Troublesome Colors to Avoid In Your Advertising

Tara Hornor

Most of the readers on DesignFestival probably already know which colors to avoid in advertising, so for those of you who fall into this category, this article is simply to give you a bit of humor to brighten your day. However, if you are still new to advertising, or maybe there is a color combo or scheme you absolutely love but can’t seem to find success with, perhaps this article will help you see why certain colors are so bad for advertising. You may also want to check out some color scheme apps for helping you choose better color combinations.

I’m a big believer in color. I would go so far to say that all colors are beautiful, even the ones I don’t relate to very well. In combination with the right colors, they can be even more appealing and produce the right feelings in a target audience. In combination with the wrong colors, however, or used in the wrong way, all colors have the potential to simply be obnoxious. In fact, some advertisers seem to use bright, neon, abrasive, or even mismatching colors in a lazy attempt to capture attention. The problem is that these colors may initially grab attention but ultimately damage the brand and the credibility of the offer.

The following are some of the worst uses of color in advertising, both online and in print. Glance through and make sure you aren’t using any of the following simply as a short-term strategy to attract attention.

1.) Green, Yellow, or Purple on a Green Background

You would think that putting two colors of almost identical hues on top of one another would be common sense, but apparently it still happens. In this ad, it is understandable what the marketer was trying to accomplish — green and yellow are sensible choices for a landscaping ad. However, using only these colors on an ad makes it highly unreadable, both on print and on the web. The colors are simply too close together.

In fact, the worst colors to use on a green background are most shades of green, yellow, or purple. If done with the exact right shades, purple and green can create an intense design. But purple text on a green background are just that — too intense to be easily read.

2.) Light Colors on a White Background

White is already light, so adding light-colored text such as green or yellow on a white background is going to create readability issues. Thankfully, the website above didn’t go with this original design, probably due to the bad color combo. Bold text helps a little, but not much. It is always best to stick with darker shades of grey or black with white.

3.) Neon or Rainbow Colors

Both neon and rainbow color combinations are definitely eye-catching. But beyond this, they are aversive and very irritating. They tire our eyes very quickly, and mostly just end up causing annoyance instead of more positive feelings that companies want customers to associate with their brand.

4.) Colored, Textured Background with Colored Text

This is another green-on-green example that is could have been better. I’m not sure why this seems like such a common marketing mistake, except that maybe green is just a likeable and versatile color. But, even the best colors can be too much if implemented the wrong way. What I want to point out in this example is just how unreadable colored text is when placed directly on a highly textured background, especially one with a strong color. Turn down the opacity, if you must place text directly on an image. Or, place the text in a box where you have better control of the background.

5.) Red, Blue, or Purple on Black Background

Unless you really want to push the goth look, avoid red on a black background, even with images. Blue and purple are just as bad. Text in these colors on a black background are also completely unreadable. In fact, almost any color of text on a black background is hard to read, even white. Usually, you should use colored or white boxes if you need to put more than a line of text on a black background. Black is simply too strong of a color and overpowers every other color on the page.

6.) White Gradient with White Text

Gradients are terrific when used well, but as a quick trick to draw attention, it usually ends up hurting a design more than helping it — and even more so when you use the same color for both the gradient and text. And, I’d advise that you don’t ever use more than one gradient in a single advertisement.

7.) Multiple Colored Boxes

Too many different colors look bad, no matter which colors are used. Lots of hues confuse the eye, so readers don’t know where to start first. This is why one of the rules for good design is to limit the number of colors to two or three, and on rare occasion, four.

8.) Yellow, Blue, and Magenta on Red Background

Yes, yellow contrasts well with red. But in the case of a wall of text, yellow and red simply are not an appealing combination. I get a little dizzy looking at the website above, in fact. Not many designers can pull off a red background well. Just as with black, it is very overpowering and hard to balance well with other colors. And, the shade of red in the website above, #ff0000, should never be used in such large amounts.

Most designers know that blue and red are the worst color combinations possible when it comes to text, and especially blue text on a red background. The colors are both too strong and fight to overpower each other, which plays tricks with our eyes. In the example above, they also place a magenta box on the red background…not advisable. Red and magenta get placed together way too often, in my humble opinion. They are two colors that clash terribly and are no-no’s in any use, not just ad design.

9.) Bright Blue Background

Now I’m not saying that all websites with blue backgrounds are bad. In fact, some are quite brilliant. But, bright blue is another color that is just too strong for a background if not designed well. In small amounts or as text on a light background, it can be striking. Or, even just a slightly darker shade of blue works well in large color blocks. The brighter and closer to neon it gets, though, the harder it is to look at for long periods of time. As you can see with the above example, not even black looks good with such a bright background, not to mention a few other obvious improvement areas.

10.) Pale Yellow Background

The shade of yellow used in the above website is great in small amounts used in combination with brown or dark red for, say, a retro look. But, as the entire background, it simply comes across as a very unappealing hue. Yellow is supposed to cause feelings of happiness, childlike bliss, etc. This website certainly doesn’t entice such feelings, nor does the following mock bad website designed in dull orange:

Are there any other colors or color combos that you absolutely abhor? Please help make the world a more beautiful place by exposing these poor design practices in the comments below.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.bsiw.us Michael King

    Good article. I call the red text on black background the tattoo parlor look.

  • Jessica

    There was a nother article on Design Festival that discussed the workflow process with clients. The author was offering ideas on how to get the client more involved and mentioned having them pick out color palettes. I think your article is a perfect reason why they should not be doing just that. Color is very difficult to master. As a design professor, I would have students about to graduate that still needed help selecting appropriate color palettes. So thank you for the list of 10 Colors to Avoid. It’s a good place to start.

  • http://timgallantcreative.com Tim

    It should be observed that more than 3-4 colours is fine IF one is adding white or black to one of the basic hues already in play. This is a good way to subtly add variety to the page without taking things sideways.

  • http://www.webtaffy.com/Extrusions/O_N_E.html thurston blodgett
  • http://www.amazon.com/author/liorsamson/ Larry Constantine (Lior Samson)

    Good advice. Avoiding black background with almost any color for text is aesthetically sound in most cases. Red or blue on black is eyestrain city, but millions of dollars of DoD funded research concluded that white, bright green, and bright yellow text against a black ground are all highly readable and almost equal. This was the basis of the monitor screens that some of us old-timers remember well. In reverse, readability is best with black or very deep blue (not saturated) against a very pale cream or yellow,. Onscreen, black text on pale cream is actually slightly better than with a white background. because eyestrain is lower and the flare that thins type is reduced.

  • http://accessibleweb.eu Richard

    From an accessibility point of view there are recommendations for minimum levels of contrast between text and background, and it is certainly one of the most common issues found when auditing websites against the Web Content Accessibility Guidelines.

    I would always recommend checking colour combinations using the free Colour Contrast Analyser tool from http://www.paciellogroup.com/node/18?q=node/20 – recommended minimum is 4.5:1 for standard text and 3.0:1 for large text (18pt or larger normal text or 14pt or larger bold text).

    For more detail on the guidelines see http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast

    http://www.paciellogroup.com/node/18?q=node/20

  • http://docs.brightcove.com/en/ Robert

    Nice article with a lot of useful tips. You might add that brighter blues and reds should never go together — for physiological reasons: they pull eyeball apparatus in opposite directions, and it’s really tiring to look at.

  • http://www.xoogu.com/ Dave

    Some awesome website designs featured there. Just a shame the pictures can’t show off all the blink and marquee tags and animated gifs that were also undoubtedly part of the designs.

  • http://www.robertattfield.com/blog Rob Attfield

    I have seen some really horrible designs in my lifetime – the really bright colours are the worst,, as well as the rainbow ones (I do recall seeing a page like this that almost gave me a migraine).

    That said, I should probably add a colour to the content area of my blog – at the moment you can see the background behind the text.

  • http://www.designcrews.com/stationery.html Surrey Web Design

    Nice examples, most of these color combinations are really irritating. I wondered who designed such advertisements, and more fools are the people who accept these ads for their companies’ advertisement.