# Color Contrast Methods

## Methods

* [Color Contrast Analyzer - semi-automated](https://ebay.gitbook.io/oatmeal/color-contrast/color-contrast-analyzer)
* [Colour Contrast Analyser - color codes](https://ebay.gitbook.io/oatmeal/color-contrast/colour-contrast-analyser-color-codes)
* [Colour Contrast Analyser - color picker](https://ebay.gitbook.io/oatmeal/color-contrast/colour-contrast-analyser-color-picker)
* Color Contrast with Images Disabled - Coming Soon
* Color Contrast of alt Text - Coming Soon

## Testing Strategy

When testing for color contrast on a website, there are generally three cases you will have. For the sake of clarity "known" means that the color code is available in the computed CSS of the page.

* Both text and background color codes are known
* Text color code is known, but background color is unknown. This can happen in a few cases:
  * Text is presented over a background image
  * Text has been moved with CSS and there is no programmatic way of knowing what color is behind the text
* Both text and background color codes are unknown.
  * Images that contain text are the most common occurrence for this case.

### Text and Background Color Codes Known

If both text and background color codes are known, then automated tools which check for color contrast will produce a reliable list of issues. If checking manually, you can use the [Colour Contrast Analyser - color codes](https://ebay.gitbook.io/oatmeal/color-contrast/colour-contrast-analyser-color-codes) method to create a list of issues.

For all other cases, automated tools don't currently produce a reliable list of color contrast issues.

### Either Text or Background Color Codes Unknown

If either the text or background color codes are unknown, then do the following:

1. Use the [Color Contrast Analyzer - semi-automated](https://ebay.gitbook.io/oatmeal/color-contrast/color-contrast-analyzer) method to identify areas of poor or borderline contrast.
2. Verify the areas of poor or borderline contrast using the [Colour Contrast Analyser - color picker](https://ebay.gitbook.io/oatmeal/color-contrast/colour-contrast-analyser-color-picker) method.

## What is color contrast?

Users with moderately low vision must be able to read text on the site without need of contrast-enhancing assistive technology.

This is accomplished by meeting a minimum contrast ratio between foreground text and the background color behind it.

Contrast ratio is usually presented in a few ways. For example, here are three ways of communicating the same contrast ratio:

* 4.5 to 1
* 4.5:1
* 4.5

The minimum contrast ratio for most text will be 4.5 to 1. When developing for mobile platforms, strive to meet a 7:1 ratio.

## When to test for color contrast?

A good rule of thumb to follow is to test the color contrast of any text that might be read by a human.

* Headings
* Paragraphs
* Navigation
* Image alt text when image isn't displayed
* Individual letters or numbers used in icons (i.e. notifications, tooltips)
* Placeholder text in form fields
* States (hover, active, visited, etc.) for buttons, links, etc.

## Exceptions

* Logo text
* Incidental text
* Disabled elements
  * **Note:** Inactive elements are not considered to be disabled, so text on them must meet contrast minimums. Yes, we know the word "inactive" is used in WCAG.

## Guidelines

* [WCAG 1.4.3 (AA)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)