# Base font size is at least 16px

- **Pattern:** `ab-001917` (`mobile-responsiveness.viewport.text-readable-mobile`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001917
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001917)

## Why it matters

iOS Safari auto-zooms the entire page whenever a form input with a font-size below 16px receives focus. That zoom disrupts the layout, forces users to manually zoom back out, and abandons the tap position — effectively breaking the form submission flow on iPhone for a significant share of mobile users. WCAG 2.2 SC 1.4.4 (Resize Text) requires text to be resizable without loss of content or functionality; a base font below 16px often means inputs are already too small to use comfortably before any zoom occurs. Smaller base fonts also reduce legibility on high-DPI screens where antialiasing assumptions change below the 16px threshold.

## Severity rationale

Medium because the failure degrades the form experience on iOS Safari specifically, causing involuntary page zoom rather than full inaccessibility.

## Remediation

Set a 16px floor in your global stylesheet and on all form controls. In `src/app/globals.css` (or your equivalent base stylesheet):

```css
html { font-size: 16px; }
input, select, textarea { font-size: 16px; }
```

In Tailwind, `text-base` maps to 1rem (16px). Never apply `text-xs` or `text-sm` directly to `<input>` or `<select>` elements — wrap a label styled small instead.

## Detection

- **ID:** `text-readable-mobile`
- **Severity:** `medium`
- **What to look for:** Check global CSS for the base font size on `html`, `body`, or `:root`. In Tailwind, the default base font size is 16px (1rem). Check if the default has been overridden to a smaller value. Also check form input font sizes — iOS Safari auto-zooms the page when inputs have a font-size below 16px.
- **Pass criteria:** Before evaluating, extract and quote the exact `font-size` declarations on `html`, `body`, and `:root` selectors, plus any global input/select/textarea font-size rules. Base font size must be at least 16px (or 1rem, which defaults to 16px in all major browsers). Count all form input font-size declarations. No more than 0 form input font-size declarations may be below 16px.
- **Fail criteria:** Base font size is explicitly set below 16px (e.g., `font-size: 14px` on `html` or `body`), or at least 1 form input font-size declaration is 14px or smaller.
- **Skip (N/A) when:** Never.
- **Detail on fail:** `"html element has font-size: 14px (below 16px minimum) — iOS Safari will auto-zoom the page when any text input is focused"` or `"2 of 5 input font-size declarations are below 16px"`.
- **Remediation:** Keep base font sizes at 16px or above:

  ```css
  html { font-size: 16px; }

  /* For inputs specifically */
  input, select, textarea { font-size: 16px; }
  ```

  In Tailwind, the default `text-base` class sets 16px. Avoid `text-xs` or `text-sm` on inputs.

---

## External references

- wcag 1.4.4

Taxons: user-experience, accessibility

HTML version: https://auditbuffet.com/patterns/ab-001917