Instructions¶

This article provides instructions on how to check and repair color contrast issues with Acquia Optimize and the web browser extension. From your domain dashboard:

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

   
2. 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.

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

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

6. 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.

8. 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.

9. Calculate the luminosity contrast ratio between the text and the background color. To do this:
   1. Open a Color Contrast Checker.
   2. Use a color picker like ColorZilla (Google Chrome extension) to “pick” the text color from the image.
   3. 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.)
   4. Repeat the process for the background color.
10. 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 Color Contrast Checker to identify a color combination that will increase the contrast.