
This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.
Tips
Color Considerations
Colors in HTML
Generally, it is best to let each reader choose those text and background colors that look best to his eyes on his computer screen and to his personal tastes and customs. If, however, you as the author wish to use certain colors for certain purposes, then you should consider the following practical hints:
- If you define a text color, always define a contrasting background color. If you don't, then for example a user who has set his screen to white-on-blue might end up getting blue text on a blue background.
- If you define the color for some parts of the text, define fitting colors for the rest of the text, too.
- Do not use all the 16 millions of different colors that can be expressed with the #rrggbb scheme, but only those 216 colors that are constructed from combinations of the hex values 00, 33, 66, 99, CC, and FF, which will be rendered well on most color screens (the "Netscape color cube").
- Do not forget to use additional markup like <strong> or <em> for those cases where readers will not be able to see the colors - either because their browsers or printers do not support all the colors you want, or because they are colorblind.
Here is an example how you should combine the old standard tags <em> and <strong> with the new standard tags <font> and <body> and with style sheets such that you will achieve the desired effect on the highest number of browsers.
Let us assume that you want your company's name to appear in blue and boldface, strongly emphasized, and that as contrasting colors you choose white for the background, black for normal text, and dark red for hypertext links.
In your HTML file "enzian.html", you use the following combinations of tags:
<html> <head> <title>Big Enzian</title> <link rev=made href="webmaster@www.enzian.com"> <link rel=stylesheet href="enzian.css" type="text/css"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#990000" vlink="#660000" alink="#FF0000"> <h1 class=enzian><font color="#0000FF">Big Enzian</font></h1> <p> The company <strong class=enzian><font color="#0000FF">Big Enzian</font></strong> is the best … </body> </html>
The corresponding style sheet file "enzian.css" contains the following specifications:
BODY { color: black; background: white } A:link{ color: #990000 } A:visited { color: #660000 } A:active{ color: #FF0000 } .enzian { color: #0000FF; font-weight: bold }
Note that it is better to use an external style sheet file, referenced in the <link> tag, rather than using <style> and </style> tags within the HTML file itself, since the embedded style specifications might erreanously be rendered on the screen by some non-standard-conforming browser versions like Netscape 1.x.
--Hubert Partlpartl@mail.boku.ac.at ZID BOKU Wien http://www.boku.ac.at/
Colors in HTML