Palettra

Accessible color systems

Check Tailwind palette contrast in realistic UI previews

Palettra calculates the WCAG contrast ratio for generated text-and-background examples and labels normal-text and large-text outcomes separately.

  • AA normal-text threshold shown at 4.5:1
  • AA large-text threshold shown at 3:1
  • Real component previews beyond isolated color swatches
Preview palette contrast

How results are labeled

7.0:1+  → AAA
4.5:1+  → AA (normal text)
3.0:1+  → AA Large
below 3 → Fail

Frequently asked questions

Are normal and large text checked separately?

Yes. Ratios from 3:1 to below 4.5:1 are labeled AA Large rather than passing for normal text.

Does a passing palette guarantee an accessible product?

No. Contrast is one accessibility requirement; final components, states, typography, and context still need testing.