Color Contrast Check
How VitalSite checks your text color contrast against WCAG ratios so low-vision users can read your site — and how to fix contrast failures.
Color contrast is the difference in brightness between text and its background. When it is too low, text becomes unreadable for people with low vision, color blindness, or anyone on a phone in sunlight. VitalSite checks contrast on every page using axe-core, mapped to WCAG 2.1 success criterion 1.4.3 (Contrast Minimum).
What VitalSite checks
- Normal text must have a contrast ratio of at least 4.5:1 against its background.
- Large text (roughly 18pt, or 14pt bold) must have at least 3:1.
- We flag text that fails these thresholds, including text over images and gradients where it is easy to miss.
Why it matters
Contrast failures are one of the most common — and most avoidable — accessibility issues, and a frequent basis for ADA website complaints. Low contrast also hurts every user in bright light or on a cheap screen, so fixing it improves readability for everyone.
How to fix it
Darken text or lighten backgrounds until the ratio passes:
- Avoid light-gray text on white (
#999on#ffffails). Aim for#595959or darker for body text on white. - For text over an image, add a solid or semi-opaque overlay behind it.
- Check both your light and dark themes — a color that passes in one often fails in the other.
Use a contrast checker to confirm the ratio before shipping.
Verify the fix
Re-scan your domain. The Color Contrast check should show no failing text. On Pro, VitalSite lists each failing element with its measured ratio.
Run a free full-domain scan to see whether this affects your site — every page, with an exact fix guide. Pro and Agency plans add PDF export and monitoring.
See if this affects your site
Run a free full-domain scan — this check runs on every page, with an exact fix guide.