Start here
Before You Fix It: What This Check Means
Contrast determines whether text remains readable across visual conditions and device quality. In plain terms, this tells you whether people using keyboards or assistive tech can use the page reliably. 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: issues here can block completion for assistive-tech users and create compliance exposure.
How to use this result: treat this as directional evidence, not final truth. Automated checks do not replace complete manual assistive-technology validation. First, confirm the issue in live output: verify with keyboard flow and at least one assistive-technology pass Then ship one controlled change: Normalize text/surface color tokens with tested contrast pairs. Finally, re-scan the same URL to confirm the result improves.
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 (plain English)
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.
Technical handoff message
Copy and share this with your developer.
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
- WCAG 2.2: Contrast minimum
- WCAG 2.2: Non-text contrast
- W3C WAI: Color contrast resources
- MDN: Web accessibility and color
Need a practical approved color-pair token set for your UI states? Send support your current palette and base typography scale.
