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
Top comments (0)