Loading...
Text and background colors must have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Contrast Ratio: 21:1 (AAA)
This is the highest possible contrast and provides excellent readability for all users.
Contrast Ratio: 15.3:1 (AAA)
Dark themes can also provide excellent contrast when implemented correctly.
Contrast Ratio: 8.2:1 (AAA)
Subtle color combinations can still provide excellent accessibility.
Contrast Ratio: 5.1:1 (AA for Large Text)
Large text (18px+ or 14px+ bold) needs only 3:1 contrast.
<!-- Good Example: High Contrast Text -->
<div style="background-color: #ffffff; color: #000000; padding: 20px;">
<h1 style="font-size: 24px; font-weight: bold;">
High Contrast Heading (21:1 ratio)
</h1>
<p style="font-size: 16px; line-height: 1.5;">
This text has excellent contrast and is easy to read
for users with visual impairments.
</p>
</div>
<!-- Good Example: Dark Theme -->
<div style="background-color: #1a1a1a; color: #ffffff; padding: 20px;">
<h2 style="font-size: 20px; color: #ffffff;">
Dark Theme with Good Contrast (15.3:1 ratio)
</h2>
<p style="font-size: 16px; color: #e0e0e0;">
Light text on dark background also provides
excellent readability when done correctly.
</p>
</div>
<!-- Bad Example: Poor Contrast -->
<div style="background-color: #ffcccc; color: #ff0000; padding: 20px;">
<p style="font-size: 16px;">
This red text on pink background has poor contrast (2.3:1)
and fails WCAG requirements.
</p>
</div>Remember: Good contrast benefits everyone, especially users with visual impairments, color vision deficiencies, and those using devices in bright environments.
Test your colors with actual users and automated tools for the best results.