Color Contrast, Gradients & Shadows

WCAG 2.1 wants 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold) at AA; AAA bumps that to 7:1 and 4.5:1. The checker computes the ratio from the relative luminance of the two colors — not from how far apart the hex values look — and shows pass/fail for each level plus the exact number. That number is the useful part: it tells you a gray needs to move from #888 to #767676 to clear, instead of you guessing.

One gotcha people miss: the same pair that passes on white can fail on near-black. Muted grays on a #09090B background are the usual culprit in dark mode, so re-check both themes, not just the light one.

The generator builds linear-gradient() and radial-gradient() with editable stops. Two things make a gradient look amateur: interpolation happens in sRGB by default, which muddies the middle of a blend — modern Chrome supports in oklab (linear-gradient(in oklab, …)) for a smoother result — and too few stops over a long run cause visible banding on dark-to-light fades. Add a midpoint stop if you see stripes.

If you actually want crisp stripes, hard stops are the trick: color 0 40%, color 40% 100% gives a clean cut with no fade. Good for progress bars, dividers and flags.

box-shadow takes offset-x, offset-y, blur, spread, then color. Spread is the argument most people leave at 0: negative spread pulls the shadow inward so it hugs the element (the lifted-card look), positive spread makes it read like a border without a border. The generator exposes all five and lets you stack several shadows, then copies the full comma-separated declaration.

Watch the blur radius if the element animates: a 64px blur repaints on every frame and janks low-end phones. Two stacked shadows — 0 1px 2px …, 0 8px 24px … — read as one natural shadow and cost far less than a single huge blur.