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

# 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](/files/-LXQcAs5NG2PuodPB11A)
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](/files/-LXQcAs707gyDZJwOrJC)
   * 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](/files/-LXQcAs9XYdNtWgyAEUd)

#### Mac OS X Interface

![Colour Contrast Analyser for Mac OS X window](/files/-LXQcAsBzKGn-P6es71O)

## 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](/oatmeal/color-contrast.md) for Exceptions.

## Knowledge

### Use Both Methods

You could use a combination of this method and the [color codes](/oatmeal/color-contrast/colour-contrast-analyser-color-codes.md) 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