jPaq Example - Foreground vs. Background

I think one of the biggest complaints of users and web designers is the fact that many times people use background colors that are too close to the color of the text. In order to avoid this, there is a Color.prototype.getSafeColor() function of the Color class that indicates which color will appear best above the color:  either white or black. An example of this is the title of this site. You will notice that as the background of the title changes from a dark color to a light one, the color of the text changes from a light one to a dark one. In addition, if you are using a browser which supports CSS3 transitions, you will notice that the color of the text fades from one color to another instead of abruptly doing so.

The following example will change the background of the textbox to a random color while the foreground (text) will change to a color that can easily be seen in front of it:

This is a paragraph element whose background color will change every time you execute the following code.

Applicable Parts

Related Examples

  1. Shading Colors
    Making colors darker and lighter across browsers isn't always easy, that is, unless you are using a JavaScript library like jPaq.  Below you…