Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

Any technology that produces visual output.

This technique relates to Success Criterion 1.4.3: Contrast (Minimum) (Sufficient).

Description

The objective of this technique is to make sure that users can read text that is presented over a background. This technique relaxes the 4.5:1 contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold).

Note

When evaluating this success criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. Point sizes are based on the CSS pt size CSS3 Values. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

If the background is a solid color (or all black or all white) then the contrast ratio of the larger-scale text can be maintained by making sure that each of the text letters have a 3:1 contrast ratio with the background.

If the background or the letters vary in relative luminance (or are patterned), then the background around the letters can be chosen or shaded so that the letters maintain a 3:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.

The contrast ratio can sometimes be maintained by changing the relative luminance of the letters as the relative luminance of the background changes across the page.

Another method is to provide a halo around the text that provides the necessary contrast ratio if the background image or color would not normally be sufficiently different in relative luminance.

Examples

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Measure the relative luminance of each letter (unless they are all uniform) using the formula:

    • L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

      • if R sRGB <= 0.03928 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4
      • if G sRGB <= 0.03928 then G = G sRGB /12.92 else G = ((G sRGB +0.055)/1.055) ^ 2.4
      • if B sRGB <= 0.03928 then B = B sRGB /12.92 else B = ((B sRGB +0.055)/1.055) ^ 2.4
      Note

      and R sRGB, G sRGB, and B sRGB are defined as:

      • R sRGB = R 8bit /255
      • G sRGB = G 8bit /255
      • B sRGB = B 8bit /255
      Note

      The "^" character is the exponentiation operator.

    Note

    For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.

  2. Measure the relative luminance of the background pixels immediately next to the letter using same formula.
  3. Calculate the contrast ratio using the following formula.

    • (L1 + 0.05) / (L2 + 0.05), where

  4. Check that the contrast ratio is equal to or greater than 3:1

Expected Results

  • #4 is true