Color Schemes and Usability : beBit

Home > Usability Columns > Color Schemes and Usability

return to the list of columns

No.3 Color Schemes and Usability (April 4, 2001)

When designing a website with usability in mind, color scheme is one point that cannot be ignored.

Examples of Poor Color Schemes

Certain combinations of colors may make for poor readability, with the result that users may not be able to easily obtain information. First, let's take a look at A and B below.

Importance of Color Scheme

The same color is used for the text inside both A and B, but you can see clearly which is easier to read. The difference in readability between A and B is a result of the contrast (the difference between light and dark or the contrast between colors) between the background colors and the text color.

Similarly, C and D below also differ in degrees of readability due to the color schemes used, even though the same color is used for the text.

Importance of Color Scheme

Color schemes with low readability, as described above, can be very stressful to users.

Strategies for Improvement

Two points that must be considered when actually designing a site are brightness and saturation.

[Brightness]

The most important element in increasing a site's readability is brightness. Brightness is a measure of how light a color appears. In the example below, the blocks in E through F are all the same color, but nearing F, the color becomes darker.

As we observed with A and B above, a general rule is that readability improves with a greater difference in brightness between the color of the text and the color of the background.

a	a	a	a	a	a
a	a	a	a	a	a
a	a	a	a	a	a
a	a	a	a	a	a

[Saturation]

Saturation is a word that is generally used to describe vividness. When saturation is high, a color is pure. As saturation decreases, the color appears grayer. In the example below, G has high saturation, while H has low saturation.

Generally speaking, more highly saturated colors catch people's attention. By changing saturation level according to the importance of information, a website designer can create a site that enables users to easily get the information they need.

[Issues Specific to Websites]

While differences in readability arising from brightness and saturation described above are not limited to websites, there are some issues related to color scheme that are specific to websites.

Difference in appearance between Macintosh and Windows computers

In general, sites appear brighter when displayed on Macintosh computers than on Windows computers. Therefore, while you might look at a site you created on a Macintosh computer and think there is no problem, the same site viewed on a Windows computer may be too dark to read.
Individual monitor settings

Brightness varies tremendously according to the settings on the monitor itself and the monitor settings in the operating system of a computer. And, since we do not possess the magic it would take to change individual user settings, a site's appearance will always vary according to those settings.

While it is not a guaranteed method for resolving the two issues described here, checking the color scheme in a variety of environments can help.

Finally, although artistic beauty is an important factor in choosing a color scheme, consideration for readability is even more important when it comes to designing a site where users can have a stress-free browsing experience.

No.2

No.4

return to the list of columns

| Usability Columns |

| Home |