Contrast
Design and typography are a huge part of the user experience. A user either feels "good" or "bad" about a site based on many factors. Some factors are tangible, like navigation placement, button size, information flow, etc. But another factor is aesthetics. Does the page "breathe" with enough whitespace? Is the type readable? Does the page look stark and harsh or warm and inviting? These are all subjective things, but as a designer, you have immense control over the tangibles of type, color, contrast, and scale. We are going to examine a few factors that will make your pages more useable and, hopefully, more inviting.
Contrast can make a substantial impact on readability and engaging the user in your content. Let's look at a few pros and cons of different contrast examples.
Black text (#000) on a white background (#fff) is usually not recommended. It presents content in a stark, strident way and can seem harsh and uninviting to the user. Like all things in design, however, it has value. A stylish black and white only design with minimal text, for example, would be fine. If you have a lot of text, black on white can be fatiguing for the reader.
Low contrast can make a user lose track of where they are in a paragraph, or for viewers with low vision, it can make for a frustrating reading experience. While subtlety and low contrast work well for background or secondary information, it should not be used for important information or navigation. There is a fine line between subtle elegance and usability. The above example is rather drastic, but it demonstrates a very poor example of readability.
Using dark backgrounds with light text can be an excellent way to convey a bold, masculine look. The style is great for sports or anything that is dark or cinematic. The style is also great for users with low vision, where the extreme contrast of white letters on black background actually assist in reading text. The downside to this approach is that reading long passages may be fatiguing.
Color also plays a large part in type design. All of the same rules of contrast apply, but with the added complexity of color values thrown in. A good rule of thumb is to keep paragraph text styling free from extreme color variations.
Contrast can make a substantial impact on readability and engaging the user in your content. Let's look at a few pros and cons of different contrast examples.
Black text (#000) on a white background (#fff) is usually not recommended. It presents content in a stark, strident way and can seem harsh and uninviting to the user. Like all things in design, however, it has value. A stylish black and white only design with minimal text, for example, would be fine. If you have a lot of text, black on white can be fatiguing for the reader.
Low contrast can make a user lose track of where they are in a paragraph, or for viewers with low vision, it can make for a frustrating reading experience. While subtlety and low contrast work well for background or secondary information, it should not be used for important information or navigation. There is a fine line between subtle elegance and usability. The above example is rather drastic, but it demonstrates a very poor example of readability.
Using dark backgrounds with light text can be an excellent way to convey a bold, masculine look. The style is great for sports or anything that is dark or cinematic. The style is also great for users with low vision, where the extreme contrast of white letters on black background actually assist in reading text. The downside to this approach is that reading long passages may be fatiguing.
Color also plays a large part in type design. All of the same rules of contrast apply, but with the added complexity of color values thrown in. A good rule of thumb is to keep paragraph text styling free from extreme color variations.