The Color Red in Blog Design

Color is a major factor in how visitors respond to your blog’s design. Incorrect use of color may cause the wrong aesthetic or emotional reaction. You can’t assume all readers see and like the colors that you select. Some unexpected responses are subconscious, rooted in the visitor’s psychological and cultural influences. Poor color contrast and combinations actually inhibit navigation of your blog, especially for those who are colorblind. Use color wisely to draw visitors into your blog and help them find the content they want. This posts looks at some issues around color choices for your blog, using red as an example.

Color Psychology & Connotations of Red

On color psychology, Wikipedia says “In one system, red is considered to motivate action;…” Certainly in nature, red spots on an animal often trigger the flight reaction. Ads that use red invite you to read more. As for red in your blog’s overall theme, some visitors may feel you are signaling danger, extreme levels of excitement or aggression. Wikipedia has a full list of common connotations of red in Western culture. Contrast that list with how a Chinese visitor may interpret a predominantly red blog: happiness, beauty and good luck, symbolized by sun, fire, and life-giving blood. Here’s a quote from the Pantone Guide on feeling color:

The psychological association that goes back to the beginning of time is the association of red to blood and fire, two very important elements that are necessary to sustain life.”

The guide goes on to say there are some cross cultural generalities we can make about color especially white, black and red. Even a non-American blogger may be worried that male readers might not like pink text. I’m sure you can think of other examples which may be the result of exposure to other cultures.

Red in the Color Palette

The color red and its nearby hues can provide warmth and visual interest in your blog. Even purple retains some of the fire. Using red, your blog can attract the eye to things you want to highlight. Red makes an intense statement, especially in the background or header. I visited such a blog, arriving directly on one of the posts. Instantly I knew the content or at least the words were a bit mature for me (and I’m well over 21!).

Why was there no warning? Then I thought, maybe the red header was a warning! I later learned there is a warning, but only when you go directly to CultofQelqoth‘s home page.

It even has green and red buttons for entering or taking flight! With the proper level of sarcasm!

When asked why he used such a large header with white letters on a red background, as well as prominent ad spaces in red. He replied:

As for why I use red …, I suggest doing a Google search on “News of The World”, (racy tabloidish…), ‘The Daily Mirror’ — British tabloid, and ‘The Sun Newspaper’. It’s basically a parody of the substandard tabloids we have here in the UK.

In the UK, red can symbolize health (rosy cheeks), danger, anger or power (tabloids?). As someone raised in the USA, my reaction to that blog’s use a red header, turned out to be very different from what he intended.

Color Blindness

It might surprise you to know there are web designers who are colorblind. They design for all visitors, and may even use red for people with normal vision (visual interest). They are careful to keep colors separate, avoiding confusion around key information needed for navigation, searches or RSS feeds! Post titles with red text are okay against a white background. Here’s an example, the Colblindor blog’s header as seen by visitors with normal vision:

This is what the designer & colorblind would see (notice menu is still clear):

Colorblindness is a complex topic*, but the bottom line for bloggers should be removing any unintentional obstacles. About 8% of men and 2% of women are color blind. They find it difficult to see mixed shades of red and green or blue and yellow in close proximity. Can you afford to lose even one subscriber or happy reader? Luckily there are tools that let us see what the colorblind person sees, or doesn’t see – try this color filter. Make sure your key content is easily visible. If the filter turns red to a color with enough contrast against your background then your blog passes! *For more informations and tools visit Daniel Flück’s Colblindor site.

Summary

So, what’s an international blogger to do? You can’t design for every reaction or visual impairment. But at least:

  • Know your audience and content. If your blog has an overwhelming predominance of one color like red, then ask could it be misinterpreted and what value does it add to your content or navigation? Especially, look at any negative impact of full background images behind your posts or archive widgets.
  • Use color sparingly, keeping your most important content more neutral. When a visitor lands on your page, don’t offer too many distractions. Less may be more, i.e. more subscribers!
  • Help colorblind visitors find your content. Take a look at this exceptional graphic showing normal color perception and the eight types of colorblindness affecting 10% of readers.
  • Hold back your own personal color preferences and focus on your reader (content is king). When you use color text and or background, make the text dark on a light backdrop.

You may also be interested in other posts related to blog design.
Choose Your Template Wisely
How does your blog look in candid shots

I’m anxious to hear your thoughts on this topic and how your blog looked on the color filter test!


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


16 Comments

  1. It is amazing the power of color. Too many people disregard it. I should probably pay more attention to it too… eek!

    I remember a tacky orange glob that represented a wireless company…
    Orange equates with cheap.

    ~the GURU

  2. This is an outstanding post, says the visually challenged blogger leaving this comment. It never fails to amaze me how few designers and bloggers actually take the time to consider both colour psychology and the challenges that visually impaired blogger faces as a reader.

    I would also like to compliment you on the change you made to the background colour behind your posts I no longer have to struggle to read them. YAY!

  3. Thanks for the link lurve.

    What I found interesting was that URL, the one which lets you see how someone with colour blindness would see your website.

    But with exception to the main banner (which I wouldn’t change unless I really felt like it), there wasn’t much difference at all.

  4. Good post, I never even considered color blindness and I have been building highly accessible websites for 10 years.

  5. I really appeciate all of your comments!!!
    @Small Biz – Glad to get your attention; sorry for the orange flashback!

    @TimeThief – I’m glad you hung in there then. would not want to lose you. Stay tuned, I have lots of research notes on visually impaired (and mouse challenged) readers. I didn’t forget your earlier comment on another post.

    @Qelqoth – Thanks. Had to consult my urban dictionary for ‘lurve’ (XOXO to you too!)

    @Dwacon – Glad you stopped by, don’t be a stranger

    @Chris Lang- I too have taken a look at some of my websites! especially for visually impaired. Thanks for stopping by.

  6. I apologize for giving you and odd answer in my shout back to you and for posting here. I now have a subscribe by email option on my blog via feedburner. I had a hell of a time locating you because your BC username and your blog title and SBA bear no relationship to each other and I had cleared my shoutbox so I could not recall what your Blog Catalog username was. That’s why I’m posting here. Yikes! I apologize for the confusion.

  7. @Time Thief – no problem. I wanted to use ‘SBA’, which is my Google id, on BlogCatalog but it was taken! So I use ‘BPWebNews”. Good topic for a post… LOL.Guess I should put the id(s) somewhere on my blog. Thanks for the email option on your feed.

  8. I agree, color tells much about a blog/website. Keeping things simple with colors that compliment each other is important. Allowing text to be read first and foremost is key.

    Great post!

  9. I had never thought of the choice of color being an important factor to blog design. I always think that as long as the color matches each other, it is good enough. This post shows me that there is more to colors. Thanks!

  10. @Ravon – glad you picked up something new. I visited your blog and left a shout question. Will check back later. Good Batman (Dark Knight) review.

  11. I’m back and after much deliberation, I’ve decided to change my banner. Just thought you’d might like to know. 🙂

  12. @Qelqoth – I took a peek (afraid to open my eyes too much LOL) and it looks good! I’m sure you’re happy to know that none of the banner’s stark innocence detracts from your “satirical news and humor.” It rather adds to the surprise. Thanks for letting me know.

  13. Red is known as a danger because it increases the adrenaline. Red can be a sign of danger, but can also show us the power and passion it carry, the dark red can give a romantic.

    Good post, you let me know more about color usage. Thanks.

Comments are closed.