WCAG 2.1 (Web Content Accessibility Guidelines) is the international standard for making web content accessible to people with disabilities, including visual impairments. It defines contrast ratio thresholds for text and UI components.

What is the difference between AA and AAA conformance?

AA is the minimum recommended level — it requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Most sites aim for AA; AAA is recommended for content targeting users with low vision.

What counts as "large text"?

Large text is defined as 18pt (24px) and above for regular weight, or 14pt (approximately 18.66px) and above for bold text. Large text has a lower contrast requirement because its size makes it easier to read.

How is the contrast ratio calculated?

The contrast ratio is calculated using the relative luminance of each colour, following the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 is the darker. The result ranges from 1:1 (identical) to 21:1 (black on white).

Can I use this with Tailwind CSS v4?

The colour palette shown here is from Tailwind CSS v3. Tailwind v4 uses the same default colour values, so the hex codes and contrast results remain accurate. The class name syntax is also the same.

Why does my design pass for large text but fail for normal text?

Large text (>= 18pt regular or >= 14pt bold) has a lower contrast threshold (3:1 for AA) because bigger characters are inherently easier to distinguish. Normal-size text needs a higher ratio (4.5:1 for AA) to remain legible.

All Tools

Free Tool

Color Contrast Checker for Tailwind CSS

Pick any two Tailwind colors, see real-time WCAG 2.1 contrast ratios for AA and AAA compliance, and copy the class names straight into your code.

Foreground (Text)

slate-900#0f172a

Showing Tailwind CSS colors

black

white

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Background

white#ffffff

Showing Tailwind CSS colors

black

white

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Contrast Ratio

17.85:1

AA Compliant

The quick brown fox

jumps over the lazy dog

WCAG AA

Normal TextLarge TextUI

WCAG AAA

Normal TextLarge Text

Copy Classes

WCAG 2.1 at a Glance

Normal Text

Body copy, labels, paragraphs (< 18pt)

AA 4.5:1AAA 7:1

Large Text

Headings, 18pt+ regular or 14pt+ bold

AA 3:1AAA 4.5:1

UI Components

Borders, icons, focus indicators, controls

AA 3:1AAA n/a

Quick Tailwind Tip

Use shades 700-950 on backgrounds 50-200 for body text. text-gray-900 on white gives you ~17.4:1.

Approximately 8% of men and 0.5% of women worldwide experience some form of colour vision deficiency — designing for contrast benefits everyone.

Why use a color contrast checker for Tailwind CSS?

Tailwind ships with a beautiful color palette, but not every combination meets WCAG 2.1 accessibility standards. A foreground and background pair that looks fine on your monitor can be unreadable for the roughly 300 million people worldwide with some form of color vision deficiency. A quick color contrast check catches these issues before they ship.

This free color contrast checker lets you pick any two Tailwind CSS colors, instantly calculates the contrast ratio, and tells you whether the pair passes AA or AAA for normal text, large text, and UI components. No sign-up, no ads, works entirely in your browser.

How to use the results

Once you find a passing combination, click the copy button to grab the Tailwind utility classes (e.g. text-slate-900 bg-white) and paste them straight into your JSX, Vue template, or HTML. If a pair fails, try moving one shade darker or lighter until you hit the threshold.

Quick rules of thumb

Body text: use shades 700-950 on backgrounds 50-200 for easy AA compliance.
Buttons and interactive elements only need a 3:1 ratio against their surrounding area.
Decorative or disabled elements are exempt from contrast requirements.
Dark mode needs the same checks. Flip your foreground and background and test again.

Ship accessible UIs faster

Our starter kits are WCAG-AA compliant out of the box. Contrast-checked, keyboard-tested, screen-reader verified.

Browse Starter Kits Try Live Demo