Contrast is an important part of Web design because it often means the difference between a page that looks great and a page that is illegible or painful to look at. But sometimes it can be hard to decide what colours work well in contrast to others.

This table should help show you different colors and how they contrast or don’t contrast well as foreground and background colours.

One thing you should note is that contrast is more than just how bright a colour is compared to the background. As you can see, some of these colours are very bright and show up vibrantly on the background colour – such as blue on black. But I labeled it as having a poor contrast, because while it is bright, the colours make the text difficult to read. If you were to create a page in all blue text on a black background, your readers would have eyestrain very quickly.

Background Colour
Red Orange Yellow Green Blue Violet Black White Grey
Foreground Colour 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
Grey Poor Poor Good Poor Poor Poor Poor Good