5 Color Choices You Absolutely Must Avoid When Designing for the Web

By on May 2, 2016 in How To
5 Color Choices You Absolutely Must Avoid When Designing for the Web

Designers are always telling us “you shouldn’t do this, you shouldn’t do that”. It’s what I love most about creative folks: their willingness to help others and their desire to be forever improving in their craft.

Here are five color combinations you should reconsider using when designing for the web, and why.

1. Never Use Pure Black (#000000)

Monet never used black, so that’s reason number one right there. Impressionists understood that shadows consisted of color and they weren’t interpreted as simply “the same thing but darker”. "Black goes with everything" they say, but what they don’t tell you is that 100% black (or pure black) goes with nothing.

But how does this translate to web design?

Black is often too overpowering, and in reality, nothing is ever really 100% black anyway. Not your hair, not charcoal, not your smart television - nada. If you take a look at well-known frameworks like Bootstrap and Foundation, the Photoshop UI, the keys on your MacBook - they’re not pure black. Very few things are and our brains are not that used to seeing it.

Over time we’ve come to realize that it’s better to add some subtle color into our blacks, and even something like #111111 (cod grey) would be much more suitable for the eyes.

1-subtle-blackPin It

Why is this something I’ve never noticed before? Because we see very dark objects and assume they are black, when in reality, we visualize (but not interpret) things like impressionist art.

2. Red and Green Should Never Be Seen

I know what you’re thinking - “what about Christmas?!”, but the saying is actually a shortened version of “red and green should never be seen without a color in between”, and it’s believed to have originated from fashion-obsessed British folk (like me).

It sounds ridiculous because it is, and the real reason you shouldn’t combine the two is because of deuteranopia (as shown below), a form of colour blindness that makes it hard to distinguish between the two colours. But there is another, more obvious reason.

DeuteranopiaPin It

Red and green combinations also conflict with the notion that red means “no” and green means “yes”, as explained by behavioural science and various user experience experts, so we commonly use those colours for buttons, error messages, form helpers, alerts and so on.

Red and Green ButtonsPin It

3. Neon Colors

Neon colors in website design are aversive and all-around irritating, despite them being beautiful, vibrant, attractive colours in art and illustration. I would totally recommend their use in a retro theme, for example. Maybe in a background image that contributes to the emotion and mood of the design, but as user interface elements and text, it’s unsettling to the eyes.

Here’s a fantastic example by Art4web of neon colours being used in a web design - notice how they make up the layout’s artistic elements but the interface itself and the text is enriched with subtle, legible colour contrasts.

Neon ColoursPin It

4. Light Colors on White or Detailed Backgrounds

Hmmm. Probably the most obvious color-related design flaw, but it’s also the biggest crime amongst designers and web developers. Its most common accomplice is the rise in big image headers. This is definitely a bold way to announce your website, but extra care has to be taken with such a tricky trend to execute.

5. Bright Colors with More Bright Colors

By using bright colors on top of (or next to) more bright colors you’re at risk of inducing an instant migraine. I’m a total color junkie so I’m never going to say that you shouldn’t use bold colors, but overdoing it is a complete no-no.

If you are to wander down this road then you should approach it with minimalism and legibility in mind, like in this example by Piccsy, and it’s always useful to say this to clients when the inevitable “more color” question comes up. By using too many sharp, high-contrast hues next to each other you’re confusing the eyes and brain.

Bright ColorsPin It

Conclusion

Color is such a neglected aspect of design, and those that don’t understand color theory all that well (ahem…your know who they are) tend to override our better judgment even when we do remember these rules. So next time someone thinks he/she knows better and tells you to “make it pop”, mention some of these little facts!


Products Seen In This Post:


getpaidtowrite-banner

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

Daniel Schwarz

Following
I\'m a designer and digital nomad. I started a content company called Airwalk Studios—I\'m co-editor of design at SitePoint, writer at Creative Market and .net Magazine and 4x author. Currently selling .sketch resources and unedited photography at Creative Market.

16 Comments

  1. "never use pure black" is not an accurate statement. We ran many many tests with Pure black backgrounds and white / yellow text for newspaper ads and found they out performed other ads because they stood out from the competition.

  2. @Derek - Creativenauts Sorry, I should have been more specific. I was referring to web components and how they contrast with other web components, although I would suspect that there are a couple of exceptions to the rule even in web design. I was speaking generally.

  3. @Daniel Schwarz no worries, perhaps you should change the title of the article to include "when designing for web" or something along those lines. Thanks, was a great article regardless of my statement :)

  4. If speaking 'generally' then these 'rules' are not absolute. It appears the title of this should have referenced WEB design specifically but since it doesn't I'd hasten to say this information does not apply to print design. As someone with 25+ year experience in print design (BFA, Parsons School of Design) I'm afraid that a few of these are poor advice.

    In print, the use of black ink can be a prudent choice. Small type printed in a CMYK blend of black if not executed properly is much more likely to cause issue qualities on press.

    Basic color theory also tells us that complimentary colors (opposites on the color wheel—ie. red and green) are vibrant, attention getting combinations and while there is validity in the instinctual connection made with colors (ie. red representing stop, green representing, in some cultures) that would make it wise not to choose them for buttons I think the blanket statement that they should never be used together is ill informed where color theory is concerned.

  5. I would love to hear more on the red vs green rule and that red is used as warning vs green is used as go. Looking at the image used it is rather funny to see the Pinterest button right below which is bright red and an invitation to click through....so definitely meant as a GO button and NOT a warning. Sometimes I feel that we have used these generic statements for too long and forget how many times these rules have been broken for outstanding new possibilities.

  6. @heikeqm Colour is only one of the factors that that highlight this concept. In your example there's the button text vs. image logo debate, and I'd say that the Pinterest logo trumps what we automatically assume red means. If the Pinterest logo wasn't an image, and it was text instead, we might interpret it differently maybe?

  7. Pure black can look lovely on the web, especially when contrasted with not-quite-black. Circumstances alter cases. Rules like 'Never use pure black' have no empirical basis - they are just the author's taste. Fine - there's room for lots of different opinions - but let's not represent what we prefer as some kind of absolute. In design I've found only one 'absolute' rule: *never make absolute claims* - they just set us up for someone to disprove. (And if others take them seriously, they condemn us to yet more dreary design fads - like the recent vogues for 'flat design' and parallax effects).

  8. For, me its right perfect point, But it was depends on the colouring . How we used and for what .

  9. You left one out.

    NEVER EVER use any shade of gray for text on ANY shade of gray background. The corollary to this is NEVER use a shade of the background color as a text color.

    Oh I know it's just so cool, and all the hipsters rave about it. Guess what NO ONE outside of designers, who are clueless about usability, do this. It's a nightmare to read, and it's time that designers get a clue about what they think "looks good," versus what is readable.

  10. Another reason to avoid the red/green colour combination is due to the high incidence of red-green colour blindness suffered by quite a large portion of the male population. So for usability purposes and particularly any important info you wish to highlight ensure you avoid the red/green colour combo unless you want people to see your design as one brown splodge.

    Also @PAULA SPAGNUOLO is correct when she mentions small text in black for print.
    Be careful of the black you select in web design, especially if the graphics are to be used later in print. There are many things to be aware of using blacks, and 4 col black in print can look nasty in the case of any mis-registration by the printer.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →