← Back to the lab

Component States Explorer

Generate hover, focus, pressed, disabled, error and loading states for buttons, inputs, toggles and cards from one accent color, with WCAG checks.

What it does

  • Buttons, inputs, toggles, checkboxes and selectable cards in every state
  • Hover and pressed shades that never lower label contrast
  • WCAG checks per state: text 4.5:1, focus rings, borders and tracks 3:1
  • A live playground with micro-interactions, plus CSS token export

FAQ

Do disabled states need to meet contrast requirements?

No. WCAG 1.4.3 exempts inactive components, but they should still be clearly perceivable as disabled.

How much contrast does a focus ring need?

At least 3:1 against the adjacent colors (WCAG 1.4.11 and 2.4.13), which the tool checks for every focus state.

More free tools

  • Palette Generator — Pick a hue, choose a color harmony, and get a full accessible palette with live AA/AAA contrast checking.
  • Contrast Checker — Paste two colors, see the WCAG ratio, and fix a failing pair with a single click.
  • Image → Palette — Drop in an image, pull out its dominant colors, and see which pairs are safe to use together.
  • Color Blindness Simulator — See a palette through protanopia, deuteranopia, tritanopia and achromatopsia — and catch colors that collapse.
  • Type Scale Generator — Pick a base size and a ratio, get a full type scale with live preview, fluid clamp() and tokens to copy.
  • Gradient & Mesh Generator — Linear, radial, conic or blobby mesh gradients — drag the points, shuffle the colors, copy the CSS.
  • Design Token Converter — Paste W3C tokens, Tokens Studio or Figma Variables JSON and get CSS, SCSS, Tailwind v4 or SwiftUI — aliases included.
  • Motion & Easing Playground — Drag cubic-bezier handles, tune a real spring, watch them race, and export motion tokens as CSS linear(), Framer Motion or SwiftUI.
  • Auto-Trim — Drop in PNGs and get them back without the empty transparent edges — in bulk, in your browser, as one ZIP.
  • Text Expansion Stress Test — See how a UI breaks in German, Spanish or pseudo-localized text — and which CSS fixes make it survive translation.
  • Mini A11y Audit — Paste HTML and find missing alt text and labels, unnamed buttons, heading jumps, tiny tap targets and low contrast.
  • Multi-size Preview — One message laid out across social and display-ad sizes, with platform safe zones and a draggable focal point. Export every PNG.