Contrastly — Open-source Tailwind Color Contrast Checker
An open-source tool for quickly checking WCAG AA / AAA contrast results across Tailwind CSS palettes, custom hex values, and foreground and background combinations. It brings color lookup and contrast checking into one lightweight interface designed around everyday frontend work.
Period: Jul 2025 – Present
Where this experience applies
An open-source tool that translates accessibility requirements into a practical part of everyday UI and frontend implementation workflows.
- Make contrast checking more efficient during UI implementation
- Check WCAG results while working with Tailwind CSS colors
- Build accessibility considerations into frontend implementation
Overview
Contrastly is a lightweight web tool for checking WCAG AA / AAA contrast results across Tailwind CSS palettes, custom hex values, and foreground and background combinations. I led the project from concept development and requirements through UI and accessibility design, frontend implementation, release, and ongoing maintenance. The tool launched in July 2025, and I refined and released its source code through Sola Studio in July 2026.
Background
While building a separate flash card application, checking a Tailwind CSS color repeatedly meant looking up the class, converting it to a hex value, and moving to another tool to check the contrast. I created Contrastly to bring Tailwind color selection, custom hex input, and WCAG contrast results into one interface.
Design & Implementation Highlights
Bringing a Fragmented Workflow into One Interface
The tool combines Tailwind color selection, custom hex input, and WCAG results so users can check combinations without moving between color references, converters, and separate contrast-checking tools.
Supporting UI and Semantic Color Decisions
Tailwind CSS palettes and custom hex values can be compared as foreground and background colors, supporting practical decisions around interface colors and semantic color tokens.
Accessibility within the Tool Itself
The interface was designed and implemented with semantic HTML, keyboard operation, reduced-motion support, and screen reader use in mind.
Released as Open Source One Year after Launch
After continuing to maintain the tool following its July 2025 launch, I refined the codebase and released it as an open-source Sola Studio project in July 2026. Issues and pull requests provide a path for others to contribute improvements.
Outcome
Lighthouse
100 across all categories, including Accessibility
Result at the time of measurement
- Combined Tailwind CSS color lookup, custom hex input, and contrast checking into one lightweight tool
- Released the tool as an open-source resource for frontend developers, designers, and accessibility reviewers