Ensure text and controls have enough color contrast

Applicable Role(s): Content Creator, Developer

Overview

Text and interactive elements need to have high contrast so that your content is readable to all users. High contrast especially benefits site visitors that may have low vision or experience color blindness. It can also help mobile users still see content even if the screen is being affected by sun glare.

Best Practices

The minimum contrast ratio allowed for regular or smaller text is 4.5:1.

For 14pt bolded text (18 pixels bolded) or 18pt (24 pixels) standard text, the minimum ratio is 3:1. Important graphical icons, and user interface controls like radio buttons and checkboxes, must also meet the 3:1 contrast ratio.

Exceptions to Color Contrast Requirements

There are some exceptions to the color contrast requirements in WCAG 2.0/2.1.

  • Pure decoration: words used as a decorative element have no color contrast requirement (example: words repeated over and over in the background).
  • Inactive Components: text on an inactive element or component (i.e. disabled state) does not need to meet a contrast requirement until they can be interacted with. However, it is highly recommended to make inactive states just meet the 4.5:1 ratio and make active elements even higher contrast.
  • Text not seen by anyone: there is no contrast requirement if nobody shouldn't see the content at a given time.
  • Significant Image Content: if there is text or images of text that are part of an image containing other significant content, that has no contrast requirement. This refers to text that happens to be in an image, but not the central focus. Example: a photo of an event, with a banner containing text in the background.
    • Images of text where the text is the primary content must meet contrast requirements, see the following "images of text" section.

Images of Text and Logos

example of text "Make a Difference, Support CSE" in image

Images of text (as opposed to true HTML text) still fall under these contrast requirements, with the exception of logotypes. Logotypes include Western logos or anything essential to the brand, and don't have a minimum contrast requirement.

Pattern Examples

Good Contrast: Text

This text is black

The black font on white background has a contrast of 16:1.

Bad Contrast: Text

This text is gray

The gray text against white has a 1.2:1 ratio, well below the 4.5:1 requirement and is hardly visible.

Good Contrast: CTA link

Blue Link

The blue text and white background have a contrast of 4.5:1.

Bad Contrast: CTA link

Blue Link with Light Green Background

The blue text on a light green background has a contrast of 2.8:1, which is too low and could be hard to read.

Good Contrast: Checkbox

The checkmark has enough contrast against the checkbox background color.

Bad Contrast: Checkbox

The checkmark here doesn't have enough contrast against the checkbox background color.