About Contrastly
Contrastly is a small color contrast checker for Tailwind palettes and semantic color tokens.
I built it because I often found myself jumping between Tailwind docs, hex converters, and contrast checkers while working on UI. Each tool was useful, but the workflow felt more complicated than it needed to be.
Contrastly brings those steps closer together: choose or enter colors, check contrast in real time, and see whether the combination meets WCAG AA or AAA contrast requirements.
It is made for frontend developers, designers, and anyone who wants to make interface colors easier to read.
Why I Made This
Color contrast can look fine at first glance and still fail accessibility requirements.
I noticed this clearly while working on accessibility-focused UI. Some color combinations looked readable to me, but failed WCAG contrast checks once I tested them properly.
That changed the way I approached color.
I wanted a tool that made contrast checking faster, especially for Tailwind-based projects, without making the process feel heavy or disconnected from everyday frontend work.
So I built Contrastly as a simple place to test colors, compare combinations, and make better decisions while designing or implementing UI.
Who It’s For
Contrastly may be useful if you are:
- working with Tailwind CSS
- checking text and background color combinations
- designing accessible UI components
- learning about WCAG contrast requirements
- building semantic color tokens
- reviewing interface colors during implementation
It is especially useful when you want to move quickly, but still make accessibility part of the decision.
What Makes Contrastly Different
- Tailwind color palettes included by default
- Hex input for custom colors
- Copy buttons for quick iteration
- Real-time WCAG AA / AAA contrast checks
- Support for checking common foreground / background combinations
- Keyboard-friendly interaction
- Reduced-motion support
- Screen-reader-aware UI patterns
- Fast, lightweight interface for everyday use
How It Works
Contrastly checks color contrast using the officialWCAG 2.x contrast ratio formula (opens in a new tab).
In short, it compares the relative luminance of two colors, using this equation:
Where L is the relative luminance defined by WCAG.
This ensures that the results you see here are the same as in other trusted accessibility tools — just wrapped in a Tailwind-friendly interface.
Who’s Behind It
I'm Yoko, an independent frontend engineer working with React, Next.js, TypeScript, accessibility, and product-facing frontend implementation.
I like building small tools that make everyday frontend work a little clearer.
Contrastly came from a simple problem: I wanted color contrast checking to feel closer to the way I actually work with UI — quick, visual, practical, and easy to repeat.
I also built Promotee, a flashcard app for practicing your own answers out loud, and I write about accessibility, UX, frontend work, language, and the small frictions that appear between systems and people.
More about this project
Built by Yoko → GitHub (opens in a new tab) / LinkedIn (opens in a new tab) / Medium (opens in a new tab)
You may also like Promotee (opens in a new tab)