Color Contrast Methods

Methods

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