# 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](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 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](https://ebay.gitbook.io/oatmeal/color-contrast) for Exceptions.

## Knowledge

### Getting Hex Value of Text on the Page

Coming soon.

## About

Author(s): Luis Garcia

Last Updated: 2017 April 07