Zoom and visual accessibility

Zoom, Reflow & Visual Accessibility

Accessibility includes low-vision users, magnifier users, color-blind users, mobile/touch users and people working in high-glare or high-contrast environments. Layouts must adapt gracefully when zoomed to 400%, when text is scaled to 200%, or when OS color overrides are active (WCAG 1.4.1, 1.4.3, 1.4.4, 1.4.10, 1.4.11, 1.4.12, 2.5.8).

1. Zoom & 320px Reflow (WCAG 1.4.4 & 1.4.10)

At 400% browser zoom on a standard 1280x1024 desktop viewport, the effective CSS viewport is 320px wide by 256px tall:

• Never disable viewport zooming: ensure <meta name="viewport"> never sets maximum-scale=1 or user-scalable=no.
• Single-axis scrolling (Reflow): at 320px CSS width, content must reflow into a single vertical column without requiring horizontal scrolling (except for genuinely two-dimensional content like wide data tables, maps, diagrams or timelines, which must scroll within their own container rather than breaking page layout).
• Avoid fixed heights and clipped overflow:
  • Replace fixed height: 40px + overflow: hidden on text containers, cards, banners and buttons with min-height and flexible wrapping so 200% text scaling does not clip labels.
  • At short viewport heights (256px tall at 400% zoom), ensure sticky headers, sticky footers and modal headers/footers do not consume >50% of the screen, leaving the scrollable body unusable. Make modals scroll internally (max-height: calc(100dvh - 2rem); overflow-y: auto).

2. Text Spacing Resilience (WCAG 1.4.12)

Verify that layouts do not overlap, truncate unrecoverably or lose content when users apply custom stylesheet overrides:

• Line height (line-height) at least 1.5x font size.
• Paragraph spacing at least 2x font size.
• Letter spacing (0.12em) and word spacing (0.16em).
• Use rem units for typography, spacing and media-query breakpoints where appropriate so the layout scales with the user's root font-size preference.

3. Contrast & Non-Color Indicators (WCAG 1.4.1, 1.4.3, 1.4.11)

• Text contrast (WCAG 1.4.3):
  • Normal text (< 18pt / 24px, or < 14pt / 18.66px bold): at least 4.5:1 contrast ratio against its background (including over gradients, translucent glass panels and images).
  • Large text (>= 24px or >= 18.66px bold): at least 3:1 contrast ratio.
• Non-text contrast (WCAG 1.4.11):
  • Interactive control boundaries (input borders, checkboxes, radio buttons, toggle switches, focus rings) and meaningful icons/chart segments must achieve at least 3:1 contrast against adjacent colors.
• Never rely on color alone (WCAG 1.4.1):
  • Pair status colors (red error, green active, amber warning) with a distinct shape/icon, text label or pattern (such as underlines on inline links).
• High Contrast / Forced Colors (@media (forced-colors: active)):
  • Do not rely solely on box-shadow or background color fills to show button boundaries, active tabs or focus rings (since forced-colors strips box-shadow and background colors). Use real CSS border or outline (with transparent color in default themes if visually borderless).

4. Target Size (WCAG 2.5.8 & 2.5.5)

• Ensure pointer/touch targets are at least 24x24 CSS pixels (WCAG 2.5.8 AA minimum, or have sufficient spacing around them), and aim for 44x44 CSS pixels on primary touch controls, close buttons and pagination links.