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 built 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 uses semantic HTML and supports keyboard interaction and reduced motion. Accessibility checks included eslint-plugin-jsx-a11y for source-level analysis and Playwright with axe-core across key desktop and mobile screens and interaction states. End-to-end tests also covered keyboard operation, focus behavior, live-region updates, input validation, and the accuracy of WCAG results, alongside testing with VoiceOver. Findings from these checks were reviewed and addressed as part of the project’s ongoing refinement.
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
End-to-end tests
25 / 25 passed
Result at the time of measurement
- Combined Tailwind CSS color lookup, custom hex input, and contrast checking into one lightweight tool
- Used repeatable source-level, browser-based, and interaction-level checks to validate and improve the interface
- Released the tool as an open-source resource for frontend developers, designers, and accessibility reviewers