Skip to content

Contrast Errors - Very low contrast

  • WAVE Category: Contrast Errors
  • WAVE Contrast Error: Very low contrast

Page Content Status

  • WAVE Error guidance text
  • Example of a DOM Snippet Generated From WAVE Tool
  • Project Team Error guidance
    • Project Team Page Details
    • Project Team Issue and PR details
    • Project Team Solution
  • Credits/Authors

WAVE Error guidance

WAVE Tool's Reference material on Very low contrast may not specifically address your problem. We provide it here for optional reading.

Click to see WAVE Tool Reference

This content added 2026-02-26. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#contrast

WAVE Category

Contrast Errors

WAVE Error

Very low contrast

What It Means

Very low contrast between text and background colors.

Why It Matters

Adequate contrast of text is necessary for all users, especially users with low vision.

What To Do

Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.

The Algorithm... in English

Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast. When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable. WAVE does not identify contrast issues in text with CSS transparency, gradients, or filters. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Standards and Guidelines

Example of a DOM Snippet Generated From WAVE Tool

[HTML snippet showing the problematic code structure that WAVE detected]

Project Team Error guidance

The following material covers how the Project Team has provided a solution to the Very low contrast WAVE contrast error.

Project Page Details

  • Project Page name: [INSERT PAGE NAME or "ALL"]
  • Project Staging URL: [INSERT URL or "N/A"]
  • Requires sign in: [TRUE OR FALSE]
    • Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
    • Can access page directly from URL: [TRUE OR FALSE]
    • Accepts URL parameters: [TRUE OR FALSE]

Project Team Issue and PR details

  • Related GitHub Issue(s):
    • [INSERT ISSUE URL]
  • Related Pull Request(s):
    • [INSERT PR URL]
  • React Component(s)
    • [INSERT PATH: e.g. path/to/Component.jsx]

Project Team Solution

What is the specific problem that was occurring?

[INSERT CONTENT]

What is the proposed solution to this problem?

[INSERT CONTENT]

Step-By-Step Guide

Click to see step-by-step guide

[ADD DETAILED INSTRUCTIONS HERE]

Other Technical Details

Click to see other technical details

[INSERT OTHER DETAILS e.g. Prop References, Return Value ]

Code Snippet With Solution

Click to see code snippets

[INSERT PATH file/path/to/Snippet.jsx]

[Code example showing the fix/solution]

Why the Fix Works

[INSERT CONTENT]

Where this solution is applicable

  • [INSERT SCENARIO 1]
  • [INSERT SCENARIO 2]
  • [INSERT SCENARIO N]

Screenshots of WAVE Error

1. Descriptive Title for Screenshot Set 1

Description/text for image

[INSERT IMAGE HERE]

Description/text for image

[INSERT IMAGE HERE]

1. Descriptive Title for Screenshot Set 2

Descriptoin/text for image

[INSERT IMAGE HERE]

Credits/Authors

  • @Rabia2219
  • [INCLUDE Contributor 2]
  • [INCLUDE Contributor N]