Contrast

Designing with sufficient contrast

If text, including images of text, lacks sufficient contrast with its background it won’t be legible to users with low vision or colour blindness. Controls and meaningful graphics also require good contrast.

To meet the WCAG Level AA Success Criterion for minimum contrast, follow these best practices:

• Ensure small text (under 18 point [24 pixels] regular font or under 14 point [19 pixels] bold font) has a contrast ratio of at least 4.5:1 with the background.
• Ensure large text (at least 18 point [24 pixels] regular font or 14 point [19 pixels] bold font) has a contrast ratio of at least 3:1 with the background.
• Ensure non-text content – active user interface components (i.e., controls) and their states, and meaningful graphics – has a contrast ratio of at least 3:1 with adjacent colours.

Meeting WCAG Level AAA criteria is often difficult, but that's not the case with enhanced contrast. We should strive for it whenever possible. To meet the WCAG Level AAA Success Criterion for enhanced contrast, increase the contrast ratio of small and large text as follows:

• Ensure small text (under 18 point [24 pixels] regular font or under 14 point [19 pixels] bold font) has a contrast ratio of at least 7:1 with the background.
• Ensure large text (at least18 point [24 pixels] regular font or 14 point [19 pixels] bold font) has a contrast ratio of at least 4.5:1 with the background.

For user interface components, the 3:1 contrast ratio with adjacent colours:

• Applies to the control and the control’s state information, such as whether a component is selected or focused.
• Applies to the visual boundary indicating the hit area, unless the control contains text that meets the 4.5:1 contrast ratio.
• Doesn’t apply if the appearance of the control and its states are controlled by the user agent and not modified by the author.
• Doesn’t apply if the control is disabled.

Check contrast manually using the Colour Contrast Analyzer (CCA).

Automated tools check background contrast, but manual inspection is necessary when the background is a gradient, an image, an animation or video. If the background changes over time, or as the user scrolls or as the viewport changes, the contrast should persist, though brief (1 second) intervals of poor contrast won’t interfere with the user experience.

The 3:1 contrast ratio for adjacent colours also applies to meaningful graphics, which includes informative icons, lines in line graphs, and slices in pie charts:

• Check the contrast of the graphical object against its adjacent colours.
• If there are multiple colours and/or a gradient, choose the least contrasting area to test.
• If the least-contrasting area is less than 3:1, assume that area is invisible. Is the graphical object still understandable?
• If there is enough of the graphical object to understand, it passes, else it fails.

  Bad example: Low contrast with background (control)

The grey border colour of the checkbox (#9D9D9D) has a contrast ratio of 2.7:1 with the white background, which is insufficient to identify the checkbox to some users.

The grey border of the input (#CCCCCC) has a contrast ratio of 1.6:11 with the white background, falling short of the 3:1 required for non-text content.

Example begins

Label 1

Label 2

Example ends

The input fields example is the current (2021) WET implementation, so you need to override the WET stylesheet with the input border colour value from Good example: Sufficient contrast (control). This is the problem line of CSS:

CSS

Code begins

.form-control { border: 1px solid #ccc; }

Code ends

.form-control { border: 1px solid #93958A; }

  Bad example: Low contrast with adjacent colour (graphic)

This alert graphic consists of a red triangle-shaped icon with a white exclamation mark, set against a grey background. The triangle is usually reserved for alerts like these, so both shapes are important.

There are 2 contrast ratios to consider with this icon:

• The contrast ratio between the white exclamation mark and the red triangle, which is 5:1.
• The contrast ratio between the red triangle and the grey background, which is 2:1.

The red triangle and the grey background lack sufficient contrast.

See more examples in Success Criterion 1.4.11: Non-text Contrast

"Bad example: Low contrast with adjacent colour (graphic)" is from Contrast and Colour Accessibility, © WebAIM, 2021.

Related WCAG resources