Contrastly

Tailwind color contrast checker

Pick colors directly from the Tailwind palette and check WCAG contrast—without looking up hex values or switching tabs.

Contrastly - Tailwind color contrast checker

Contrast Check Results

Contrast ratio: 5.16:1

Normal Text

WCAG AA:Pass

WCAG AAA:Fail

Large Text

WCAG AA:Pass

WCAG AAA:Pass

Color Selector

Foregroundwhite
Backgroundblue-600

Color palette

Tailwind color palette. Select a swatch to apply the color.
Shadeslategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
50
100
200
300
400
500
600
700
800
900
950

AboutContrastly

Contrastly is a lightweight open-source tool for checking color contrast while working with Tailwind CSS. Select colors directly from the palette, compare foreground and background combinations in real time, or enter custom hex values when needed. It helps make accessibility checks part of everyday UI implementation, without interrupting your workflow to look up and transfer color values between tools.