To ensure that all text on your pages complies with the Americans with Disabilities Act, please ensure that all text and backgrounds (including images, colors, and transparencies) adhere to the following best practices.

Our standard font for body copy is 18px or 1.8rem, with a line height of 1.5rem.

When type is on our Georgia State Blue (#0039a6), Blue Steel (#374057), Cool Blue (#0071ce), or Cyan (#109ad6); best practices dictates that we use white as the font color to ensure compliance with WCAG AA guidelines.

On transparencies on Georgia State Blue (#0039a6), Blue Steel (#374057), Cool Blue (#0071ce), or Cyan (#109ad6), best practices dictates an opacity between 70-80% of the background color to help ensure the contrast ratio for normal text is at least 4.5:1 and 3:1 for large text (24px or larger).

On multi-tonal backgrounds without a background overlay

On multi-tonal backgrounds without a background overlay, the text should always be placed on a portion of the image with the least amount of tonal variance. Photo selection for copy placement favors one with ample negative space.

• Test the web asset in multiple viewports to ensure that the vast majority of the text remains in the portion of the background with the least tonal variance.
  
  
• Photoshop’s generative fill features can help increase or sometimes create the necessary negative space.
  
  
• When in doubt, just use a background overlay with an opacity between 70-80% to ensure your content stays readable.
  
  
• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/ 
  
  
• Example: Multi-tonal backgrounds without a background overlay

On multi-tonal backgrounds with a solid background overlay

On multi-tonal backgrounds with a solid background overlay, the same rule applies; a background overlay with an opacity between 70-80% should be used.

• Example: Multi-tonal backgrounds with a solid background overlay.

On multi-tonal backgrounds with a solid-to-transparent background overlay

On multi-tonal backgrounds with a solid-to-transparent background overlay, the gradient color should start with an opacity between 90-100% so the text has enough space to remain visible in an area that provides a sufficient contrast ratio. However, the text should stay primarily on the portion of the gradient with the least tonal variance. 

• Test the web asset in multiple viewports to ensure that the vast majority of the text remains in the portion of the background with the least tonal variance.
  
  
• Example: Multi-tonal backgrounds with a solid-to-transparent background overlay.

Whenever you have a background image or a transparency behind text on any of your pages, test the contrast between the background and the text for specific elements that the WAVE may miss by using the Firefox Web Developer Accessibility Tester. To use this tool, open up the Web Developer Tools option and then select the Accessibility option.

Then select the Pick Accessible Object On Page, and highlight the text in question.

For example, on the following page, the title of "BECOME A PANTHER" does not meet WCAG standards for accessible text. The copy underneath it does, just not the heading. You can see the "Color and Contrast" error displayed in the lower right corner for the selected text.

Keywords: accessibility, background image, transparent background, transparencies, ada, americans with disabilities act, 508 compliance, contrast between text and background