Tailwind A11y Checker 🌊♿

Stop skipping accessibility in Tailwind CSS.

This VS Code extension analyzes your Tailwind classes in real-time to ensure your designs are accessible to everyone, helping you avoid low-contrast ratios and missing focus states.

🚀 Features

1. Real-time Color Contrast Analysis

Ever used bg-blue-500 with text-blue-600? It looks "cool" but it's unreadable for many users. The extension flags these issues instantly and calculates the WCAG contrast ratio for you.

2. Intelligent "Auto-Fix" Suggestions

Don't just get warned about a problem—fix it with one click. The extension suggests the next closest Tailwind shade that meets the WCAG 4.5:1 requirement for normal text.

3. Focus State Detection

Interactive elements (buttons, links, inputs) should always have a visible focus state for keyboard users. The extension warns you if you've forgotten to add focus: classes to these elements.

🛠️ How to use

Simply install the extension and start coding. It will automatically scan:

• .html
• .jsx / .tsx (React/Next.js)
• .vue
• .svelte
• .js / .ts

💎 Why it matters

Accessibility isn't just a "nice-to-have"—it's a requirement for many businesses to avoid legal issues and provide a better experience for all users. Tailwind makes it easy to build fast; Tailwind A11y Checker makes it easy to build right.

🌈 Supported Colors

Supports the full default Tailwind CSS color palette (v3.x).

Made with ❤️ by codewithnuh