A modern, accessible, and visually stunning React application for checking color contrast ratios against WCAG 2.1 standards. Built with React, TypeScript, and Tailwind CSS.
In an inclusive digital world, readability is not a feature—it's a requirement. The Cosmic Color Contrast Checker was built to provide designers and developers with a tool that is not only highly functional but also a pleasure to use. It removes the guesswork from accessibility compliance, ensuring your digital creations can be used and enjoyed by everyone, regardless of their visual abilities.
- ✅ Instant Contrast Calculation: Get real-time feedback on contrast ratios as you type or pick colors.
- 🎨 Live Color Preview: See how your foreground and background colors look together instantly.
- ♿ Full WCAG 2.1 Compliance Check: Verifies your color pair against AA and AAA standards for both normal (14pt) and large (18pt) text.
- Swap Colors**: Instantly switch foreground and background colors with a single click.
- 퓨 Pure TypeScript Logic: All color and contrast calculations are handled with lightweight, dependency-free utility functions for maximum performance.
- 🌌 Stunning UI/UX: Features an animated cosmic/galaxy background for a unique user experience.
- 📱 Fully Responsive: Works seamlessly on desktop, tablet, and mobile devices.
- 📝 In-depth SEO Article: Includes a comprehensive 3500+ word guide on web accessibility, complete with JSON-LD schema for top-tier SEO.
- 📚 Built-in Modals: Contains essential informational pages like About, Privacy Policy, and a User Guide.
- Framework: React 18+
- Language: TypeScript
- Styling: Tailwind CSS
- Linting/Formatting: ESLint & Prettier (for local development)
- Build Tool: Vite (recommended for local development)
To run this project locally, follow these simple steps.
- Node.js (v16 or higher recommended)
- npm or yarn
-
Clone the repository:
git clone https://github.com/your-repo/cosmic-color-contrast-checker.git cd cosmic-color-contrast-checker -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173(or the port specified by Vite).
Contributions, issues, and feature requests are welcome! We believe in the power of the community to build and improve open-source tools.
Feel free to check the issues page. If you'd like to contribute, please fork the repository and create a pull request.
This project is licensed under the MIT License - see the LICENSE.md file for details.
This project is proudly powered by HSINI MOHAMED. You can find more of his work at doodax.com or on GitHub.