> For the complete documentation index, see [llms.txt](https://ebay.gitbook.io/oatmeal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ebay.gitbook.io/oatmeal/color-contrast/color-contrast-analyzer.md).

# Color Contrast Analyzer

## Prerequisites

Install [Color Contrast Analyzer](https://chrome.google.com/webstore/search/color%20contrast%20analyzer) for [Chrome](https://www.google.com/chrome/)

### Abilities

The following abilities are essential to perform this method.

* Sight

## Steps

1. Navigate to the page to test. In these instructions, we will be using [www.ebay.com](http://www.ebay.com)

   ![eBay Homepage](/files/-LXQcBS61b8C0wgj7ZDp)

   * You will want to repeat this process for dialogs, flyouts, and other Views of the page
2. Activate the Color Contrast Analyzer tool and select **Options**
3. Set the following Color Contrast Analyzer Settings:
   * WCAG 2 Level: Level AA, Small Non-Bold Text (4.5:1)
   * Pixel Radius: 2

     ![Color Contrast Analyzer Options screen](/files/-LXQcBS8YZ0RY0K52vho)
4. Click Save & Close
5. Activate the Color Contrast Analyzer tool and select **Capture Whole Page**
   * A new tab will be opened in Chrome following the captured page ![Color Contrast Analyzer Icon with menu expanded](/files/-LXQcBSAdKHWDFhoF322)
   * **Note:** This may take a few minutes to process
   * Feel free to experiment with the other Capture options
6. Once the scan has completed, you will see a masked version of the page.

   ![eBay Homepage masked](/files/-LXQcBSCHyimKHNC4On1)
7. Identify areas of text without white outline. These are areas of text with low contrast.

   Don't forget to scroll through the entire page.

   ![eBay Homepage masked - low contrast areas circled in pink](/files/-LXQcBSES8jRzA6fJrUF)

   * It may be useful to Hide and Show the Mask to verify text with poor contrast.
8. Create issues (see **Text has poor contrast** below) for each instance of text with low contrast.

## Creating Issues

Make sure to provide enough information to identify instances of text with poor contrast.

Your team may wish to list failures for all failings of a certain type of text (list text, navigation text, superscript text, etc.) in one issue.

### Text has poor contrast

* **Description**: Text has poor contrast
  * Describe the type of text (ex. *call to action button text has poor contrast*) or use actual words as they appear on the page (ex. *"THIS IS MORE THAN SUMMER SHOPPING" text has poor contrast*)
  * It may be useful to include a contrast ratio which can be obtained using the [Colour Contrast Analyser - Color Picker](/oatmeal/color-contrast/colour-contrast-analyser-color-picker.md) method
* **Priority**: P2
* **Label or Tag**: #a11y143

### Exceptions

See [Color and Color Contrast Testing Methods](/oatmeal/color-contrast.md) for Exceptions.

## Knowledge

### Checking Tips

If you're finding it difficult to Capture a particular View because of a hover state or some other reason, if you're able to take a screenshot of the View you want, you can open the image in Chrome and run Color Contrast Analyzer on the image instead of the page itself.

## About

Author(s): Luis Garcia

Last Updated: 2017 April 07