Hue Dat Boy - Color Contrast Checker for WCAG & APCA

Website: Hue Dat Boy

Hue Dat Boy is a color contrast checker built with Next.js, Tailwind CSS, and shadcn. It helps designers, developers, and anyone interested in web accessibility to evaluate color combinations for compliance with WCAG 2.2 and APCA standards.

Features

• Color Contrast Testing: Select text and background colors to check their contrast ratio.
• Accessibility Standards: Supports WCAG 2.2 (AA and AAA) and APCA compliance checks.
• Font Selection: Choose from various Google Fonts to see how your color combinations will look in different typefaces.
• Simulation Modes: Visualize colors as seen by individuals with different types of color blindness.

Getting Started

Follow these steps to run the project locally:

Installation

Clone the repository and navigate to the project directory:

git clone https://github.com/seanpstanley/hue-dat-boy.git
cd hue-dat-boy

Install dependencies:

npm install
# or
yarn install
# or
pnpm install

Running the Development Server

Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser to see the result.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request for any bugs or feature requests.

License

This project is licensed under the MIT License.

Acknowledgments

• Next.js for the robust framework.
• WCAG Guidelines for accessibility standards.
• Vercel for deployment and hosting.

---