Color Contrast

What is Color Contrast?

Color contrast is the difference in brightness between foreground and background colors. It is especially important to consider the color difference between text and the background, and between sections depicting meaning such as pie charts, maps, etc. Font size and weight (e.g. bold) can affect color contrast too. If text is 24 px or 19px and bold, it is large enough to pass at a 3:1 color contrast ratio.

Color Contrast Example

Here is an example showing how difficult it is to read text with insufficient contrast.

Benefits of Color Contrast

Most people prefer good contrast – it’s easier for everyone to read. If you’ve ever sat through a slide presentation with poor contrast or used subtitles on a movie where the contrast was not high enough, you know how frustrating it can be to not be able to access the information being presented.

But poor contrast especially impacts people with low vision and with color blindness.

Color Contrast Guidelines

• Use a contrast checking tool. WebAIM and ARC both have good tools.
• Choose high-contrast color schemes. If you have a dark background, the text should be light, and vice versa. (Black and white provide maximum contrast.)
• Avoid the following color combinations:
  • Green and red (or related colors)
  • Blue and yellow (or related colors)
• Use larger text and simple fonts. Studies show that sans serif fonts are easier to read.
• Don’t rely on color as the sole means of conveying information. For example, don’t use color as your only method of indicating heading levels.
• Use bold instead of color for emphasis.
• Text can be difficult to read on photographic or gradient backgrounds. Set text against a solid background when possible.