Elements must meet minimum color contrast ratio thresholds

Rule ID: color-contrast
Ruleset: axe-core 4.8
User Impact: Serious
Guidelines: WCAG 2.1 (AA), WCAG 2.0 (AA), WCAG 2.2 (AA), Trusted Tester, EN 301 549

Squash more accessibility bugs with axe DevTools Pro

Find and fix more issues with Intelligent Guided Tests™ by answering a series of simple questions about your page content. Free trial. No credit card needed.

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

Disabilities Affected

  • Low Vision
  • Colorblindness

Standard(s)

  • WCAG 2.1 (AA)
  • WCAG 2.0 (AA)
  • WCAG 2.2 (AA)
  • Trusted Tester
  • EN 301 549

WCAG Success Criteria [WCAG 2.1 (AA)]

  • 1.4.3: MUST: Contrast (Minimum)

WCAG Success Criteria [WCAG 2.0 (AA)]

  • 1.4.3: MUST: Contrast (Minimum)

WCAG Success Criteria [WCAG 2.2 (AA)]

  • 1.4.3: MUST: Contrast (Minimum)

Trusted Tester Guidelines

  • 13.C: MUST: The visual presentation of text and images of text have sufficient contrast.

    How to Fix the Problem

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

    Success Criterion: Ensure color contrast of at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels). Note: Elements found to have a 1:1 ratio are considered "incomplete" and require a manual review.

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

    Image

    Color Contrast Analysis Tools: Below are links to tools that will analyze color contrast ratios against guidelines:

    • axe DevTools Browser Extensions — Deque's enterprise product, axe DevTools HTML, enables development groups to integrate accessibility testing into existing automated testing processes and is used by customers in conjunction with Deque's axe Monitor accessibility monitoring and reporting product. In addition to providing a code library for integration in many programming languages, axe DevTools also includes web accessibility analysis extensions for Google Chrome and Mozilla Firefox, enabling enterprise front-end developers to run a quick accessibility test at any time. Analysis tools return detailed information on accessibility violations and instructions to fix issues with including links to more in-depth knowledge.
    • axe-core — The axe accessibility engine is an open-source JavaScript accessibility rules library that is fast, returns no false positive errors or duplicate results, and is available as a GitHub repository, browser plugin, or framework integration.

    Why it Matters

    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.

    There are nearly three times more individuals with low vision than those with total blindness. One in twelve people cannot see the average full spectrum of colors - about 8% of men and 0.4% of women in the US. A person with low vision or color blindness is unable to distinguish text against a background without sufficient contrast.

    Color transparency and opacity is taken into account in the background.

    Color transparency and opacity in the foreground is more difficult to detect and account for due to:

    • 1:1 colors in foreground and background.
    • CSS background gradients.
    • Background colors in CSS pseudo-elements.
    • Background colors created with CSS borders.
    • Overlap by another element in the foreground - this sometimes comes up with tricky positioning.
    • Elements moved outside the viewport via CSS.

    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.

    Resources

    Deque University Course Pages (subscription required)

    Contribute to axe-core on GitHub

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.8 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: