DEV Community

Cover image for πŸ–ŒοΈ Contrastly β€” Instantly Check Tailwind Colors Against WCAG AA/AAA
Yoko
Yoko

Posted on

πŸ–ŒοΈ Contrastly β€” Instantly Check Tailwind Colors Against WCAG AA/AAA

I often found myself double-checking Tailwind colors against WCAG contrast rules.
So I built a tiny tool: Contrastly.

Pick a Tailwind token β†’ see AA/AAA pass/fail instantly.

I’d love to hear if it’s useful for you, or if there’s an edge case I missed. Feedback welcome πŸ™Œ

πŸ‘‰ https://www.contrastly.yokotools.dev/

Would you use this in your workflow?

Top comments (6)

Collapse
 
jess profile image
Jess Lee •

This is awesome!

Collapse
 
yokoworks profile image
Yoko •

Thanks!

Collapse
 
masterdevsabith profile image
menso core •

πŸ”₯❀️

Collapse
 
yokoworks profile image
Yoko •

Thanks! πŸ”₯❀️

Collapse
 
iampraveen profile image
Praveen Rajamani •

Cool tool! This makes checking colour contrast with Tailwind so much easier.

Collapse
 
yokoworks profile image
Yoko •

Appreciate it! Happy it makes things easier πŸ”₯