Goal
Provide strong visual contrast between text (and images of text) and their background to support users with low vision, aging eyes, or color vision deficiencies, going beyond the minimum requirement of 1.4.3.
Key Points
- Applies to text and images of text.
- Enhanced contrast ratios:
- Normal text: 7:1 minimum
- Large text (≥18pt or 14pt bold): 4.5:1 minimum
- Helps users in bright environments or with reduced screen clarity.
- Decorative text and logos are exempt.
- Not only about colors — background effects, gradients, or transparency can also reduce real contrast.
Short Summary
To make content readable for the widest range of users, text should have very strong contrast against its background — darker text on lighter backgrounds or vice versa. Even if content passes 1.4.3, it should aim to meet 1.4.6 when possible.
Example Issues and Fixes
Passes Minimum (1.4.3) but Fails Enhanced (1.4.6)
Fail
<div class="p-8 flex flex-col w-full gap-8">
<div class="p-6 bg-white rounded shadow">
<p class="text-gray-500 text-base">
This text meets the minimum contrast but is still hard to read for some users.
</p>
</div>
</div>This text meets the minimum contrast but is still hard to read for some users.
Pass
<div class="p-8 flex flex-col w-full gap-8">
<div class="p-6 bg-white rounded shadow">
<p class="text-gray-900 text-base">
This text meets the minimum contrast but is still hard to read for some users.
</p>
</div>
</div>This text meets the minimum contrast but is still hard to read for some users.
Low Contrast Text Over Image
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/claudio-testa-SO3JtE3gZo-unsplash.jpg" alt="" class="w-full h-48 object-cover rounded">
<p class="absolute bottom-4 left-4 text-white text-lg">
Sunny Beach Resort
</p>
</div>
</div>
Sunny Beach Resort
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/claudio-testa-SO3JtE3gZo-unsplash.jpg" alt="" class="w-full h-48 object-cover rounded">
<div class="absolute inset-0 bg-[#1c2623]/75 rounded"></div>
<p class="absolute bottom-4 left-4 text-white text-lg font-semibold">
Sunny Beach Resort
</p>
</div>
</div>Sunny Beach Resort
Quick Checklist
- Does text meet 7:1 contrast (normal) or 4.5:1 contrast (large)?
- Are overlays or solid backgrounds used behind text on images?
- Are disabled buttons, form labels, and captions readable under high contrast settings?
- Is the design still legible under grayscale or low-brightness viewing?