Colour Contrast Too Low — Fails WCAG AA Requirements

Start here

Before you fix it: what this check means

Scavo samples text and background colours to find combinations that may be hard to read. It uses browser measurements when available and limited colour information from the page source otherwise. Scavo evaluates inline style color pairs only. It inspects text elements with inline color styles and compares foreground/background contrast.

Why this matters in practice: readable content and usable controls help more visitors complete what they came to do.

Use this as evidence, not a final verdict. An automated scan does not replace keyboard, screen-reader, and visual checks by a person. Check the live site first. Try the affected page with a keyboard and a screen reader Make one controlled change. Normalize text/surface color tokens with tested contrast pairs. Re-scan the same URL and compare the finding; check the feature yourself as well.

Background sources

TL;DR: Text and background colour combinations don't meet WCAG AA contrast ratios, making content hard or impossible to read for many users.

Approximately 8% of males and 0.5% of females have colour vision deficiency — roughly 1 in 12 men worldwide (Vision Center). WCAG AA requires a minimum 4.5:1 contrast ratio for normal text. Low contrast also affects everyone reading on mobile screens in bright sunlight. With over 5,100 ADA web accessibility lawsuits filed in 2025 — a 20% increase from 2024 (EcomBack) — contrast failures are actionable legal risk.

What Scavo checks (quick version)

Scavo evaluates inline style color pairs only. It inspects text elements with inline color styles and compares foreground/background contrast.

Important details in this check:

It calculates contrast ratio from detected color values.
It uses WCAG-style thresholds:
Normal text target: 4.5:1
Large text target: 3.0:1
It can infer background from ancestors; if none is found inline, it assumes white (#fff).
It does not fully resolve class-based/external stylesheet colors.

How Scavo scores this check

Result behavior:

Fail: one or more clearly low-contrast pairs detected
Warning: near-threshold or marginal pairs detected
Pass: sampled pairs meet threshold
Info: no machine-verifiable inline pairs found

In your scan report, this appears under What failed / What needs attention / What is working for color_contrast, followed by Recommended next steps and Technical evidence (for developers) when needed.

Scan key: color_contrast
Category: ACCESSIBILITY

Why fixing this matters

Low contrast makes reading harder and slower for many users, not just a small edge case. It increases friction on pricing, forms, legal consent, and support pages where clarity matters most.

Design-wise, contrast regressions often appear during brand refreshes or theme adjustments when visual style wins over readable defaults.

Common reasons this check flags

Light gray text on white or near-white surfaces.
Text over gradients/images without stable overlays.
Small text styled with colors meant for larger headings.
Inline overrides that bypass tokenized design-system colors.

If you are not technical

Ask for a contrast audit on primary text, buttons, and form labels.
Prioritize high-traffic conversion and onboarding pages.
Require design tokens for text/surface pairs to prevent drift.
Re-scan and verify failure count trends down.

Scavo flagged Color Contrast (color_contrast). Please correct low-contrast text/background pairs to meet WCAG thresholds (4.5:1 normal, 3.0:1 large), and validate rendered states beyond inline styles.

If you are technical

Normalize text/surface color tokens with tested contrast pairs.
Fix failing inline color usages first, then audit class-based styles.
Ensure overlays/hero text maintain contrast across responsive breakpoints.
Include contrast checks in design QA and component tests.
Validate hover/focus/disabled states, not just default state.

How to verify

Use browser accessibility tools to inspect computed contrast.
Test representative pages in both desktop and mobile breakpoints.
Confirm text remains readable on themed backgrounds and state changes.
Re-run Scavo and confirm fail/warn examples are cleared.

What this scan cannot confirm

It does not fully evaluate class/external CSS contrast combinations.
It may assume white background when inline background is absent.
It does not replace full rendered-state accessibility audits.

Owner checklist

[ ] Assign owner for text/background token standards.
[ ] Add contrast checks to design-system review gates.
[ ] Audit critical UI states (hover/focus/error/disabled).
[ ] Recheck after branding/theme updates.

FAQ

Why can this check miss some contrast issues?

It focuses on inline style signals. Class-based styles and dynamic themes need additional rendered-state testing.

Is `3:1` always enough?

No. 3:1 is generally for large text. Normal-sized text usually needs 4.5:1.

Are gradients and images risky for contrast?

Yes. Contrast can vary by position and breakpoint unless overlays/constraints are controlled.

What should we fix first?

Start with body text, labels, and CTA text on key conversion pages.

Sources

Need a practical approved color-pair token set for your UI states? Send support your current palette and base typography scale.

Colour Contrast Too Low — Fails WCAG AA Requirements