How Does Color Usage Affect SEO & Conversions?
Many search engine optimization professionals have different interpretations of the term search-engine friendly website design. Learn how color affects your SEO efforts and conversions.
Many search engine optimization professionals have different interpretations of the term search-engine friendly website design. To some, it means crawlability — making sure that Web content is accessible to the commercial Web search engines. Other SEO professionals believe that search-engine friendly design is indexation — making sure webpages are included in a search engine index.
As I mentioned in SEO Smackdown: Information Architecture vs. Technical Architecture, whenever I hear certain geek-speak, I am reasonably sure that I am not talking to a person who truly understands the SEO big picture.
Honestly, how many Web designers commonly use the SEO jargon of crawlability and indexation?
Website design and development are two unique skill sets that often overlap. Some artists and graphic designers have incredible technical skills and vice-versa. Color selection often falls into the hands of both technical and artistic staff.
To both designers and developers: do you understand that your color selection affects how your website content might be interpreted and displayed by a commercial Web search engine?
Do you understand how Web searchers might interpret your color selections? Do you understand that your color selection can negatively affect conversions… even with a #1 search engine ranking?
Usability Impact Of Color Selection
As I mentioned in a previous article, Clickability and Search-Engine Friendly Web Design, clickability is a critical part of the user/searcher experience.
To reiterate important points:
- All clickable items on a webpage should look clickable
- All unclickable items on a webpage should not look clickable
- All clickable-looking items on a webpage should be clickable and provide feedback
- Don’t put a link on a page that you do not intend for searchers/users to click
I am certainly not saying that every text link needs to be formatted as blue and underlined. Not at all. I am saying that clickable and unclickable text should not be formatted the same way. To a search engine, it might appear as if you are trying to hide links from users but not search engines.
“But Shari!” I hear many Web developers and designers alike exclaim with the requisite eye roll. “That design principle is Sooooo outdated. People will figure out what to click on after they put their cursor/mouse/finger on the text.”
What these designers and developers are describing is called minesweeping. According to Usability.gov, minesweeping is:
“An action designed to identify where on a page links are located on a web page. Minesweeping involves the user rapidly moving the cursor or pointer over a web page, watching to see where the cursor or pointer changes to indicate the presence of a link.”
I’ve personally conducted usability tests for over ten years on desktops, mobile phones, and tablets. I’ve observed, first-hand, who minesweeps for links and who doesn’t. Do you know the group who genuinely likes to minesweep? Children.
Now my next question to you is this: does your target audience include children? I didn’t think so.
Furthermore, requiring users/searchers to minesweep slows task completion. And, to be perfectly honest, if an item on your webpage does not look clickable, most users/searchers won’t click on it.
So, if you are going to use color to indicate clickable and unclickable elements, please use them consistently. Don’t confuse both searchers and search engines.
Color, Legibility & Readability
In my first book, “Search Engine Visibility,” I wrote about the five Rules of Web Design. The first rule is that all websites should be easy to read. Of course, the rule has corollaries, such as:
- Easy to scan (visual hierarchy)
Color contrast is extremely important for legibility. The highest color contrast comes from using the two colors black and white. Some Web designers like to use white text against a black background because it seems to be more stylish, but it is actually more difficult to read and can lead to lower conversions. If you make content too difficult to read, it does not lead to the best link development. And, as we all know, link development is still a key component of the SEO process.
And, do you use colors that have low color contrast, such as light gray text on a white background? Or, did your Web designer set your text size too small to read (which I commonly see in mobile designs)? That would be considered a form of search engine spam, even if the text were barely legible.
If I am working on a website that implements responsive design, for example, I make sure the font-size never falls below a certain size. Sacrificing legibility and readability for simpler coding isn’t a very user-centric approach.
Color must also be understandable and easily interpreted. “Color communicates a message by association,” said Flint McGlaughlin from MECLABS in his recent webinar, “How Do Website Colors Impact Conversion?”
The color blue can have many different meanings. Navy blue can communicate professionalism, security, trust, and dignity. Aqua blue has a different message (whimsical, cool, tropical, water). And a soft, light blue can often feel more feminine than masculine.
So, always keep color contrast in mind so that your site is easy to read and easy to interpret by both searchers and search engines. In order for your website’s color scheme to be understandable, you should also understand color associations and culture.
Color Associations & Culture
“Most international marketers know they need to handle the broader cultural issues rather than just language, said Andy Atkins-Krueger, CEO of WebCertain. “But not so many can easily define culture. For me ‘culture’ is our home environment, the one we’re used to and when things look a bit odd – when we’re browsing the Web, for instance, and seeing strange websites – then that’s probably because what we’re looking at has been created by someone with a different home culture.”
Some people might not know this about me: my master’s degree is in Asian Studies (Japanese), and I spent some years teaching Asian religion, literature, and culture.
As a Web designer and SEO, I know that the color red communicates happiness in China; anger and danger in Japan; and life and creativity in India.
When I design websites whose target audience is outside of the US, I rarely use the same template and color scheme.
Here’s a quote from my favorite SEO book of 2012, “Global Search Engine Marketing: Fine-Tuning Your International Search Engine Results”:
“Even Baidu notes ’Chinese culture has some identity-forming meanings that affect user behavior strongly, namely in color, number, symbol, language, and so on.’”
“I have found that the color red is not as negative as in the US. I have found American designs be much based on the color blue while Scandinavians are more open to multi-colors,” said Kristjan Mar Hauksson, Director of Internet Marketing at Nordic eMarketing and co-author of “Global Search Engine Marketing: Fine-Tuning Your International Search Engine Results.“
“You really need a whole list of potential cultural issues – or you could call them trust factors since working with someone within their culture builds trust which means they’re more likely to buy,” said Atkins-Kruger. “The problem is that culture isn’t just one thing. It’s not just the colour selection, the language, the currency symbols, the complexity or simplicity of the page, reading right to left instead of left to right, calendar formats, forms, zip code formats or alternatives, credit card symbols, delivery timescales, image content or any of the other hundreds of small items. It’s all of them. It’s their combined effect. It’s the answer to the question, “are we among friends?”
“So for example, in southern Ireland or Eire, there are no postcodes at all (don’t make them mandatory),” he continues. “In Thailand, purple represents mourning whereas the west associates the colour with Royalty. If you don’t accept Union Pay credit cards in China, you almost certainly won’t do any business. When western companies change their template from left-to-right reading, to right-to-left, they frequently forget to change the calendars. And dates in the UK are not presented in the same way they are in the US.”
So, Search Engine Land readers, please consider how you implement color on your websites. Color is a very large part of search-engine friendly design. Color affects link development. Color affects conversions. And the improper use of color can be considered search engine spam. Color is extremely important to searchers.
- Provide Consistent Clickability Cues.
For research and examples about minesweeping.
- Avoid Misleading Cues to Click.
For research and articles about clickable links.
- Lighthouse International.
Worldwide organization dedicated to overcoming vision impairment through rehabilitation, education, research and advocacy.
- Color: Designing for a Global User Experience.
Webinar about color and culture from one of my favorite speakers and authors, Molly Holschlag.
- Kennedy, Anne F.; Hauksson, Kristjan Mar (2012). Global Search Engine Marketing: Fine-Tuning Your International Search Engine Results. (Que Biz-Tech), Pearson Education (US).
Opinions expressed in this article are those of the guest author and not necessarily Search Engine Land. Staff authors are listed here.