This section gives instructions on how to check and repair color contrast issues with Acquia Optimize and the web browser extension. 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, find 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.
Choose a page to open with the browser extension (magnifying glass button).
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:
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 Color Contrast Checker to identify a color combination that will increase the contrast.
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.