Contrasting Foreground and Background Colors
Visualize How the Colors Display
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 colors 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 colors.
One thing you should note is that contrast is more than just how bright a color is compared to the background. As you can see, some of these colors are very 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 it bright, the colors 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 | ||||||||||
| 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 | ||
