There are a lot of things to consider when picking colors and typefaces for a project.
The most important concern is readability.
It is important to create a design outline that is both pleasing to the eye and easy for users to read on the screen (or in a complementary print piece).
advertisement
The colors you select for both the background of a site and for text can have a huge impact on how well your site works. Think about contrast, brightness and saturation, stroke, and screen color and rendering as you map out your next design scheme. All of these attributes can impact how color and type work together.
Color vs. Black and White
The first consideration is whether to use color at all. There are a variety of attractive websites that rely on black and white outlines, rather than using a lot of color. But the more stark schemes can have a very different feel than sites with more color.
Color is often considered to be more lively and active. Designers can also add subliminal meanings to their work depending on how colors may blend (or not) with the message of the site.
Black and white outlines are often found on sites with massive blocks of text, such as blogs or news sites. Black text on white is seen as formal and straightforward. It is also the standard used by the printing industry – newspapers, magazines and books – although “white” is more generally used to describe any light-colored paper.
Black and white also tends to work better in the printed, rather than digital, form. On screen, white is created from light and too much white can sometimes be stressful for a user’s eyes.
Color, which is found more frequently with items that contain less text, also adds emphasis and makes text easier to read on the screen. But it must be readable.
Contrast
The reason black and white text-background combinations are so popular? Because they are high-contrast. This text-background color combination will never blur together.
Black and white is not the only option. Look for hues that have very different brightness values (black is the lowest at 0 percent, while white has the most at 100 percent). When pairing colors, consider complementary hues – colors that are opposites on the color wheel – to create a high-contrast combination. Blue and yellow-orange or purple and yellow are examples of high contrast, complementary colors.
There is a delicate line between too little and too much contrast.
Sites without enough contrast between letters and background can be tough to read, causing users to squint to make out words, straining the eyes. Visuals with too much contrast can be equally difficult to read and cause a user to become agitated or fatigued.
How do your background and text colors work together? Check out the Colour Contrast Check tool http://snook.ca/technical/colour_contrast/colour.html to create custom pairs and see a sample of how they look. Another quick option is GrayBit, http://graybit.com/main.php which converts a full color page into black and white so you can easily see how much contrast each part of the site contains.
Brightness and Saturation
Colors should also have varying levels of brightness and saturation.
White backgrounds with pure hues, such as yellow or red, have similar brightness levels and although they are different colors, can still prove difficult when it comes to readability. The same is true when working with tints – 30 percent black type on a 30 percent blue background can cause serious readability concerns.
Think about brightness and saturation in the same way as contrast. Look for elements that pair nicely from different ends of the spectrum to achieve the best results.
Stroke and Legibility
The typeface for your project can also have quite an impact on readability and color selection.
When working with body text or small type (less than 20 points), look for typefaces with a medium and consistent stroke weight. Avoid typefaces that have varying thick and thin strokes. For type that will be used in display and at larger sizes, these typefaces may work nicely.
Keep in mind that the flicker of light from a screen can make small or thin letters hard to read against almost any background. This issue is amplified when there is not adequate contrast.
Play with a variety of weights for typefaces and even consider increasing the text point size to see how variations increase (or decrease) readability.
Color Combinations
The best color combinations pair something more neutral and bright with a color that is lower on the brightness scale and does not allow as much light to pass through it.
Remember, not all screens will render color in the same way. Test color combinations so that you will have an idea how they render from device to device.
Black text on beige: It’s the web standard of black text on a white background with the colorless background being substituted for a light neutral such as beige. Black text offers high contrast but the addition of some color to the background can make it easier on the eye.
Green text on black: This was the standard for many old computer screens because they colors had contrast and were easy to read. This combination is not so design-friendly though because it has a limited number of partial applications.
Gray text on dark colors: Gray can be less harsh than white text on dark or heavily-saturated backgrounds. Opt for a light tint – think 15 to 25 percent – instead of white.
Light but not white backgrounds: Just like using too much black, too much white can be hard on the eyes. Try a light background of another color instead.
White text on solid colors: Go for bold color with readable text by pairing a super-saturated hue with white lettering.
Combinations to Avoid
Red and green: The colors are practically indecipherable for those who are color blind and can be pretty tough for everyone else too.
Black backgrounds: Black backgrounds can come across as overly harsh and can be limiting in terms of text and image selection. Opt for a dark, colored hue instead – consider navy blue or purple or green.
Too much gray: Too many or similar shades of any color will lack the contrast needed for good readability and emphasis.