The Use and Misuse of Color in Web Pages

[Copyright 2002,2003,2004,2005,2007,2008 Frank Durda IV, All Rights Reserved.
Mirroring of any material on this site in any form is expressly prohibited.
The official web site for this material is:  http://nemesis.lonestar.org
Contact this address for use clearances: clearance at nemesis.lonestar.org
Comments and queries to this address: web_reference at nemesis.lonestar.org]

Section 2: Luminance, Luminance, Luminance!

Although other factors are also involved, the Luminance value (Y) of color or black and white objects (in the foreground or background) is the crucial element to consider when determining what colors and brightness of fonts will be the most readable with what background brightness and colors when shown on television or computer images and graphics. Selecting the luminosity of foreground and background can be defined by this simple rule:

Luminance Rule 1: For minimum text readability, the difference between the luminance of a background and the foreground text should be no less than 0.50. The higher the difference, the more readable and easier to comprehend the resulting text will be.

Let's review the color bars first discussed in Section 1.

Notice that the Magenta, Red and Blue columns shown here are presented with their text in White (#FFFFFF), while the other color bars have have their text in Black (#000000). This is because the total difference between the luminance of the background for Magenta (#FF00FF), Red (#FF0000) and Blue (#0000FF) was less than 0.50, so Black text with a luminance value of 0.00 would be difficult or almost impossible to read. Similarly, white text would have been difficult to read in the White, Yellow, Cyan and Green columns, because the luminance of full intensity white (1.00) minus the luminance of these background colors was also a value less than 0.50, resulting in hard or impossible to read text.

To demonstrate the problem that was avoided above, here are the same color and gray-scale bars again, this time including both Black and White text together, so that you can see how readability is affected if foreground luminance is chosen without concern for the background luminance:

When viewing from left to right, the Black text becomes more and more difficult to read as the luminance of the background gets lower and lower and the difference between the two luminance values falls below 0.50. Meanwhile, the White font starts in the left-most column being completely unreadable (it really is there) because the two foreground and background luminance values are identical. Moving to the right, gradually the White font becomes more and more readable, particularly once the difference in foreground and background luminance begins to exceed 0.50, starting with the Magenta column.

This is an example of how to compute Y from one of the samples shown. The Magenta color in the above sample was made with the RGB combination of #FF00FF, which is hexadecimal for Red=255, Green=0, and Blue=255. On VGA displays, the numeric range for the signal strength of each color is programmed as a value between 0 and 255, with 255 being as much of the given color signal that can be sent to the video display, and 0 being no signal of that color at all. The Luminance formula described earlier is used with VGA video like this:

((Red Signal / 255) x 0.30) +
((Green Signal / 255) x 0.59) +
((Blue Signal / 255) x 0.11) = Luminance (Y)

So for the Magenta color example:

((255 / 255) x 0.30 + ((0 / 255) x 0.59) + ((255 / 255) x 0.11) = 0.41 = Y

(The source code to a program that will perform this calculation is provided in Appendix E.)

The equivalent shade of Gray shown in the samples above was computed by converting the Y formula back into a single VGA signal value, and then that number was used for the Red, Green and Blue signal strength values, like this:

Y x 255 = VGA_Y

For our value Magenta Y value that we just computed, the math would be 0.41 x 255 = 104.50. Round that result to 105, then convert that value from decimal into hexadecimal to get 0x69. Then set Red, Green and Blue to 0x69, which in HTML coding appears as #696969. This gives you the shade of gray that will appear when the Magenta color is shown on black and white equipment or printed as a gray-scale on a black and white printer.

Since we just used color fonts on a monochrome background, this is a good point to state the second rule of Luminance:

Luminance Rule 2: Having the foreground objects presented in color while using a monochrome background, or any other combination* of color and black and white, does not allow you to avoid Luminance Rule 1.

* That includes using color for both foreground and background, or using black and white for both foreground and background.

Not only can you not evade the Luminance rules by using color foreground components (like fonts), one or more Chrominance rules also come into play when color text is used or multiple colors are used adjacent to one another. Additional rules specific to the use of color are described in a later section.

The Luminance Rules won't let me do anything!
(Actually, they really will, if you just let them!)

The Luminance rules might seem to be an enormous creative constraint, but the rules actually make it easier to test your color combinations for visibility problems in a scientific and consistent way. As to thinking that you can't use Blue backgrounds and Black text anymore (or some other favorite combination) if you follow the rules, there is a solution. By using different shades of a given color (instead of only using the maximum saturation of colors, especially Green), you can boost or reduce the effective luminance of the foreground or the background to achieve that 0.50 luminance difference and still use a wide variety of color combinations, some of which may be even more eye pleasing than the pure primary color.

For example, every one of these shades of Blue and the accompanying black or white text are compliant with the Luminance rules (and many more compliant combinations exist):

Because of its limited luminance range, Blue is definitely the most difficult color to provide a wide variety of high luminance choices, but there at least 11 shades of Blue in the 216 basic VGA colors that have a luminance value greater than 0.50. Also, don't be afraid to mix foreground luminance choices (say, using both black and white text, as was done in this example). Most people barely notice the difference, and you may be able to use the change to help draw attention to certain display items (those that have light text versus dark).

Here are a few similar shades available for the color Green.

It should be mentioned that when the background luminance value is within 0.03 of 0.50, the "wrong" selection for the foreground may provide marginally better readability, particularly when the background color is mainly composed of the Green color. For example, the green shades #00CC33 and #00CC00 both have luminance values that are just below 0.50, but if white foreground text is used, it is not nearly as readable compared to black foreground text.

Here is that last line of samples again, showing what happens when the opposite (and rule-violating) luminance values are substituted:

What this really demonstrates is that it is always best to select foreground and background luminance combinations where the luminance difference is as large as possible, as stated in Luminance Rule 1.

Here are a few luminance compliant combinations available for the color Red.

The following charts show some shades resulting from using two primary colors at equal strengths, and the resulting compliant luminance combinations.

The Luminance Rules described here are not a new discovery. Consider the Interstate highway marker, which has been used now in the United States for over fifty years. These markers consist of a saturated shade of Blue and Red in the shape of a shield (the background), and these markers always have White lettering (the foreground). The designers of this highway symbol were aware of the Luminance Rule and selected White Markings for best readability, even though many other types of highway markers use black lettering.

"Stop" signs are another example where the background color (Red) is just too dark to support black lettering, so white lettering was used, and few people even notice the difference. Highway "Informational" (Blue background), "Recreational" (Brown background) and the "Green" sign all require white lettering in order to comply with the Luminance Rule. Highway "Regulatory" (White background), "Cautionary" (Yellow background), "Construction" (Orange background), and "Accident" (Pink background) signs always use black lettering because the background of these signs have a luminance value greater than 0.50.

A Word about the Basic 216 Colors and their use in these pages

To allow images to be displayed by both SVGA and higher-end equipment (notably color systems built by Sun, Apollo, Apple, IBM and others), a standardized list of 216 colors was developed that would be available by default on several major operating systems when the video was operating in a mode that only allowed 256 different colors to be displayed. This helped insure that colors displayed by one system could be identical when a limited pallete of simultaneous colors was available on some other system, and this interoperability was instrumental in making early web browsers work well on different types of computers and operating systems.

The Basic 216 colors represent all numerical combinations that can be produced from the Red, Green and Blue intensity values of hexadecimal 00, 33, 66, 99, CC and FF, beginning at Black (000000), incrementing through each combination, as in 000033, 000066, 000099, 0000CC, 0000FF, 003300, 003333, until finally reaching White (FFFFFF).

For example, FFCC99 is one of the basic 216 colors, while FFCC75 is not, and FFCC75 may not display as expected on a video system with limited color "depth". When directed to display a color other than one of the basic 216, limited video color systems will usually pick the closest of the 216 set and use that value instead, so FFCC75 would probably be displayed as FFCC66.

Even in modern video cards that can display several million different colors at the same time, that may only be true at lower video resolutions, such as 640x480 or 800x600. Increasing resolution to 1600x1200 or other high sizes may reduce color depth of a given video display system back down to 256 possible colors, causing the Basic 216 system to be applied again.

Since it is possible for a web browser to be running on a system that can only display 256 colors that may be trying to display your web page, this can cause problems when a non Basic 216 color is specified. In that event, a darker or lighter color than specified may be displayed instead, and that substitution could cause the luminance rule to be violated on that display, which would make text difficult to read on that system.

A similar problem exists when computer video is converted into NTSC or a MPEG video format. Color depth is drastically reduced by chrominance bandwidth limits in NTSC, and by compression filters in MPEG encoders. Subtle differences in color shades will be completely lost, so using values outside the Basic 216 is usually a futile effort, with FFCC99 and FFCC98 and even FFCC82 all looking identical on a NTSC or HD video display.

Subsequently, web page developers should always try to stick to the basic 216 colors for as much of the HTML color foreground and background color selections as possible, and compute their luminance values from those color choices (or use the pre-computed values shown in the tables listed below). Conveying information by subtle chrominance shade changes should be avoided.

Photographs and other bit map images used in web pages have related issues on limited resolution displays (including NTSC & MPEG-encoded video systems) and these issues are discussed elsewhere.

(Except where specifically stated, only the Basic 216 color combinations are used in these documents.)

Section 1: Color Television Fundamentals (NTSC) (Previous Section)
Section 3: Not yet available (Next Section)

Appendix A-1 through A-4: Red Color Charts
All basic VGA compliant Red and Black/White text combinations.
Appendix B-1 through B-4: Green Color Charts
All basic VGA compliant Green and Black/White text combinations.
Appendix C-1 through C-4: Blue Color Charts
All basic VGA compliant Blue and Black/White text combinations.
Appendix D-1 through D-4: Dual Primary Color Charts
All basic VGA compliant Dual Primary Color and Black/White text combinations.
Appendix F: Full Screen Color Bars
These are useful for computer monitor or video alignment when a real color bar generator isn't available.

Return to The Use and Misuse of Color in Web Pages - Index

[Copyright 2002,2003,2004,2005,2007,2008 Frank Durda IV, All Rights Reserved.
Mirroring of any material on this site in any form is expressly prohibited.
The official web site for this material is:  http://nemesis.lonestar.org
Contact this address for use clearances: clearance at nemesis.lonestar.org
Comments and queries to this address: web_reference at nemesis.lonestar.org]