The Importance of Contrast on a Web Page

An important part of web site design is Contrast. This is because it often means the difference between a web page that looks great and a web page that is hard to read or causes your eyes to strain. Often times it can be hard to decide what colors work well in contrast to others. The color chart below should help show you different colors and how they contrast or don’t contrast well as foreground and background colors.

Be aware however, that contrast is more than just how bright a color is compared to the background. You will notice that some of these colors are extremely bright and show up vibrantly on the background color – such as blue on black. But I labeled it as having a poor contrast, because while it appears to be bright, the colors make the text difficult to read. For example, if you were to create a web page in blue text on a black background, many of your readers would have eye strain in no time.

		Background
		Red	Orange	Yellow	Green	Blue	Violet	Black	White	Gray
Foreground	Red		Poor	Good	Poor	Poor	Poor	Good	Good	Poor
	Orange	Poor		Poor	Poor	Poor	Poor	Good	Poor	Poor
	Yellow	Good	Good		Poor	Good	Poor	Good	Poor	Good
	Green	Poor	Poor	Poor		Good	Poor	Good	Poor	Good
	Blue	Poor	Poor	Good	Good		Poor	Poor	Good	Poor
	Violet	Poor	Poor	Good	Poor	Poor		Good	Good	Poor
	Black	Poor	Good	Good	Good	Poor	Good		Good	Poor
	White	Good	Good	Poor	Poor	Good	Good	Good		Good
	Gray	Poor	Poor	Good	Good	Poor	Poor	Poor	Good