Color matters when it comes to your website, and I’d like to invite you to pull out your box of crayons or colored pencils… virtually of course. We’re going to take a look at why the colors you use are important from several different angles.
Color Psychology
This topic is a fun one because you get to step back and think about your vision, mission, and passion for your business. Color sends a subtle message that the brain can understand much faster than reading any text on the page.
The colors you use in your branding and on your website should speak to those “feelings” you want people to have about your business. There are tons of sites that go in-depth on color psychology as it relates to marketing and branding. We’ll share a couple of highlights and links. As an example:
Yellow
How can it mean both caution and happiness? The majority of cultures connect sunshine, happiness, warmth, and many times deity with yellow. As yellow is a warm color with high visibility that jumps out at you, it is the perfect color to grab attention the same way a caution sign does.
Blue
All colors have their spectrum from dark to light, and as you move along the spectrum, the resonance changes as well. Dark blue speaks to authority, dignity. Light blue on the other hand speaks to peace, serenity. And, all blues send a message of trust and loyalty.
For more, here are some sites that we think do a great job of explaining color psychology while staying out of the geek.
Increasing Site Usability with Color Choices
This is a loaded area because we’re not only working to put into practice the concepts of color psychology, we need to follow the rules so we’re not “changing the colors of a stoplight” because we think it would have a cool effect.
Using Colors with Purpose
With your brand, even if your logo has more than 3 colors, pick three that you will use on your site. Decide which one will be the main color, which will be secondary, and if you need a third for minor things. Too many colors used and inconsistent use of colors lead to confusion.
Never add color to a website just to “spruce it up”. With colors you are not only speaking to your clients, you are training them on not just the elements of your site, but where their eye should go to find important information.
- Here’s a great blueprint on how to use color on websites and apps: Material Design
- If you would like to generate color choices and preview on a demo site, try Colormind.
Improving Readability
Things have gotten better over the years, but there are a few relics out there that make your head spin… have you landed on a site with a dark blue background and red text? Or, a black background with small white text?
Color combinations and also shades of color are very important. Not only do we need to stay away from the combinations that make our eyes hurt, but about 4.5% of the population is also color blind. This means that they are seeing the world in some form of semi-monochrome.
The fix is contrast. Make sure that your content has plenty of contrast from the background color. Make sure you’re not overlaying text on a photo without doing something to make it stand out against the light/dark parts of the picture.
- Test if your color has enough contrast for readability with the Contrast Checker from Experte.com. This tool makes it so simple & has the added benefit of checking to see if your site is accessible as well.
Increasing Engagement with Color
Let’s put the pieces together that we’ve looked at so far.
- You’ve selected colors for your site that resonate with your values and the emotion you want people to feel.
- You’ve made sure that you’re not using too many colors.
- And, you’ve got contrasting colors so that anyone can easily read not only your content but buttons, navigation, etc.
Here are a final few tips to make your site visually flow smoothly.
Be consistent with using the same color for all your buttons. Or all buttons within the same purpose. Make all Call to Action (CTA) buttons the same color and as much as possible, the same size. If you can match your form submission buttons to your CTA buttons, perfect. But, if you’ve got a shopping cart, you may want your Checkout Button to stand out.
Use color to help create sections on the page. This gives people the subconscious “we’re changing topics” clue.
And, last, the big secret if you want to have people read your content — keep the background a light shade and have your text dark (larger is good as well).
Your Online Partner… for Success
Take a look at your site in light of your virtual color pencil box and the information we’ve shared. Book a free “20” session with Christy. Come with your questions and we’ll find answers and get you back on the road.
