Tailwind A11y Checker 🌊♿ — Stop shipping inaccessible UIs by accident

Real talk: I used to think "accessibility" meant running Lighthouse before deploy. Then a user emailed me saying they couldn't read half my app because the contrast was garbage.

Turns out bg-blue-500 + text-blue-600 looks "clean" but fails WCAG hard. And I'd shipped that combo everywhere.

So I built Tailwind A11y Checker — a VS Code extension that catches these mistakes while you code:

What it actually does:

✅ Real-time contrast checks — Flags unreadable text combos and shows the exact WCAG ratio

✅ One-click fixes — Suggests the closest Tailwind shade that actually passes (no more guessing blue-700 vs blue-800)

✅ Focus state reminders — Yells at you if your button has no focus: classes (keyboard users will thank you)

Works everywhere:

.html • .jsx/.tsx • .vue • .svelte • .js/.ts

No setup. No config. Just install and your editor starts keeping you honest.

👉 Grab it: VS Code Marketplace

👉 Found a false positive? Open an issue — I'm actively tweaking the rules

👉 Using a custom color palette? Let me know — planning to add support

Built this because I kept failing basic a11y checks. Figured if it helps me, it might help you too.

Made with ❤️ by codewithnuh