Web Accessibility: Choosing Colors with Sufficient Contrast (Hex Guide)

Contrast is not just aesthetic — it’s a requirement. Here are the essential ratios and how to achieve them.

WCAG basics

• Text below 18pt/14pt bold: 4.5:1
• Large text and UI affordances: 3:1

Use HexTints to nudge lightness until your foreground and background reach the target ratio.