# 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](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcBS61b8C0wgj7ZDp%2FebayHomepage.png?generation=1548799234134677\&alt=media)

   * 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](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcBS8YZ0RY0K52vho%2FcolorContrastAnalyzerOptions.png?generation=1548799233635550\&alt=media)
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](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcBSAdKHWDFhoF322%2FcolorContrastAnalyzerIcon.png?generation=1548799233916913\&alt=media)
   * **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](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcBSCHyimKHNC4On1%2FebayHomepageMasked.png?generation=1548799233606870\&alt=media)
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](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcBSES8jRzA6fJrUF%2FebayHomepageLowContrastAreas.png?generation=1548799233652480\&alt=media)

   * 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](https://ebay.gitbook.io/oatmeal/color-contrast/colour-contrast-analyser-color-picker) method
* **Priority**: P2
* **Label or Tag**: #a11y143

### Exceptions

See [Color and Color Contrast Testing Methods](https://ebay.gitbook.io/oatmeal/color-contrast) 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ebay.gitbook.io/oatmeal/color-contrast/color-contrast-analyzer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.