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

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.5, 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).

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 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 5: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.

Resources are for information purposes only, no endorsement implied.

• Contrast Analyser – Application

• Contrast Ratio Analyser - online service

• Colour Contrast Analyser - Firefox Extension

• Color Contrast Samples

• Atypical colour response

• Colors On the Web Color Contrast Analyzer

• Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)

• List of color contrast tools

(none currently listed)

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

     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

     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

     • L1 is the relative luminance of the lighter of the foreground or background colors, and

     • L2 is the relative luminance of the darker of the foreground or background colors.

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

Expected Results

The contrast ratio is equal to or greater than 5:1

• #4 is true.