> 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-codes.md).

# Colour Contrast Analyser - color codes

## Prerequisites

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

This method assumes you have two hex color codes.

## Steps

1. Launch Colour Contrast Analyser
2. Enter a color code into the Foreground Colour field for the text you're analyzing
3. Enter a color code into the Background Colour field for the background of the text you're analyzing
4. Verify that for Normal Text, you have a Pass (AA)
   * See Tool Interface section below for reference images
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 you have 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

### Getting Hex Value of Text on the Page

Coming soon.

## About

Author(s): Luis Garcia

Last Updated: 2017 April 07