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!