Instructions¶

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 Level AA.

4. On the list of checks, find the failing contrast check. 

5. Click on the number of pages, on the same row as the issue.

6. Choose a page to open with the browser extension (magnifying glass button).

7. 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 the free 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.