Contrastly

Tailwind color contrast checker

Check WCAG contrast between Tailwind CSS colors, custom hex values, and semantic color tokens.

Contrastly - Tailwind color contrast checker

Contrast Check Results

Contrast ratio: 21:1

Normal Text

WCAG AA:Pass

WCAG AAA:Pass

Large Text

WCAG AA:Pass

WCAG AAA:Pass

Color Selector

Foregroundblack
Backgroundwhite

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 palettes, custom hex values, and semantic color tokens. It helps you compare foreground and background colors in real time and make accessibility part of everyday UI decisions.