Typography Accessibility

Typography accessibility

The top of the source hierarchy. A typographic rule that fails an accessibility criterion is wrong no matter which book it came from.

1. When to invoke

• Any body text, UI text, or editorial text that carries meaning.
• Contrast, zoom, spacing overrides, or text resizing questions.
• Claims that a design is accessible.
• Dyslexia, low vision, ageing eyes, or cognitive-load requirements.
• Text rendered as an image, or styled with CSS that may break assistive tech.

Always co-load with body-text-and-reading and ui-component-typography.

2. Required context

• Target conformance level (AA is the common legal floor; AAA where required).
• Jurisdiction — EAA, Section 508, ADA, EN 301 549 all reference WCAG.
• Whether the platform has a user text-size setting (iOS/Android Dynamic Type, OS-level scaling).
• Whether content is user-generated (rules must be systemic).
• Real foreground/background pairs, including over imagery and on hover/disabled.

3. Invariant principles — the WCAG floor

These are not heuristics. They are pass/fail.

Note 1.4.8 forbids justified text at AAA — which aligns with Hochuli's craft objection for independent reasons.

Additional invariants:

• Never suppress zoom. user-scalable=no or maximum-scale=1 fails 1.4.4.
• Text in images is invisible to screen readers, translation, and search, and degrades on zoom.
• Contrast applies to every state — placeholder, disabled, hover, and text over imagery all carry information and all must pass or be genuinely decorative.
• Don't remove focus indicators from interactive text.

4. Context-dependent heuristics

• There is no "dyslexia font" that reliably outperforms a well-set common typeface. Evidence for specialist faces is weak. What demonstrably helps: generous line spacing, shorter measures, left-aligned ragged setting, clear paragraph separation, and letting users adjust. Offer control rather than prescribing a face.
• Ragged-left (left-aligned) beats justified for readers with dyslexia and low vision: even word spacing, no rivers, predictable line starts.
• All-caps runs are slower to read and are announced awkwardly by some screen readers. Use text-transform: uppercase on normal-case source text rather than typing capitals, so assistive tech and translation receive the real string.
• Light weights at small sizes fail in practice even when they nominally pass contrast — thin strokes on low-DPI screens lose their measured contrast.
• rem/em over px so text responds to user preferences.
• Respect prefers-reduced-motion for any kinetic type.
• Dynamic Type / OS scaling: on native platforms, honour the user's setting rather than hardcoding sizes.

5. Failure patterns

6. Evaluation procedure

Run all of these. Passing one establishes nothing about the others.

1. Contrast — every text/background pair, every state, against 4.5:1 (or 3:1 if genuinely large by the pt/px definition above). Include text over imagery.
2. Zoom to 200% — no loss of content or functionality.
3. Apply the 1.4.12 override and confirm nothing clips, overlaps, or vanishes:

   * { line-height: 1.5 !important; letter-spacing: .12em !important;
       word-spacing: .16em !important; }
   p { margin-bottom: 2em !important; }
   

4. Images of text — inventory them; justify each or convert to real text.
5. Screen reader — read the page. Are headings sequential? Is any text announced as letters?
6. Viewport meta — no zoom suppression.
7. Native platforms — set the OS text size to its largest and re-check.
8. Grayscale — confirm no information is carried by colour alone.

7. Output format

Conformance target: <AA | AAA>
1.4.3 Contrast:   <pass/fail> — failing pairs: <list with ratios>
1.4.4 Resize 200%: <pass/fail> — <what broke>
1.4.12 Spacing:    <pass/fail> — <what broke>
1.4.5 Images of text: <n found> — <justified/convert>
Zoom suppressed: <yes/no>
Screen reader: <findings>
Not verified: <what was not actually executed>

8. Examples

Pricing table failing at 200% zoom.

Contrast passes everywhere, but the table's rows use fixed height with overflow: hidden, so at 200% the price row clips its descenders and the footnote disappears entirely — a 1.4.4 failure (loss of content). Fix is min-height instead of height and removing the overflow clip. Re-tested at 200% and under the 1.4.12 override: no loss. Note the contrast pass told us nothing about this; they're independent criteria.

"Accessible" redesign that shipped a dyslexia-specific typeface.

The font swap isn't the lever. Evidence for specialist dyslexia faces is weak, and the page still justifies its text (rivers, uneven word spacing), runs ~95 CPL, and separates paragraphs by indent only. Recommend: left-align ragged, cap the measure, add paragraph spacing, raise line-height, and expose a user text-size control. Keep whichever face; the setting is what's failing.

9. Counterexamples

• ❌ "Contrast passes, so the typography is accessible." — 1.4.3 is one of at least four independent criteria.
• ❌ "Large text is 16px bold." — Wrong. Large is ≥18pt/24px, or ≥14pt/18.66px bold.
• ❌ "We tested with browser zoom, that covers 1.4.4." — Also apply the 1.4.12 spacing override; they fail differently.
• ❌ "Justified text looks more professional." — Fails 1.4.8 at AAA and produces rivers that hurt exactly the readers who can least afford them.
• ❌ <meta name="viewport" content="… user-scalable=no"> — never.
• ❌ "The hero text is an image so the brand font renders everywhere." — 1.4.5 failure; invisible to AT, translation, and search; degrades on zoom.
• ❌ "It's decorative text so contrast doesn't apply." — Only genuinely decorative text is exempt. If it carries meaning, it isn't decorative.

10. Source citations

• WCAG 2.2 §1.4.3, §1.4.4, §1.4.5, §1.4.6, §1.4.8, §1.4.12 — w3.org/TR/WCAG22. Top of the source hierarchy; outranks every book in this pack.
• Section508.gov — fonts and typography.
• Lupton, Thinking with Type 3e — legibility, familiarity bias, and the absence of evidence that serifs improve reading performance (the same evidential standard applies to dyslexia-specific faces).
• Hochuli, Detail in Typography — why justified setting at narrow measures produces uneven word spacing and rivers; independent craft support for 1.4.8.
• Rutter, Web Typography — relative units, user text-size preferences.