TailwindreadyTailwindready
Free tool

Contrast Checker

Pick a text and background color to get the WCAG contrast ratio and a pass or fail for each level. You also get the closest Tailwind classes to use.

Text color
Background color

Large heading sample

Normal body text sits here so you can judge readability. The quick brown fox jumps over the lazy dog.

17.85
contrast ratio
Normal text, AAPass

Needs 4.5:1

Normal text, AAAPass

Needs 7:1

Large text, AAPass

Needs 3:1 (24px, or 19px bold)

UI components, AAPass

Needs 3:1 for borders and icons

Closest Tailwind classes
text-slate-900 bg-white

Frequently asked questions

What contrast ratio do I need to pass WCAG?

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (about 24px, or 19px bold) needs 3:1 for AA and 4.5:1 for AAA. Icons and input borders need 3:1.

How is the contrast ratio calculated?

Each color is converted to relative luminance using the WCAG formula. The ratio is (lighter + 0.05) divided by (darker + 0.05), which gives a value from 1:1 (identical colors) to 21:1 (black on white).

Is gray-400 text on white accessible in Tailwind?

No. gray-400 on white is roughly 2.5:1, below the 4.5:1 needed for body text. gray-500 is borderline for small text, and gray-600 or darker passes comfortably.

Does passing contrast mean my design is accessible?

It covers one requirement. You also need visible focus states, text that is not conveyed by color alone, and sensible sizes. Treat contrast as a necessary check, not the whole audit.

Guides that go with this tool

More free Tailwind CSS tools

Glassmorphism generatorFrosted glass cards with backdrop blur, as Tailwind or CSS.Text shadow generatorLayered text shadows, glow and outline presets, as Tailwind or CSS.Fluid typography generatorA clamp() font size that scales between two viewport widths.Transition generatorPreview duration and easing, then copy the Tailwind classes.Color converterConvert between HEX, RGB, HSL and OKLCH with alpha support.HTML to JSX converterTurn HTML or SVG into React-ready JSX in one paste.

Browse all 24 Tailwind CSS tools

More free tools & components

Keep going with another tool, or grab a ready-made component.

Color palette generatorHex to Tailwind colorBrowse components