Check 4.5:1 contrast and copy a CSS shadow

Front-end tokens you can copy. A passing WCAG pair can still fail on a real page with a photo behind the type.

A ticket says the button fails contrast. A mock needs a five-color ramp. A card needs a shadow that is not 0 0 20px #000. These pages generate CSS you can paste. They do not replace Figma, Stark, or a full audit.

What to open

  • Contrast checker reports WCAG-style ratios. Normal text AA is commonly 4.5:1; large text and UI components often use 3:1. AAA is stricter. We do not certify a site.
  • Color palette generator is a starting ramp, not a brand book. Check the pairs on the contrast page before you ship.
  • Box shadow and CSS gradient emit CSS. Fence any sample in your docs; do not paste raw markup into a CMS that executes it.
  • CSS unit converter is rem/em/px math at a root size you assume. It is not the unit converter for km and lb.

Favicons, SVG optimize, and SVG→PNG sit with images/generators. Contrast does not read a whole stylesheet.

Contrast is a ratio, not a certificate

Palette and eyedropper pick colors. Contrast uses common 4.5:1 / 3:1 rules of thumb and does not certify WCAG. Box-shadow and gradients are CSS snippets — fence them. CSS units assume a root font-size. Favicon sizes in logic are 32, 180, 192, 512.