G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text | WAI | W3C Skip to content

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

About this Technique

This technique relates to:

This technique applies to any technology that produces visual output.

Description

The objective of this technique is to make sure that users can read text that is presented over a background. For Success Criterion 1.4.3, this technique describes the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 14 point (if bold). For Success Criterion 1.4.6, this technique relaxes the 7: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 relative luminance of the text can be maintained by making sure that each of the text letters have 4.5: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 4.5:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.

For example, if a letter is lighter at the top than it is a the bottom, it may be difficult to maintain the contrast ratio between the letter and the background over the full letter. In this case, the designer might darken the background behind the letter, or add a thin black outline (at least one pixel wide) around the letter in order to keep the contrast ratio between the letter and the background above 4.5:1.

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.

For example, if a page is very light on one edge and fades to very dark on the other edge, there is no color that can run across the page and meet the contrast guidelines on both edges. One way of addressing this would be to change the lightness of the letters as well so that each letter always meets the contrast ratio for the background that is immediately behind the letter.

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

  • A black background is chosen so that light colored letters that match the company logo can be used.

  • Text is placed over a picture of the college campus. Since a wide variety of colors and shades appear in the picture, the area behind the text is fogged white so that the picture is very faint and the maximum darkness is still light enough to maintain a 4.5:1 contrast ratio with the black text written over the picture.

    See also the contrast samples in related resources.

Related Resources

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.04045 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4
      • if G sRGB <= 0.04045 then G = G sRGB /12.92 else G = ((G sRGB +0.055)/1.055) ^ 2.4
      • if B sRGB <= 0.04045 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 4.5:1

Expected Results

  • #4 is true.

Note

Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.

Test Rules

The following are Test Rules related to this Technique. It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods. For information on using Test Rules, see Understanding Test Rules for WCAG Success Criteria.

Back to Top