CWP C Christian W Web P Programming

Web Site Theme Creator Web Site Theme Creator

  • • Requires a JavaScript-enabled browser.
  • • Best with 1024-pixel-wide display or higher.
  • • Internet Explorer can be up to ten times slower* than
    alternate browsers; alternate browser recommended.

Font Picker

Recommendations:
  • • Don’t choose more than two different fonts for your web page. 
    (It’s OK if your logo or header uses an additional font not shown here.)
  • • When using two fonts, it is common to select one serif font and one sans serif.
  • • View the results immediately in the Theme Sample below.
Font H
Font Name Sans-serif Font Sample
Arial A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Arial Black A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Arial Narrow A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Comic Sans MS A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Impact A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Lucida A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Tahoma A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Trebuchet MS A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Verdana A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Font Name Serif Font Sample
Courier New A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Georgia A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Times New Roman A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z

Inverse Highlight Text

  • Sans Serif Fonts
  • Arial
  • Arial Black
  • Arial Narrow
  • Comic Sans
  • Impact
  • Lucida
  • Tahoma
  • Trebuchet MS
  • Verdana
  • Serif Fonts
  • Courier New
  • Georgia
  • Times New Roman
▼

Highlight Text

  • Sans Serif Fonts
  • Arial
  • Arial Black
  • Arial Narrow
  • Comic Sans
  • Impact
  • Lucida
  • Tahoma
  • Trebuchet MS
  • Verdana
  • Serif Fonts
  • Courier New
  • Georgia
  • Times New Roman
▼

Default Text

  • Sans Serif Fonts
  • Arial
  • Arial Black
  • Arial Narrow
  • Comic Sans
  • Impact
  • Lucida
  • Tahoma
  • Trebuchet MS
  • Verdana
  • Serif Fonts
  • Courier New
  • Georgia
  • Times New Roman
▼

Theme Sample

Large Bold Inverse Highlight Text
Size 1 Inverse Highlight Text
Inset from Highlight
Large Bold Highlight Text
Size 2 Bold Highlight Text
Size 1 Bold Subheading
Size 1 Default Text
Size 0 Default Text
Size 1 Unvisited Hyperlink
Size 1 Visited Hyperlink
Inset from Background
Outset from Background

Color Picker

Options

Quick Start
  • • Choose either “Dark Backgrounds” or “Light Backgrounds”.
  • • Select a Background color by clicking on the color you like in the Color Table and selecting the BkGrd option.
  • • Once you have a Background color you like, select “All Colors”.
  • • Select all of the remaining colors for this theme from the Color Table using the same method.  For example:  click on the color you like for Text and select the “Text” option.  If you change the Background color, the Color Table also changes and you will have to choose all new colors (except Backdrop) from the new Color Table.
  • • If there are not enough colors to choose from, reduce the “Step Size”.  If there are still not enough available colors, start over with a different Background color.  Very bright and very dark Backgrounds allow the most color choices.
  • • Normally, you would choose a bluish color for “Unvisited Hyperlink” and a violet-ish color for “Visited Hyperlink”.  However, feel free to choose other colors when necessary.  Here is an example of a color scheme that uses different shades of blue — one true blue for highlight text and another cyanic blue for the hyperlink.
  • • If the Backdrop color you want is not shown, you can uncheck “WCAG Colors Only” and choose a Backdrop.  Be very patient while the full Color Table loads.  Make certain to re-check “WCAG Colors Only” when you are finished.
  • • Any colors you type in are not checked for WCAG compliance, so only type in colors when you are certain that they meet the WCAG standards.  Such colors should be “in between” colors displayed in the Color Table.
Color Pool H
Sorting H
Sort Order
Theme Colors H
Background Text Unvisited Hyperlink Visited Hyperlink Highlight Subheading Backdrop
Red Grn Blue Red Grn Blue Red Grn Blue Red Grn Blue Red Grn Blue Red Grn Blue Red Grn Blue
Background Border Colors:     
Highlight Area Border Colors:     

Theme Sample

Large Bold Inverse Highlight Text
Size 1 Inverse Highlight Text
Inset from Highlight
Large Bold Highlight Text
Size 2 Bold Highlight Text
Size 1 Bold Subheading
Size 1 Default Text
Size 0 Default Text
Size 1 Unvisited Hyperlink
Size 1 Visited Hyperlink
Inset from Background
Outset from Background

[AAA]-Rated Colors

White Red Or­ange Yel­low Yel­low-
ish Green		 Green Cy­an­ic Green Cyan Cy­an­ic Blue Blue Pur­ple Vio­let Pink

[AA]-Rated Colors

White Red Or­ange Yel­low Yel­low-
ish Green		 Green Cy­an­ic Green Cyan Cy­an­ic Blue Blue Pur­ple Vio­let Pink

[AA Large]-Rated Colors

White Red Or­ange Yel­low Yel­low-
ish Green		 Green Cy­an­ic Green Cyan Cy­an­ic Blue Blue Pur­ple Vio­let Pink
* The following approximate times were recorded on my system.  Time was measured with the All Colors color pool selected with a white background.  Time is how long it takes to display the Color Table when switching from a Step Size of 51 to the Step Size indicated.  Lower numbers are faster.
Step Size Change
Browser 51 → 32 51 → 16 51 → 8
Browser 51 → 32 51 → 16 51 → 8
Step Size Change
Firefox 3.6 0.3 sec. 1.2 sec. 9.4 sec.
Opera 10.10 0.3 sec. 7.7 sec. 5.8 min.
Safari 4.0.4 0.5 sec. 11.5 sec. 8.5 min.
Safari 5.0.0 0.5 sec. 9.4 sec. 5.4 min.
Chrome 4.0.249 0.6 sec. 13.4 sec. 9.7 min.
Chrome 5.0.375.70 0.7 sec. 15.3 sec. 12.7 min.
Internet Explorer 7 0.5 sec. 17.8 sec. 25.0 min.
Internet Explorer 8 0.3 sec. 1.7 sec. 15.7 sec.
Valid XHTML 1.1! Valid CSS!
Page design by
XHTML Site Map About This Web Site Copyright © 2009-2010 by James E. Pettis