The Importance of Color Combinations

by | May 16, 2014

The other day, Travis came into my office and asked me to take a look at a website. (We tend to do this a lot around our office. It’s hard to shut it off.) Now, I’ve seen a lot of bad sites in my day. Some downright terrible ones, to be honest. But never in the 10 years I’ve been designing have I seen anything that was such an assault to my eyes. Now, before you think that I’m going too far with my analysis of this site, I have included a screen shot of said site below so you can see what I mean. Yes, the design is terrible overall, but the color combination is what makes my eyes water to the point where I cannot even attempt to read what is on the screen. It hurts too badly for me to even look at it for more than a couple of seconds. Now, any designer knows that this the A #1, King Puba, Head Hancho, Mother of all bad color combinations. It’s Color Combination 101. It’s the color combination that all designers are told never ever, EVER to use, which tells me whoever designed this website either hadn’t taken a design course in their life or they wanted to make people blind.

Just because your design isn’t using blue on red (or red on blue… it goes both ways) as a color combination, doesn’t mean you using the right color combination. (You’re just not breaking a cardinal rule, so give yourself some credit. You’re better than the guy who designed this disaster.) But it still might not be the right color combo to engage your audience and evoke the emotions that you are trying to. Do you have enough color? Do you have too much color (this happens A LOT)? Do you have colors that work well for readability? Do you have color combinations that might not be seen by someone who is color blind? There’s a lot to consider when it comes to color combinations and we could write a whole series of blogs on this… And not a mini series. So, instead, we’re going to give you just a couple of the best color combinations to use for optimal readability (and the least likely to assault someone’s eyes). And then some more of the worst color combinations (so that you don’t end up accidentally assaulting someone’s eyes).

#1 Color Combo for Readability: Black on White or White on Black
Why? Because they are the furthest apart in the spectrum of light to dark. Everyone can see in black and white (even dogs can see in black and white, although dogs can’t read, so don’t use this combination just for them).
NOTE: Some say that black on white is harder to read than white on black. This is due to the fact that the black floods the page and makes the white seem thinner than when the black is on white. However, it is still much easier to read than many other color combinations.

#2 Color Combination for Readability: Black on Yellow or Yellow on Black
Why? Because yellow is very close to white in terms of lightness, making it ideal to take the place of white when you need a little splash of color.
NOTE: Yellow is the most difficult color for the eye to take in, so for some, this color combination may not be ideal.

#3 Color Combination for Readability: Any Dark Color on White or White on any Dark Color
Why? Again, when you want color combinations that are easy to read, you want colors that contrast each other in lightness to darkness.

A couple more color combinations to avoid:
White on Yellow or Yellow on White – A light color on a light color makes for an incredibly strained reading situation.
Complimentary Colors – While these make beautiful combinations for some situations, when you’re putting colored text on a colored background, avoid complimentary colors. They’ll just hurt people.

Of course there are exceptions to some rules (except for using blue text on a red background – there is no excuse for that) and there are certain situations that call for designers to break the rules. However, I like to say, “You have to know the rules in order to break them.” At Transformation Marketing, we know the rules and we know how to help you apply those rules to your design. Please call us! We can help you!

(PS… If the site shown above is your site, we’re sorry for being so hard on you, but PLEASE call us!! We want to help. The site not only hurts our eyes, it hurts our hearts. We hate to see someone become a victim of poor design.)

Contact The Bean Team

  • This field is for validation purposes and should be left unchanged.
Share via
Send this to a friend