PHPackages                             theunwindfront/tailwindcss-contrast-checker - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. theunwindfront/tailwindcss-contrast-checker

ActiveLibrary[Utility & Helpers](/categories/utility)

theunwindfront/tailwindcss-contrast-checker
===========================================

A build-time CLI tool to catch accessibility (a11y) violations by checking Tailwind CSS text and background color combinations for WCAG contrast ratios.

v1.0.0(1mo ago)00MITJavaScriptPHP ^8.2

Since Jun 23Pushed 1mo agoCompare

[ Source](https://github.com/theunwindfront/tailwindcss-contrast-checker)[ Packagist](https://packagist.org/packages/theunwindfront/tailwindcss-contrast-checker)[ RSS](/packages/theunwindfront-tailwindcss-contrast-checker/feed)WikiDiscussions main Synced 2w ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

@theunwindfront/tailwindcss-contrast-checker
============================================

[](#theunwindfronttailwindcss-contrast-checker)

[![Latest Version on Packagist](https://camo.githubusercontent.com/f5098df91c12a73857e52bf8e65d7984bd5843fe05c137b81823d69949a78924/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f746865756e77696e6466726f6e742f7461696c77696e646373732d636f6e74726173742d636865636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/theunwindfront/tailwindcss-contrast-checker)[![Total Downloads](https://camo.githubusercontent.com/1baccda9e3e90b6bee88eee42d9b9c1f6bd81529549a3e9f854a1582b25ecc4d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f746865756e77696e6466726f6e742f7461696c77696e646373732d636f6e74726173742d636865636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/theunwindfront/tailwindcss-contrast-checker)[![NPM Version](https://camo.githubusercontent.com/a7d5a216743e3713aa347eae99ad1dcebd7751ffefcc819787652328327767b9/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f253430746865756e77696e6466726f6e742f7461696c77696e646373732d636f6e74726173742d636865636b65722e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@theunwindfront/tailwindcss-contrast-checker)[![NPM Downloads](https://camo.githubusercontent.com/b43355899e64628a2659ff9f5b675b7967144a38f68f4f76fcbccf40c113cd4e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f40746865756e77696e6466726f6e742f7461696c77696e646373732d636f6e74726173742d636865636b65722e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@theunwindfront/tailwindcss-contrast-checker)[![License](https://camo.githubusercontent.com/ef4931b0dfd8fe6e51582223884f01c9df877c15d2937700c9d22b9c539cb480/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f746865756e77696e6466726f6e742f7461696c77696e646373732d636f6e74726173742d636865636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/theunwindfront/tailwindcss-contrast-checker)

A fast, lightweight CLI tool that scans your codebase for accessibility (a11y) violations by checking Tailwind CSS text and background color combinations against WCAG 2.1 contrast standards.

---

The Problem
-----------

[](#the-problem)

Accessibility (a11y) is often treated as an afterthought in rapid UI development. Developers frequently combine text and background utility classes (like `bg-gray-300 text-white`) that fail WCAG contrast ratios, making the application illegible for visually impaired users. Catching these issues manually or relying on browser extensions is slow and error-prone.

The Solution
------------

[](#the-solution)

This CLI tool scans your HTML, Vue, React, Svelte, or Blade templates, extracts the Tailwind utility classes, and mathematically calculates the relative luminance of overlapping background and text color pairs. It warns you in the terminal *before* you ship to production.

```
# Example output in terminal
src/components/Button.jsx
  Line 12: FAIL [ Aa ] bg-gray-300 + text-white -> Contrast Ratio: 1.6:1 (Needs 4.5:1 for AA)
```

---

Installation
------------

[](#installation)

Install the package via Composer (for Laravel integration) and NPM:

```
composer require theunwindfront/tailwindcss-contrast-checker
npm install -D @theunwindfront/tailwindcss-contrast-checker
```

---

Usage Guide
-----------

[](#usage-guide)

You can run the checker manually or add it to your CI/CD pipeline or build scripts.

```
npx tailwind-contrast "resources/views/**/*.blade.php"
```

### Adding to package.json

[](#adding-to-packagejson)

```
"scripts": {
  "lint:a11y": "tailwind-contrast \"src/**/*.{html,js,jsx,ts,tsx,vue}\""
}
```

### Features

[](#features)

- 🚀 **Framework Agnostic**: Scans HTML, JS, JSX, TS, TSX, Vue, Svelte, and Blade files.
- 🎨 **Smart Defaults**: Supports standard Tailwind CSS v3 and v4 default colors.
- 📐 **Arbitrary Values**: Supports arbitrary hex color values (e.g., `bg-[#ff0000]`).
- ⚡ **High Performance**: Powered by `fast-glob` for rapid codebase scanning.

---

👥 Credits
---------

[](#-credits)

- **[Sagar Pansuriya](https://github.com/theunwindfront)** - Lead Creator & Developer

🤝 Support
---------

[](#-support)

For questions or issues, contact ****

📄 License
---------

[](#-license)

The MIT License (MIT). Please see [License File](LICENSE) for more information.

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance90

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

45d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/57458034?v=4)[Sagar Pansuriya](/maintainers/theunwindfront)[@theunwindfront](https://github.com/theunwindfront)

---

Top Contributors

[![theunwindfront](https://avatars.githubusercontent.com/u/57458034?v=4)](https://github.com/theunwindfront "theunwindfront (3 commits)")

---

Tags

accessibilitycontrast-checker

### Embed Badge

![Health badge](/badges/theunwindfront-tailwindcss-contrast-checker/health.svg)

```
[![Health](https://phpackages.com/badges/theunwindfront-tailwindcss-contrast-checker/health.svg)](https://phpackages.com/packages/theunwindfront-tailwindcss-contrast-checker)
```

###  Alternatives

[illuminate/pagination

The Illuminate Pagination package.

12234.6M1.1k](/packages/illuminate-pagination)[illuminate/pipeline

The Illuminate Pipeline package.

9350.2M303](/packages/illuminate-pipeline)[illuminate/broadcasting

The Illuminate Broadcasting package.

7127.4M231](/packages/illuminate-broadcasting)[illuminate/redis

The Illuminate Redis package.

8314.8M398](/packages/illuminate-redis)[illuminate/cookie

The Illuminate Cookie package.

224.7M141](/packages/illuminate-cookie)[forjedio/inertia-table

Backend-driven dynamic tables for Laravel + Inertia.js

272.0k](/packages/forjedio-inertia-table)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)