Why it matters
Low contrast makes text unreadable for many users, especially those with low vision or in bright environments.
Common violations
- Light gray text on white backgrounds
- Low-contrast button labels
- Muted placeholder text used as labels
Code examples
Bad
<p class="text-slate-400">Low contrast text</p>Good
<p class="text-slate-100">Readable text</p>How to fix
Adjust color pairs to meet contrast ratios of at least 4.5:1 for normal text and 3:1 for large text.
Related criteria
Related resources
Scan your site