Color Contrast
Sufficient color contrast helps all users, especially those with low vision or color deficiencies, read and interact with your content.
⚠️
Poor contrast can make text and UI elements invisible or difficult to distinguish.
WCAG Contrast Requirements
| Level | Text Size | Minimum Contrast Ratio |
|---|---|---|
| AA | Normal text (< 18pt / 24px) | 4.5:1 |
| AA | Large text (≥ 18pt / 24px or bold ≥ 14pt / 18.66px) | 3:1 |
| AAA | Normal text | 7:1 |
| AAA | Large text | 4.5:1 |
Tips to Improve Contrast
-
Choose accessible color pairs
Pick foreground and background colors that meet or exceed the ratios above. -
Use a contrast checker tool
Test your palettes during design and development to catch issues early. -
Adjust text weight and size
Increasing font weight or size can help meet contrast requirements. -
Avoid relying on color alone
Combine contrast with other cues (e.g. underline links, icons) to convey meaning.
Remember: Even decorative graphics benefit from clear separation—ensure icons and controls stand out.
Example: Before & After
<!-- Poor: 2.5:1 -->
<p style="color: #777777; background: #ffffff;">
This text fails contrast requirements.
</p>
<!-- Improved: 4.8:1 -->
<p style="color: #333333; background: #ffffff;">
This text meets AA contrast standards.
</p> Consistently review your color palette across your entire UI—small changes can have a big impact on readability!