HTML & CSS Direct Study

Color Contrast

Contrast: is an important element to a page that helps viewers to better understand content information that is being displayed. By creating contrast within a page the overall appearance, readability, flow of information, importance levels of information, and a visually appealing web page are all achieved. Most people begin to think of color when contrast is mention, however as described below there are several different ways to explore and use contrast on a web page.

Different Ways to Create Contrast within a Page:

• Color -- There are many different elements located on the page. If each element has the identical style then a reader can not see where some information begins and other ends. For elements that have nothing to do with each other use colors that are very different from each other. For example content area could be dark brown with light text, while the headers, footers, or navigation has a more neutral color with dark text. On the other hand if the elements are similar to each other (i.e. similar articles, content, promotions) then you could use similar colors or the same color just lighter or darker shades.

Within the content itself using colors can distinguish between different types of information. By using different, but similar colors you could distinguish headers, sub headers, and content.

• Size -- By creating different sizes within the elements on the page you can direct the viewer to see which elements are more important. Larger elements will often attract the attention of the viewers, while more smaller elements will be looked at secondary. Using bigger text can also attract readers to particular points that you want to be seen first or often.

• Alignment -- Alignment is an important part of every document ever presented in business. Page breaks, justification, total alignments are all important, however within a web page there are different aspects of alignment that are important to ensure are correct in order to visually appeal to readers. One good way to use alignment in your advantage is to left align your header then below create a wide margin before you begin your content. This helps set apart the header and content and can help if the font sizes are similar by distinguishing a difference. However, you have to be careful with alignments, because some can just look like design errors. If you create a margin, make it a wide margin, furthermore never center align paragraphs this can make is difficult to read and overall leave an undesirable appearance.