# Colour Contrast Analyser - color picker

## Prerequisites

Install [Colour Contrast Analyser](https://www.paciellogroup.com/resources/contrastanalyser/) for either Windows or Mac OS X.

### Abilities

* Sight
* Use of Mouse (on Mac OS X)

## Steps

1. Launch Colour Contrast Analyser
2. Activate the color picker
   * See Tool Interface section below for reference images
3. Select a color of text using a mouse or keyboard
   * Pick a color away from the edge of the character border to avoid areas of anti-aliasing. See the text color reference image below.

     ![text color reference image](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcAs5NG2PuodPB11A%2FwhereToGetColor.png?generation=1548799233248603\&alt=media)
4. Select a background color
   * Pick a color that is adjacent to the foreground text and seems like it would have the lowest contrast with the foreground text. See background color reference image below.

     ![background color reference image](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcAs707gyDZJwOrJC%2FselectLightestColor.png?generation=1548799233307604\&alt=media)
   * Ex. For light text, choose the lightest color in a gradient or image background
   * Ex. For dark text, choose the darkest color in a gradient or image background
5. If the text you're checking does not Pass (AA) for Normal Text, create an issue (see **Text has poor contrast** below).

### Tool Interface

* 1 - Foreground Color Code
* 2 - Background Color Code
* 3 - Foreground Color Picker
* 4 - Background Color Picker
* 5 - Normal Text Pass/Fail indicator

#### Windows Interface

![Colour Contrast Analyser for Windows window](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcAs9XYdNtWgyAEUd%2Fwindows-interface.png?generation=1548799233224484\&alt=media)

#### Mac OS X Interface

![Colour Contrast Analyser for Mac OS X window](https://1263609421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7Gkdj3TGC-4KFU3%2F-LXQcA8v9tJDTzrlb4wx%2F-LXQcAsBzKGn-P6es71O%2Fmac-interface.png?generation=1548799232854520\&alt=media)

## 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*)
  * Since the Colour Contrast Analyser will provide the color codes, it may be useful to provide that information as well (ex. *light grey text (#777777) has poor contrast with its white background (#FFFFFF)*
* **Priority**: P2
* **Label or Tag**: #a11y143

### Exceptions

See [Color and Color Contrast Testing Methods](https://ebay.gitbook.io/oatmeal/color-contrast) for Exceptions.

## Knowledge

### Use Both Methods

You could use a combination of this method and the [color codes](https://ebay.gitbook.io/oatmeal/color-contrast/colour-contrast-analyser-color-codes) method for instances where either the text or background color's hex value is known and the other is unknown.

## 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/colour-contrast-analyser-color-picker.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.