Enter two colors to calculate the WCAG contrast ratio. Check compliance for normal text, large text, and UI components at AA and AAA levels.
The quick brown fox jumps over the lazy dog. This paragraph demonstrates how body text appears at normal size with these two colors combined.
Small text is harder to read at low contrast ratios. WCAG requires at least 4.5:1 for normal text and 3:1 for large text at the AA level.
Reversed: background color on foreground color.
See how your foreground/background pair looks under common color vision deficiencies.
Take contrast-safe palettes into your project
The Dark Mode UI Kit ships pre-tested light/dark pairings with contrast ratios that pass AA — structured as CSS variables, Figma tokens, and Tailwind config.
What's next
