# Color Contrast Methods

## Methods

* [Color Contrast Analyzer - semi-automated](/oatmeal/color-contrast/color-contrast-analyzer.md)
* [Colour Contrast Analyser - color codes](/oatmeal/color-contrast/colour-contrast-analyser-color-codes.md)
* [Colour Contrast Analyser - color picker](/oatmeal/color-contrast/colour-contrast-analyser-color-picker.md)
* 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](/oatmeal/color-contrast/colour-contrast-analyser-color-codes.md) 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](/oatmeal/color-contrast/color-contrast-analyzer.md) 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](/oatmeal/color-contrast/colour-contrast-analyser-color-picker.md) 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)


---

# 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.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.