Goal
Ensure that text and images of text have enough contrast against their background so that users with low vision or color deficiencies can read the content comfortably.
Key Points
- Applies to text and images of text (not decorative elements).
- Minimum contrast ratio:
- Normal text: 4.5:1
- Large text (≥18pt or 14pt bold): 3:1
- Logos and decorative text are exempt.
- Contrast should be tested against the background color, including gradients or overlays.
Short Summary
Readable text must have enough contrast with its background. If text blends in, many users — especially with low vision or color blindness — won’t be able to read it. Use sufficient color contrast or adjust font size and weight.
Example Issues and Fixes
Low Contrast Text
Fail
<div class="p-8 flex flex-col w-full gap-8">
<div class="p-6 bg-white rounded shadow">
<p class="text-gray-300 text-base">
This light gray text is hard to read against a white background.
</p>
</div>
</div>This light gray text is hard to read against a white background.
Pass
<div class="p-8 flex flex-col w-full gap-8">
<div class="p-6 bg-white rounded shadow">
<p class="text-gray-800 text-base">
This dark gray text is easy to read against a white background.
</p>
</div>
</div>This dark gray text is easy to read against a white background.
Text Over Image Without Background
Fail
<div class="p-8 flex flex-col w-full gap-8">
<div class="relative">
<img src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/dominik-schroder-FIKD9t5_5zQ-unsplash.jpg" alt="" class="w-full h-48 object-cover rounded">
<p class="absolute bottom-4 left-4 text-white text-lg">
Beautiful Nature
</p>
</div>
</div>
Beautiful Nature
Pass
<div class="p-8 flex flex-col w-full gap-8">
<div class="relative">
<img src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/dominik-schroder-FIKD9t5_5zQ-unsplash.jpg" alt="" class="w-full h-48 object-cover rounded">
<div class="absolute inset-0 bg-[#32474c]/50 rounded"></div>
<p class="absolute bottom-4 left-4 text-white text-lg font-semibold">
Beautiful Nature
</p>
</div>
</div>Beautiful Nature
Quick Checklist
- Does all text meet 4.5:1 (normal) or 3:1 (large) contrast?
- Is there enough contrast for text over images or gradients?
- Are placeholder texts or disabled buttons readable?
- Have decorative or brand-only elements been excluded appropriately?