Fix Guide
How to Fix Low Contrast Text
Text or button color may not be readable enough for all users.
Recommended fix
Use accessible foreground/background pairs and test important states such as hover/focus/disabled.
This guide is designed to pair with a scanner report. Run a URL scan first, then follow the implementation steps.
Developer task
Update CSS variables for text, background, border, focus ring, and CTA states.
Implementation steps
How to apply this fix
- List the failing text/background pairs from the accessibility report.
- Adjust colors to meet at least 4.5:1 for body text and 3:1 for large text and UI components.
- Verify hover, focus, active, and disabled states also pass contrast.
- Apply the new values via CSS variables and re-scan to confirm the issues clear.
Verify
Re-run the URL scan after deploying the change to confirm the issue clears and the Themerella Score updates.
Related guides