Contrast ratios, demystified (WCAG)
Contrast ratio runs 1:1 (invisible) to 21:1 (black on white). WCAG demands ≥4.5:1 for normal text, ≥3:1 for large text and UI boundaries — math, not taste.
Check every text/background pair in both themes: a muted gray that passes on white often fails on dark surfaces, and brand colors picked for logos rarely pass as link colors unmodified.
Mistakes: eyeballing it ('looks fine' fails around 3:1 constantly), testing only light mode, and using transparency over photos without checking the worst-case backdrop.
Example: #5b6472 on #ffffff = 5.98:1 (passes AA). The same gray on #0f172a dark = 6.96:1. Both pass — that is the bar.
Try: WCAG Contrast Checker · HEX ⇄ RGB
Color harmony in 4 recipes
Four harmony recipes cover most design: monochromatic (one hue, many lights), analogous (neighbors on the wheel), complementary (opposites, use one as accent), triadic (three evenly spaced, let one dominate).
Build order: pick the job of each color first (background, text, primary action, accent), then fit harmonies to jobs — never the reverse. One loud color per screen.
Mistakes: two competing primaries, gradients between unrelated hues (muddy middle), and neon-on-neon text that passes vibe checks and fails contrast math.
Example: base #2563eb → complementary accent #eb8a25 for the single CTA; backgrounds stay neutral so the accent means 'click me' everywhere.
Try: Palette Generator · CSS Gradient Generator
Shadows that look real
Real shadows are soft, layered and directional: one tight ambient shadow plus one large diffused key shadow, both slightly transparent black, offset down — never pure-black hard edges.
Glassmorphism adds backdrop blur over a translucent fill with a 1px light border; it only reads as glass over varied content — on flat backgrounds it looks like a bug.
Mistakes: giant blur with zero offset (dirty halo), shadows on already-dark surfaces (invisible), and animating box-shadow per frame (use transform/opacity; shadow repaints are expensive).
Example: '0 1px 2px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.14)' lifts a card convincingly on both themes without a single image.
Try: Box Shadow Generator · Glassmorphism Generator