---
title: "Fix color contrast"
date: "2023-04-21T09:20:34+00:00"
summary: "Locate and learn how to fix color contrast issues on your website."
image:
type: "page"
url: "/web-governance/fix-color-contrast"
id: "e9fcae57-c055-4a1d-9e10-a136c014cfa4"
---

Table of contents will be added

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:

1.  Click **Accessibility** (icon of a human with arms outstretched) on the menu bar. The _Accessibility_ dashboard opens.
    
    ![The location of the Accessibility button on the domain toolbar.](https://acquia.widen.net/content/79462b58-cd9b-4a6a-a404-8a111c48805e/web/Mon_Opt_Dashboard-Accessibility.png)
    
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.

![The location of the Checklist option on the left menu on the Accessibility Checklist page.](https://acquia.widen.net/content/b5adcfdf-9dba-48ec-9655-21704d8c762b/web/Mon_Opt_Accessibility-LeftMenu-Checklist.png)

3.  On the _Accessibility Checklist_ page, select to filter for the level of compliance.

![The location of the Checklist option on the left menu on the Accessibility Checklist Level AA page.](https://acquia.widen.net/content/611d09d1-76be-41d3-b79d-69619b11f60f/web/Mon_Opt_Accessibility-WCAG-Level.png)

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.

![The location of the number of pages on the Accessibility Checklist Level AA page.](https://acquia.widen.net/content/b309f56f-665d-45ed-91ba-71e4d6d98fbd/web/Mon_Opt_Accessibility-Checklist-Pages-Button.png)

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.

![All screenshots for Monsido Accessibility module documentation, Monsido Accessibility module images for user documentation](https://acquia.widen.net/content/e69e306e-11b8-440e-a985-28f2413f5f8d/web/Mon_Extension-AccessibilityContrast.png)

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.

![The web browser extension page, automatically opened to show the page where the error occurs.](https://acquia.widen.net/content/c46d5b47-c2f3-4bda-a650-81b1ad2b0300/web/Mon_Accessibility_Checklist_Web-Browser-Ext_Highlight.png)

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](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en) (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 [Acquia Color Contrast Checker](https://www.acquia.com/products/acquia-optimize/tools/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](/node/60101/).