Tool

WebAIM Contrast Checker

WebAIM Free Beginner

A pretty palette that no one can read reads as careless, and this is the fastest way to catch that before it ships. Paste a foreground and background hex, and it tells you instantly whether the pair passes WCAG AA and AAA for text and UI elements, so your brand colors survive contact with real screens and real eyes. Run your buttons, links, and body text through it, and fix the near-misses that would otherwise make your product feel low-effort.

• Aim for at least 4.5:1 contrast for body text and 3:1 for large text and UI components (borders, icons); anything below reads as hard to use.
• Your prettiest brand color is often your least legible: test it as button text and link color, not just as a swatch, and darken or pair it as needed.
• Use the pass or fail readout to keep a color while adjusting only its shade, so you stay on brand and stay readable at the same time.