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

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

  • 4.5:1 for regular text
  • 3:1 for text 18pt or larger, or 14pt and bold

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

Test contrast ratios using these tools:

Last modified