Text elements must have sufficient color contrast against the background

Log in (Premium content) Request a demo

Rule Description

All text elements must have sufficient contrast between text in the foreground and background colors behind it in accordance with WCAG 2 AA contrast ratio thresholds.

The Algorithm, in Simple Terms

Checks all text elements to ensure that the contrast between the foreground text and the background colors meet the WCAG 2 AA contrast ratio thresholds.

Note:

This rule will not report on text elements that have a background-image, are obscured by other elements or are images of text.

This also checks for child elements of disabled buttons so they can be ignored to avoid a false value.

Why this is Important

Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.

How to Fix the Problem

Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it.

Use the color contrast analyzer below to find colors that pass the guidelines.

Image

Compliance Data & User Impact

User Impact: Serious
Disabilities Affected:
  • Low Vision
  • Color-blindness
Issue Type:
  • WCAG 2.0 (AA): MUST
WCAG Success Criteria:
  • 1.4.3 Contrast (Minimum)
Section 508 Guidelines:
  • Not applicable

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML 5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: color-contrast