Skip to main content

Color Contrast

When text lacks sufficient contrast against its background, it becomes difficult to read. In the following example, white text on a light gray background has very low contrast at a ratio of 1.2:1.

Government itself is founded upon the great doctrine of the consent of the governed, and has its cornerstone in the memorable principle that men are endowed with inalienable rights. - Leland Stanford

In this second example, red text on a black background has higher but still insufficient contrast at a ratio of 2.2:1.

Government itself is founded upon the great doctrine of the consent of the governed, and has its cornerstone in the memorable principle that men are endowed with inalienable rights. - Leland Stanford

Compare those with this example, which has a the maximum contrast ratio of 21:1.

Government itself is founded upon the great doctrine of the consent of the governed, and has its cornerstone in the memorable principle that men are endowed with inalienable rights. - Leland Stanford

When choosing text and background colors, the contrast ratio should be at least:

  • 4.5:1 for regular text (although at least 7:1 is preferred)
  • 3:1 for text 18pt or larger, or 14pt and bold (although at least 4.5:1 is preferred)

Interface elements (icon buttons, text field outlines, state indicators like selected radio buttons) also require a 3:1 contrast ratio between foreground and background.

Text over images

Often websites will have an image with text imposed on it. Take the following example:

Sample Heading Goes Here

Depending on numerous factors, where the text lays on the image may not have enough contrast. Additionally, if the user is using high contrast mode, the image may be disabled entirely which in this case would lead to having white text on a white background. The best practices for text on images include:

  • Specify a background color behind the main image.
  • Specify a contrasting background color behind the text. This can be partially opaque.
Image: style="background-color:#000; background-image:url(/stanford-campus-sample.jpg);
Text: style="background-color:rgba(0,0,0,0.5); color:#fff;
Sample Heading Goes Here

Tools

There are numerous tools available for checking the contrast between any two colors. Some of our favorites are listed here, but many others are available.

Last modified