Websites and blogs should care for text color

In an earlier post on ‘text display in blogs and websites’, we discussed size, font and formatting aspects of text. The present post is devoted to color aspect of text. Since text color and other text attributes impact each other, these should be considered together. We suggest that you browse that post too while reading this one, since many recommendations we made there relate to color too, and we’d not repeat them here.

Is text color that important for blogs and websites?

Text color [=colour] is a much neglected design element in blogs and websites. We don’t remember having rejected any blog exclusively for wrong text color, while compiling the Indian blog directory, but we did downgrade quite a few when we found the text unreadable due to weird color combinations.

fig 1

When deciding the template and color theme for your blog or website [or any other web presence], you must keep the font color high in priority, especially if your website has (i) prominent text display and (ii) a lot of text to read.

The text color is also important for printing. Text in too light colors, too less contrast and that over images may not print well, especially in black-and-white prints.

Text in unusual colors and color-combinations may render poorly on some computer screens and mobile devices.

How much text coloration is optimum?

Text color is a function of overall blog color and appearance. In a fun blog with lots of color or a website for kids, text could be in funky colors while in a serious blog, we’d like to see text in only one or two muted colors.

In general, there should not be too much text color variation. Too much change in text color  impairs readability and irritates the reader.

Coloration of text of different elements should not be arbitrary. What it means is that the same type of elements should have same colors, e.g. all headings or sub-headings should be in the same color.
Choosing colors and their combinations 

Have a look at the colors used by popular websites and blogging platforms such as Wordpress and Blogger (fig 1). Do you observe that they all use light backgrounds [white / light grey / light blue-grey] and darker fonts [ black / dark grey / dark blue] for general purpose and reverse for buttons? Do you also see the use of a sharply different colored text for ‘call to action’?

Well, in some cases, they too make the color so muted or text so thin that it hurts readability.

When text is written on light surfaces, its colors should generally be in darker shades that do not glare. Avoid pure bright shades of red, pink, green etc as they look too shiny. Use darker shades of muted colors; they look good as text colors as well as backgrounds (fig 2: G, H, I). Backgrounds of muted colors also have the beauty that you can use dark as well as light text on them (fig 3).

fig 2

While the text in darker shades of grey, dirty yellow, blue, etc looks fine, do avoid small text in light shades. They look washed and dull, even blurred (e.g. if the color of the B and C marked rectangles in fig 2 is used for text). If you like the trendy greys (e.g. color of F rectangle in fig 2) for text, use them with care.

fig 3

Note that light text on dark background tends to lift the text. Similarly, text of warmer hues [red, orange, yellow] tends to pop up when it is placed over cooler hues [blue, green]. This can be used for highlighting text such as a ‘call for action’ in an advertisement. But not all such combinations fit; some color combinations create optical illusions and so should not be used. Fig 4 shows how text in warm and cool colors pops up or sinks; it also shows wrong color combinations.

Text on dark backgrounds should usually be in pure white or in a light shade of the background color. Light-text-over-dark-background should be used rarely, e.g. for buttons, widget headings, and small blocks of text needing special emphasis. See fig 1 above: many sites effectively use white on dark blue or similar colors in buttons.

Some colors tend to bleed, such as red. Some colors sucha as red, pink, light green, cyan and yellow dominate too much due to their brilliance. 

fig 4

Do not shade or emboss long passages of text. Even when you do so, choose the shade color with care. Leave this effect only for titles, small headings, a small quote or other small chunk of text that you want to specially highlight.  

If embedding text in an image or putting text over the background of a photograph, go for a color that contrasts well with the general hue of the background image. It is better to darken or lighten the image before applying text into it. But if the image has myriad shades and colors all over [‘busy’ background], use white or black color [and if needed, selectively make it black / white over different backgrounds – but too much of it will look unprofessional]. 

Text coloration in blog posts

As far as possible, keep the main reading pane of the blog light. If the blog is text heavy, keeping the background a little greyish rather than white makes it more soothing.

All blogging platforms allow variations of color of link-text, and text when cursor is hovered over it. Keep different versions of the link-text properly readable. Often the linked text tends to change color when clicked and the change stays all through the current session of browsing that website. If you’ve not taken take care of the color changes, it might hamper readability and irritate the reader.

Do not put yellow, green or other background behind text to highlight it unless you have a strong reason to do so; use a different text color / underline the text / make the text bold / change font. Even if it is required, limit it to the standard yellow highlight on black text. 

You may like to visit the ITB post on text in websites / blogs for formatting and other aspects of text.

Another very relevant series of posts is on pictures in blogs.