A Guide To Improve Your Website’s Readability Through Colors

Posted in Tips, Tools, Usability, Web Design3 years ago • Written by 4 Comments

Colors exist not only to make your site look pretty. Colors have a more important function – to make your site usable. A pretty site is not something to object against but when pretty colors make the text on site unreadable, this isn’t something to be proud of. This is why a designer must always think of readability first and beauty second when choosing the colors for a site.

When you think about the number of available colors, it looks easy to pick a bunch of them that go well together and are readable. If you stick with classic background colors, such as white (FFFFFF), or very light gray (F5F5F5, FAFAFA, FCFCFC, etc.) and foreground colors such as black (000000), or very dark gray (080808, 050505, 030303, etc.), or the lightest/darkest pair of the main color (i.e. red, green, blue or whatever color you are using) on your site you might wonder why readability is an issue at all. However, sooner or later you will get fed up with these classic combinations everybody is using and you will want something fancier.

This is where your problems start. These fancier combinations might be pleasing esthetically but in terms of readability they are not necessarily winners. Of course, nobody says it is impossible to find good combinations outside the group of frequently used ones. With the right tools I will mention in this article finding colors with good readability becomes much easier. However, before we go to the tools, let’s review some of the basics of colors and readability.

Color Brightness and Color Difference Determine Readability

Web design always boils down to numbers and the way you crunch them. Readability isn’t an exception. The guidelines for readability are set by the W3C and even though they (as almost any other W3C specification currently in use) are work in progress, there is a lot of criticism of the methodology, and researchers prove it wrong, it is the best we have and we stick with them. Here is the basic formula, as defined by W3C:

“Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Color difference is determined by the following formula:

(maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))

The rage for color brightness difference is 125. The range for color difference is 500.”

These formulas might look pretty cryptic and hard to understand but when you use a tool that calculates the values for you, for instance the Colour Text Legibility tool, or the Colour Contrast tool, you easily get an answer if the colors you have chosen pass the test or not.

However, unless you feel like reinventing the wheel and hunting for color combinations with good brightness and difference, you can stick to the safe choices that have already been developed for you, such as dark text on a light background.

The Golden Classics: Dark Text on a Light Background

All equal, dark text on a light background provides the best readability. Of course, it depends on which colors you choose but the highest readability ratio is achieved when you use black on white:

Black on White

As you see from the screenshot above, readability varies depending on the font size (and obviously the font itself) and a good tool will tell you if the combination you have chosen is good for titles only or for both titles and body text. Generally, the larger the font size, the more readable it is. Don’t count on this too much because as you know, for body text 10-14 is the most used size (i.e. is relatively small), which means that for body texts you won’t be able to use a color that is readable for titles.

Black on white isn’t the only great combination. If you want to see more examples of excellent to good contrast when you use white as a background color, check the first table in this article.

White backgrounds are pretty common but sometimes you will want more color. For instance, some very pale shades of red, green, yellow, blue, etc. make great backgrounds when used with black or another very dark foreground color. These combinations are not as readable as when you use black but still the ratio is good. Here are some examples of combinations where the background color is different from white and the foreground color is different from black:

For Differing Background and Foreground

Ivoryblack (#292421) on lavenderblush1 (#FFF0F5)

Midnight blue (#191970) on ghostwhite (#F8F8FF)

Sgi gray 12 (#1E1E1E) on mintcream (#F5FFFA)

One small trick many designers use to make a page more readable (and more pleasing to the eye, too) is to employ gradients for background. A gradient of white and a very pale shade of any other color works best. Well, you can’t measure its brightness and contrast using the readability formulas but if the two colors that constitute the gradient separately have good readability values, when combined, the result is even better.

The Intricacies of Dark Background

Dark backgrounds can be very depressing – not only because dark colors are traditionally related to bad things in life, at least in the Western cultures but also because they are a lot of pain to choose a readable foreground color to go with.
The problem comes from the fact that even if your contrast values are good, this doesn’t make it easier to read the text. White on black might have the best ratio but it causes eye fatigue pretty soon. As Pabini Gabriel-Petit writes, “On a black background, the high-chroma colors yellow (#FFFF00), green (#00FF00), cyan (#00FFFF), and magenta (#FF00FF) provide the best contrast.”

Dark Background Choices

If these color combinations, no matter how readable they are supposed to be, give you the feeling you are back in the 80s or early 90s when monitors were green and the text was orange, you are not alone. I have never used such an antique monitor, so I am not able to tell from experience but always when I land on a site with a dark background and light text I have to read, I get the feeling it is a time machine that takes me back two or three decades ago and my eyes are the first to object.

OK, dark backgrounds might be cute but when I have to read a 2,000+ word article (and the comments under it), this makes me cry – literally! Some sites that care about their users (and their users’ eyes) provide ways to switch colors, so if you don’t like the default dark background, you are not forced to watch it. Additionally, there are many ways to override the default colors a site uses but I’d rather visit sites that use readable color schemes than spend my time fine tuning the colors.

Probably I go to extremes, but I will personally never recommend to use a dark background with light font for sites with lot of text to read – I feel this is a usability sin #1. For other types of sites – i.e. image galleries, or even corporate sites where there aren’t 1,000+ word texts, dark backgrounds aren’t a no-no.

Those Tricky Colors That Fit Nowhere

After I discussed the two most common scenarios – i.e. dark on light and light on dark, the only thing left is to discuss all the other color combinations you can think of. These color combinations include the majority of colors but for one reason or another, you can use them neither for background, nor for text color because no matter how masterfully you combine them, either the contrast is low, or the combinations aren’t esthetically pleasing (or both).

Of course, this doesn’t mean these colors are useless. Not at all – they are great for headings, especially with larger font sizes, and for emphasis, as seen from the next examples:

Red 3 (#CD0000) on seashell2 (#EEE5DE)

Blue 4 (#00008B) on cornflowerblue (#6495ED)

Colors have a huge effect on readability. This is why you need to choose them wisely so that they not only create esthetically pleasing combinations but also make it easier for users to read the text. Text is an integral part of any site and we shouldn’t punish visitors for coming to our site by using hard to read color combinations.

7 Written Articles

I am a fulltime freelancer from Sofia, Bulgaria. I have long ago discovered that freelancing is the best option for me because it allows me to grow professionally as a writer, designer, web master, etc. and doesn't confine me to a 9 to 5 schedule. Ditching my fulltime job (and I have changed so many of them) was the wisest decision I have ever made!

4 Comments
  • Web Design

    Monday, November 21st, 2011 06:10

    1

    From my point of view a Web Design Companies with web designers ready to work for you. Best Custom small business website services in the US. View our work and request a quote ..

    0
  • Eleg

    Thursday, November 24th, 2011 17:17

    2

    For accessibility, please check contrast between foreground and background colors.

    0
  • Zorba

    Friday, December 9th, 2011 19:23

    3

    Sorry to disagree – dark backgrounds are MUCH easier on my eyes. Green on black was chosen for a very good reason. Computer monitors are NOT paper. Paper doesn’t emit light, Glaring white backgrounds do.

    0
  • Tony Kelsey

    Thursday, December 15th, 2011 06:40

    4

    When using dark backgrounds, and to maximize contrast, I always increase font size a couple points. It seems to make a big difference.

    0
  • Tony Kelsey

    Thursday, December 15th, 2011 06:40

    4

    When using dark backgrounds, and to maximize contrast, I always increase font size a couple points. It seems to make a big difference.

    0
  • Zorba

    Friday, December 9th, 2011 19:23

    3

    Sorry to disagree – dark backgrounds are MUCH easier on my eyes. Green on black was chosen for a very good reason. Computer monitors are NOT paper. Paper doesn’t emit light, Glaring white backgrounds do.

    0
  • Eleg

    Thursday, November 24th, 2011 17:17

    2

    For accessibility, please check contrast between foreground and background colors.

    0
  • Web Design

    Monday, November 21st, 2011 06:10

    1

    From my point of view a Web Design Companies with web designers ready to work for you. Best Custom small business website services in the US. View our work and request a quote ..

    0

Comments are closed.

54.242.121.134 - unknown - unknown - US