The Use and Misuse of Color in Web Pages - Index 

[Copyright 2002,2003,2004,2005,2007 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]

                                                                                                     

Introduction

When compared to other forms of Internet communication, one of the things that makes web pages more attractive is their ability to use color. However, color is also one of the least understood and most incorrectly used things on the Internet, resulting in web pages that are difficult to read, illegible if printed, impossible to display on some video systems, and in quite a few cases, just plain ugly. The abuse of color ranks in the top five flaws that appear in far too many web pages.

Even experienced artists and graphical designers make blunders when it comes to the use of color, particularly when first using the video medium. Color combinations that look great in printed matter look absolutely horrible in a web page or other illuminated display.

There are also color combinations that are perceived as the same shade of gray (or a completely different color) when viewed by the 10% of the population with some form of color blindness, and this can render the content invisible.

The artist can also be inadvertantly tricked into creating problems by developing the material using a higher resolution or a different type of video system display than what the finished product will be viewed on. Some color combinations cannot be represented when used in certain ways on television displays (including NTSC, and PAL analog transmission systems, and hybrid or all-digital ADTV, EDTV, MUSE, and HDTV systems), due to the sub-sampling of color detail that is performed in all of these systems. Images may look fine in VGA and look terrible elsewhere.

The designer of web content must also understand the difference between subtractive color (printing) and additive color (video), avoiding combinations of colors that have similar luminance levels, and limiting use of "color wheel" opposites, which are color combinations that may be encoded by the video system in lower resolution and undesired ways, or just difficult for the human eye to perceive.

The following documents discuss some of the key technical issues related to color selection for video and the considerations of such use. Numerous charts and examples show good and bad use of color. The documents are listed in the recommended reading order.


Index

Section 1: Color Television Fundamentals (NTSC)
(Just enough information to learn the important details of displaying an image with light.)

Section 2: Luminance, Luminance, Luminance!
(Learn how to select the colors and shades of gray that will actually be readable and look good at the same time. If you only have time to read one section, read this one!)

(Additional sections are still under development)

Appendix A-1 through A-4: Red Color Charts
(Each color shown always has Red as the strongest component.)

Appendix B-1 through B-4: Green Color Charts
(Each color shown always has Green as the strongest component.)

Appendix C-1 through C-4: Blue Color Charts
(Each color shown always has Blue as the strongest component.)

Appendix D-1 through D-4: Dual Primary Color Charts
(Each color shown has two primary colors of the same intensity and are also the strongest components. These are the Yellow, Cyan, and Magenta color shades.)

Appendix E: Luminance Calculator (NOT YET AVAILABLE)

Appendix F: Full Screen Color Bars
(A bigger version of the NTSC color bars shown in Section 1 on white and black backgrounds.)


           
           


Fundamental Web Page Design Flaws

* The five fundamental web page design flaws are:

  1. The use of invalid or proprietary HTML syntax, and essentially expecting a certain version or brand of web page reader will be the only one ever used to view the page. (Does the page validate? Most pages contain dozens of HTML syntax errors.)

  2. Making the assumption that the web page reader always has the ability to accept cookies and will always do so, and always has the latest version of Javascript, ActiveX or Java and will always allow them to run. (Many companies and individuals block cookies and disable Javascript, ActiveX and Java for very valid security reasons.) A web site that is completely non-functional unless the reader has a proprietary component only available for certain operating systems (such as Macromedia Flash) is a horribly designed web site, and actually violates the US Americans With Disabilities Act.

  3. Attempting to force content layout, expecting the web page reader window to be a specific size, or worse, trying to reliably ascertain the size of the reader window. (Getting this figure from the client only works as expected on a few Windows browsers, and nowhere else.)

  4. Failing to consider or evaluate the time it takes to completely download a page at a reasonable, common demominator download speed. (Having two million bytes of "cute" button graphics and banner advertisements surrounding 3,000 bytes of usable information is not a good "junk-to-useful" ratio for the 1.5Mbps DSL or worse, the 56,000bps dial-up user. Get off the 100Mbit ethernet interface on your desk for a while and try viewing your web pages using a dial-up modem with the local cache on the computer flushed, so that you can experience for yourself what people visiting your web page will have to endure.)

  5. Improper use of color - the issues that these pages discuss in detail.

Attributes of well-designed web pages:

  1. Are 100% compliant HTML so that they render properly on all web broswers, and don't use proprietary or non-standard language extensions that only render correctly on certain web page readers.

  2. Never require cookies or Javascript/Java/Flash in order to function at a usable level, and complies with US Federal law.

  3. Allow the HTML language to do its job in dynamically fitting the content to the actual viewing dimensions of the device displaying the web page.

  4. Aren't overloaded (particularly with gratuitious graphic fetches) and provide the content in usable form in seconds (as opposed to minutes).

  5. Use color when it is needed and in ways that raise readability and comphrension.


Valid HTML 4.01! 

[Copyright 2002,2003,2004,2005,2007 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]