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.
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.
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.
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.
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.
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:
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
16 Comments