Core answer: rem is a multiple of the root font size (browser default 16px, so 1rem=16px; after html { font-size: 62.5% }, 1rem=10px); aspect ratio math is height = width ÷ ratio (16:9 = 1.778); WCAG 2.1 requires ≥4.5:1 contrast for body text at AA; mobile adaptation needs just .
Converting px and rem
Formula: rem = px ÷ root font size (16 by default).
| Target px | ÷16 (default) | ÷10 (62.5% trick) |
|---|---|---|
| 12px | 0.75rem | 1.2rem |
| 14px | 0.875rem | 1.4rem |
| 16px | 1rem | 1.6rem |
| 24px | 1.5rem | 2.4rem |
| 32px | 2rem | 3.2rem |
The 62.5% trick (16×62.5%=10px) makes mental math a simple ÷10 — remember to reset body to font-size: 1.6rem. Unlike rem, em references the parent and compounds through nesting; prefer rem for components.
Common aspect ratios
| Ratio | Decimal | Typical use |
|---|---|---|
| 16:9 | 1.778 | Video, slides |
| 4:3 | 1.333 | Classic TV, iPad |
| 3:2 | 1.5 | Camera photos |
| 1:1 | 1.0 | Avatars |
| 9:16 | 0.5625 | Vertical short video |
| 21:9 | 2.333 | Ultrawide cinema |
Modern CSS keeps ratios with aspect-ratio: 16/9; the legacy hack was padding-top: 56.25%.
WCAG contrast standards
| Level | Body text (<18pt) | Large text (≥18pt / 14pt bold) |
|---|---|---|
| AA (baseline) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Contrast runs from 1:1 (same color) to 21:1 (black on white). Light gray on white (#999 on #fff = 2.85:1) is the most common failure. The [contrast checker](/c/dev/contrast-check) judges AA/AAA for any color pair and suggests compliant fixes.
Minimal meta tag set
```html
```
For social sharing add Open Graph: og:title / og:description / og:image / og:url. The [meta tag generator](/c/dev/meta-generator) produces the full set from a form.
Example: 750px design to rem
A 750px-wide (2x) design marks a button at 320px: ① set the root with font-size: calc(100vw/10) — on a 375 logical width that is 37.5px; ② 320 ÷ 75 = 4.267rem (2x annotation ÷75 in one step). Verify instantly with the [px↔rem converter](/c/dev/px-rem) using a custom root size.
Example: fixing a contrast failure
A button pairs #FFFFFF text on #F59E0B (amber-500): measured 2.14:1 — far below the 4.5:1 AA bar. Fix A, darken the background to #B45309 (amber-700): 4.83:1 ✓. Fix B, keep the brand color and switch to dark text #451A03: 4.62:1 ✓.
Common mistakes
- Mixing em and rem until sizes explode: 1.2em inside 1.2em is already 1.44×; standardize on rem.
- Hard-coding video width and height: it breaks on the next container.
aspect-ratiopluswidth:100%is the responsive answer. - Only checking body-text contrast: icons and input borders are "non-text UI" and AA still requires 3:1 — pale gray placeholders fail constantly.
- Shipping user-scalable=no: it blocks zoom for low-vision users and Safari ignores it — just do not add it.