This article provides instructions on how to identify color contrast issues. These steps outline how to use the web browser extension to find the location of color contrast issues directly on the page.

Instructions

From your domain dashboard:

• Click Accessibility (icon of a human with arms outstretched) on the menu bar. The Accessibility dashboard opens.

  
• Select Checklist from the menu on the left side of the page. This page shows a list of all checks that are done for the selected category.

• On the Accessibility Checklist page, select to filter for the level of compliance.

• On the list of checks, locate the failing contrast check. 
  Tip: You can use the search bar to assist with this.
• Click on the number of pages, on the same row as the issue.

• Click the magnifying glass button on the same row as an issue to open the page with the browser extension.
  The web browser extension opens with the selected error in focus.

• On the page, click Highlight (magnifying glass icon) on the section for the error to view the location of the error on the page. You might need to click “Cancel” so the yellow box disappears.

• Calculate the luminosity contrast ratio between the text and the background color. To do this:
  • Open a Color Contrast Checker.
  • Use a color picker like ColorZilla (Google Chrome extension) to “pick” the text color from the image.
  • Paste the color code into the “Foreground color picker” on the Contrast Checker. (If you use ColorZilla, the color code automatically copies to your clipboard.)
  • Repeat the process for the background color.
• In your CMS, adjust the text’s contrast so that it is at least 4.5:1 for regular text and at least 3:1 for large text.
  Tip: You can use the Acquia Color Contrast Checker to identify a color combination that will increase the contrast.

Additional resources

For instructions on how to install and use the web browser extension, visit: Web Browser Extension.

Fix color contrast

This article provides instructions on how to identify color contrast issues. These steps outline how to use the web browser extension to find the location of color contrast issues directly on the page.

Instructions

From your domain dashboard:

• Click Accessibility (icon of a human with arms outstretched) on the menu bar. The Accessibility dashboard opens.

  
• Select Checklist from the menu on the left side of the page. This page shows a list of all checks that are done for the selected category.

• On the Accessibility Checklist page, select to filter for the level of compliance.

• On the list of checks, locate the failing contrast check. 
  Tip: You can use the search bar to assist with this.
• Click on the number of pages, on the same row as the issue.

• Click the magnifying glass button on the same row as an issue to open the page with the browser extension.
  The web browser extension opens with the selected error in focus.

• On the page, click Highlight (magnifying glass icon) on the section for the error to view the location of the error on the page. You might need to click “Cancel” so the yellow box disappears.

• Calculate the luminosity contrast ratio between the text and the background color. To do this:
  • Open a Color Contrast Checker.
  • Use a color picker like ColorZilla (Google Chrome extension) to “pick” the text color from the image.
  • Paste the color code into the “Foreground color picker” on the Contrast Checker. (If you use ColorZilla, the color code automatically copies to your clipboard.)
  • Repeat the process for the background color.
• In your CMS, adjust the text’s contrast so that it is at least 4.5:1 for regular text and at least 3:1 for large text.
  Tip: You can use the Acquia Color Contrast Checker to identify a color combination that will increase the contrast.

Additional resources

For instructions on how to install and use the web browser extension, visit: Web Browser Extension.