Skip to content Skip to navigation

Contrast

People with moderately low vision need to be able to read and navigate your site, so it is important that there is enough contrast between text and its background.

Note that it is important to choose good color combinations, so be sure to consider both color and contrast together.

Who Does Adequate Contrast Help?

  • People with low vision, including those people whose vision is deteriorating, often have difficulty reading content if the text and background don't have sufficient contrast.
  • People who are color blind can experience loss of contrast.
  • People who are using devices with small screens might need additional contrast, depending on the environment.

What Does Adequate Contrast Mean?

The minimum contrast ratio between most text and its background should be 4.5:1. Text that is larger and/or bold can have a contrast ratio of 3:1. Large and/or bold is defined as 18-point text or 14-point bold text. These requirements also apply to images of text if those images are intended to be understood as text.

Understanding Success Criterion 1.4.3 of WCAG 2.0 includes some exceptions. For example, incidental text, such as random words used to create a background or a photograph that includes a street sign, or text that is part of an "inactive interface component," does not need to meet the minimum contrast requirements. According to the "Understanding" document, "[t]ext that is part of a logo or brand name has no minimum contrast requirement." Note, however, that meaningful text that appears on top of a background of random words does need to meet the requirements.

According to WCAG 2.0, the contrast requirement applies to text, but take care to ensure that data presented textually, such as in charts or graphs, also has good contrast.

Following are some special cases to consider when choosing text and background colors:

  • Some low vision users use browser or assistive technology settings to invert the colors displayed on pages. For example, they require light text on a dark background rather than the more usual dark text on a light background. If a website reverses the color scheme on some pages by putting light text on a dark background as a way to draw attention (e.g., the selected menu or tab) or to indicate that users are in a different part of the website (e.g., FAQs), that approach essentially nullifies the user's need to invert colors.
  • Images of text don't scale well, i.e., they tend to pixelate, and it's harder to change the foreground and background colors (even using browser or contrast-enhancing assistive technology). For this reason, images of text should be avoided when possible.
  • Some people with cognitive disabilities require color combinations or hues that have low contrast. Consider the needs of these users whenever possible.
  • If your background is an image or gradient, make sure the text is readable across the entire background. Two tools for checking contrast when using a non-solid background are listed below (Contrast Ratio and Color Contrast Analyzer for Chrome).

How to Check

The best way to check the contrast of text or other content is to use one of the following tools that can be downloaded for free:

Target Audience: 
Content Creator
Designer
Developer
Last modified: 
February 16, 2016