🎨CSS & Color

WCAG High Contrast Pairs

Safe color combinations that meet AA or AAA standards.

Explanation

Ensuring your text is readable for everyone, including users with visual impairments.

Examples

Black on White
Output
Ratio 21:1 (AAA)
Indigo on White
Output
Ratio 5.2:1 (AA)

Code Examples

Safe Pairs 
Light Theme:
Text: #1e293b over BG: #ffffff (Ratio 12.6:1)

Dark Theme:
Text: #f8fafc over BG: #0f172a (Ratio 15.8:1)

Try it Now

Open in Contrast Checker

💡 Tips

  • Minimum ratio for normal text is 4.5:1 (AA)
  • Large text (18pt+) can be 3:1
  • Avoid light grey text on white backgrounds

⚠️ Common Pitfalls

  • Assuming "it looks okay to me" means it is accessible
← Back to All Templates