🌱 About Contrastly

Hi there! 👋 Thanks for stopping by.

Tailwind Colors Contrast Checker (nicknamed Contrastly) is a little tool I built because I often found myself jumping between Tailwind docs, hex converters, and contrast checkers. All of those tools are super helpful on their own — but I wanted something that brought them together in one place, simple and friendly, with accessibility at its core.

I made it not just for myself, but for anyone who cares about making the web a little easier to read. Whether you’re a designer, a frontend dev, or just someone curious about colors, I hope it makes your workflow smoother.✨

🎯Why I Made This

Sometimes I’d copy a Tailwind color, paste it into a hex converter, then paste it again into a contrast checker… only to forget which color I was testing and go back to the docs. It worked, but it felt clunky.

So instead of juggling tabs, I thought: why not have a tool that connects these steps directly? That’s how Contrastly was born — out of curiosity, a desire to save time, and the hope that it could be handy for others too.

Along the way, I put extra care into accessibility and performance. Every page scores 100 across all Lighthouse categories (including Accessibility and Best Practices), and I tested it with real assistive tech so it works for more people, not just in theory.

👥Who It’s For

• Designers checking color accessibility in real projects
• Frontend developers working with Tailwind
• Anyone learning about WCAG and inclusive design

✨What Makes Contrastly Different

• Tailwind palettes included by default
• Copy buttons and hex input for quick iteration
• Real-time WCAG AA / AAA checks
• Built-in accessibility support (keyboard navigation, reduced motion, screen reader-friendly)
• Built-in accessibility support (keyboard navigation, reduced motion, screen reader-friendly)

🔗Let’s Connect

If this tool was helpful (or even if you’re just curious about my work), I’d be happy if you stopped by: