Omni Marketing Interactive - Designing for People who Search Home    
  Site map  
  Contact us  
   
Services Clients About Omni FAQs Design tips Links and resources Request a quote
   
     Home > Design & UX tips > UX Website Design > How Color Usage Affects SEO & Conversions   
   
Tips overview
Search engine optimization
Website usability
Information architecture
UX website design
Omni photo - top
Photo - tips
Omni photo - bottom

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.

Photo of color palettes for mobile devices

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 web pages are included in a search engine index.

Creating a color palette for a website usually falls to a user interface (UI) designer or a user experience (UX) designer. Here is what people should know about color and SEO:

In This Article

Color selection for people who use search engines

As I mentioned in SEO Smackdown: Information Architecture vs. Technical Architecture, whenever I hear SEO jargon and other types of geek-speak, I quickly realize that I might not be talking to a person who truly understands the SEO big picture.

Honestly, how many web designers, UI and UX 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.

Selecting a user-friendly (and searcher-friendly) color scheme also tends to fall into the hands of technical and/or artistic staff...people who might not understand the SEO impact of color selection. Web designers and developers should understand:

  • Your website's color selection affects how your content might be interpreted and displayed by a commercial web search engine.
  • How web searchers might interpret your color selections.
  • Your color website's color selection can negatively affect conversions, accessibility, and user engagement… even with top search engine rankings.

To summarize, it is very important for you to consider your target audience, the technology your target audience uses, the psychology of color, and the corporate image you wish to project BEFORE you construct your website, printed materials, and logo.

Usability impact of color selection

As I mentioned in  Clickability/Tappability & Search-Engine Friendly Web Design, clickability and tappability a critical part of the user/searcher experience on websites.

To reiterate important points:

  • All clickable and tappable items on a web page should look clickable and tappable.
  • All unclickable and untappable items on a web page should not look clickable and tappable.
  • All clickable-/tappable-looking items on a web page should be clickable/tappable and provide feedback.
  • Don’t put a link on a page that you do not intend for searchers/users to click or tap.

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. Same with tappable and untappable text. 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 fifteen years on desktop/laptop computers, 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.

Website visitors should not have to minesweep to determine whether an item on a web page is a link. Minesweeping leads to slower task completion & higher abandonment.

Furthermore, requiring users/searchers to minesweep slows task completion. And, to be perfectly honest, if an item on your web page 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. Clarity and consistency is important to both web searchers and web search engines.

Color, legibility & readability

In my first book, Search Engine Visibility, I wrote about the 5 Rules of Web Design. The first rule is that all websites should be easy to read. Readability refers to how easy it is to read / comprehend words, phrases, and blocks of text. Of course, the rule has corollaries, such as:

  • Easy to scan
  • Clear visual hierarchy
  • Legible
  • Understandable (target audience)
  • Distinguishable

Color contrast is extremely important for legibility, which refers to how easy it is to distinguish one letter from another. The highest color contrast comes from using the two colors black and white...black text on a white background.

Some web designers like to use white text against a black background because it seems to be more stylish. In reality, this text formatting is 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, does your website 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 we 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 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, we highly recommend learning about color associations and culture.

Color associations and 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 many years teaching Asian religion, literature, and culture at two large US-based universities.

As a web designer and SEO, for example, 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 one of my favorite SEO books, 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."

Global Search Engine Marketing book cover"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.

"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),” Atkins-Kruger 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 marketers, 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 user engagement. And the improper use of color can be considered search engine spam.

Color is extremely important to searchers.

Color resources

This article originally appeared in Search Engine Land. It has been updated since its original publication.

Related user experience design (UXD) articles

If you liked this website design and user experience (UX) tip, here are more links to other user-centered design tips and articles from Omni Marketing Interactive:

You can also read our articles from other online publications.



IA

Information Architecture Services

Usability

Website Usability Services

UX design

Web
Design
Services



If you have any questions about Omni Marketing Interactive's search engine optimization (SEO), website usability, information architecture (IA), or web design services, please call us at 847-426-4256.

top