Minimum color contrast ensures that text is readable against its background. When text and background colors are too similar in brightness, users with low vision or color vision deficiencies may struggle to read, or may not be able to read the content at all.
This success criterion exists to ensure that text remains legible regardless of color perception, lighting conditions, or visual limitations.
In simple terms, a contrast ratio compares how bright text is relative to its background. Higher ratios mean clearer separation between letters and the background, making text easier to read.
WCAG Success Criterion
1.4.3 Contrast (Minimum) – Level AA
Text must have a contrast ratio of at least:
- 4.5:1 for normal (small) text
- 3:1 for large text
Large text is defined as:
- 18pt (24 CSS pixels) or larger, or
- 14pt bold (19 CSS pixels) or larger
These requirements apply even when text is part of an image.
A contrast ratio of 1:1 indicates identical foreground and background colors and is a definite WCAG failure.
What Counts as Text
This criterion applies to all visible text that conveys information, including:
- Paragraph text and headings
- Labels, form instructions, and error messages
- Button and link text
- Text embedded within images
If users must read the text to understand or use the content, it must meet the minimum contrast requirements.
What This Criterion Does Not Apply To
This success criterion does not apply to:
- Logos and brand names, which are explicitly exempt under WCAG
- Purely decorative text that conveys no information
- Disabled form controls, where text is intentionally inactive
It also does not cover non-text visual elements such as icons, focus indicators, or graphical controls. These are addressed separately under SC 1.4.11 (Non-text Contrast).
Understanding Contrast Ratios
Contrast ratios are calculated using relative luminance, a WCAG-defined measurement of perceived brightness. You do not need to calculate this manually; tools handle the math, but the outcome is simple:
Higher contrast ratios make text easier to distinguish from its background.
For example:
- White text (#FFFFFF) on a blue background (#0000FF) produces a contrast ratio of 8.59:1, which passes WCAG Level AA and AAA for both small and large text.
By contrast:
- Light grey text on a white background often falls below 2:1, making it unreadable for many users.
Why This Matters
Many people with low vision experience reduced contrast sensitivity, meaning different colors may appear to have nearly the same brightness. When text blends into its background, letter shapes and edges become difficult to distinguish.
Low vision is significantly more common than total blindness. In addition, approximately 1 in 12 people has some form of color vision deficiency. Without sufficient contrast, users may be unable to read content even when the text size is increased.
Insufficient contrast forces users to zoom excessively, guess at content, or abandon tasks entirely.
Transparency and Complex Backgrounds
Contrast calculations must account for the actual visible background behind the text. This becomes more complex when:
- Background gradients are used
- Transparency or opacity affects the background
- Background colors are applied via pseudo-elements
- Borders or overlays create layered backgrounds
- Foreground elements overlap other elements
- Content is partially outside the viewport
In these cases, manual review is often required, as automated tools may not reliably determine the effective background color.
How to Fix the Problem
To meet this criterion:
- Ensure all text has sufficient contrast against its background
- Adjust text color, background color, or both to meet the required ratio
- Test contrast across all states (default, hover, focus, disabled where applicable)
- Ensure text placed on images or gradients meets contrast requirements across the entire visible area
Testing Contrast
Contrast can be evaluated using tools such as:
- Color contrast analysers
- WebYes’s Color Contrast Checker to instantly measure contrast ratios and verify WCAG compliance
- axe DevTools browser extensions
- axe-core accessibility engine
Automated tools are effective for identifying many issues, but they have limitations. For example, some tools may not evaluate text on background images or complex layered layouts. These cases still fall under WCAG requirements and must be checked manually.
Rule Description
All text elements must have sufficient contrast between foreground text and background colors in accordance with WCAG 2 Level AA contrast ratio thresholds.
These thresholds are unchanged in WCAG 2.2.
The Algorithm
This rule checks:
- Visible text elements
- The contrast between the text color and the visible background
- Whether the contrast meets WCAG Level AA thresholds
Some automated tools may not report:
- Text on background images
- Text obscured by other elements
These are tool limitations, not WCAG exceptions, and still require manual evaluation.
Wrapping Up
Minimum color contrast is essential for readable content. When text does not clearly stand out from its background, users with low vision or color perception differences may be excluded from accessing information entirely.
If users have to strain, guess, or rely on assistive technology just to read text, the contrast is insufficient, and the content fails this criterion.
