Typography Accessibility

Accessible typography is not a separate specialty bolted onto a finished design. It is the baseline condition under which type does its job: communicating clearly to the widest possible audience. When type fails accessibility, the failure is rarely dramatic — it shows up as fatigue, skipped content, misread labels, and users who simply leave. This chapter covers the standards, the human factors, and the practical checks you can run before shipping.

Why typography drives accessibility outcomes

Most accessibility audits focus on color contrast and keyboard navigation, but typography shapes both. Small type forces zooming, which breaks layouts. Thin weights disappear on low-quality screens. Justified text creates rivers of whitespace that dyslexic readers struggle to track. Uppercase labels read letter-by-letter in screen readers unless you compensate. The good news: accessible typography and good typography overlap heavily. Generous sizing, clear hierarchy, and comfortable spacing benefit every reader.

WCAG and readable text

The Web Content Accessibility Guidelines (WCAG) 2.2 define success criteria that directly involve type. The ones you will encounter most often in design reviews:

1.4.3 Contrast (Minimum) — Level AA. Normal text below 18pt (or 14pt bold) needs a contrast ratio of at least 4.5:1 against its background. Large text — 18pt and above, or 14pt bold and above — needs 3:1. These are minimums, not targets. On glossy displays and in bright sunlight, ratios that barely pass AA still feel weak.

1.4.4 Resize Text — Level AA. Content must remain readable and functional when zoomed to 200% without assistive technology. That means your layout cannot depend on fixed pixel heights for text containers, and you should avoid truncating body copy at default zoom.

1.4.12 Text Spacing — Level AA. Users must be able to override line height to at least 1.5× the font size, paragraph spacing to at least 2× the font size, letter spacing to at least 0.12× the font size, and word spacing to at least 0.16× the font size without loss of content or functionality. Design systems that cram lines together fail this criterion the moment someone applies a readability extension.

1.4.1 Use of Color — Level A. Color alone cannot convey meaning. A red error state needs an icon or text label, not just a red border — and the label itself must meet contrast requirements.

Font size: the 16px floor and beyond

Browsers default to 16px for body text. Setting font-size: 62.5% on html to make 1rem = 10px was a popular shortcut that caused widespread accessibility harm — components written with 1.4rem silently became 14px. Modern best practice: keep root at 16px (or let the user decide) and build your scale in rem.

For body copy on marketing sites and applications, treat 16px as the minimum for continuous reading. 18px improves comfort for long-form content and older audiences. UI labels can go to 14px only when the text is supplementary, the contrast is strong, and the line length is short — never for paragraphs.

Always specify font sizes in relative units (rem, em, %, or fluid clamp()) so user agent and browser zoom settings propagate correctly.

Contrast beyond the ratio

Contrast ratio measures two sRGB colors. It does not capture everything:

• Thin weights at 300 or 400 on light backgrounds can fail perceptually even when the ratio passes.
• Colored text on colored backgrounds (blue link on blue-tinted card) often passes math but fails in practice.
• Transparency and blur (text over images, glassmorphism) change effective contrast dynamically.
• Dark mode needs re-auditing. A gray that works on white may disappear on #111.

Test with tools (Stark, Polypane, the APCA contrast method for a more perceptual read), but also squint at the design at arm's length. If the hierarchy disappears, the ratio is not enough.

Dyslexia and cognitive accessibility

Dyslexia affects roughly 10–20% of the population to varying degrees. No single "dyslexia font" is universally proven, but typographic choices consistently reduce friction:

• Avoid justified text. Uneven word spacing breaks the rhythm dyslexic readers rely on. Use left-aligned or rag-right body copy.
• Increase line height to 1.5–1.75 for body text. More vertical space helps distinguish lines.
• Limit line length to 60–75 characters. Long lines increase the chance of losing place when returning to the next line.
• Use distinct letterforms. Typefaces where l, I, and 1 are easily confused create decoding errors. Gill Sans and some geometric faces are frequent offenders; humanist sans serifs like Atkinson Hyperlegible, Lexend, or Open Sans prioritize differentiation.
• Avoid all-caps blocks for sentences. Capital letters remove word-shape cues (the bouma) that speed recognition.
• Increase paragraph spacing so chunks of text are visually separable.

Spacing and touch targets

Accessible spacing is not only about aesthetics. WCAG 2.5.8 (Target Size Minimum, Level AA) requires touch targets of at least 24×24 CSS pixels, with exceptions for inline links in sentences. In practice, 44×44px remains the safer mobile guideline from platform HIG.

Letter spacing below −0.02em on body text harms legibility. Positive tracking on uppercase labels (0.05–0.1em) improves scanability but do not apply heavy tracking to lowercase paragraphs.

Paragraph spacing should be at least equal to the line height — ideally 1.25–1.5× — so screen reader pauses and visual chunking align.

Screen readers and semantic type

Screen readers do not "see" font choice. They consume the DOM. Typography supports accessibility when it aligns with structure:

• One h1 per page. Visual size must follow heading level, not replace it. Never use <p class="text-4xl"> for a title.
• Real lists for navigation and grouped items, not bullet characters typed in a paragraph.
• aria-label and visible text should match. Do not hide meaning in icons alone.
• Abbreviations: mark up with <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> so expansions are available.
• Uppercase styling: text-transform: uppercase preserves original casing in the accessibility tree — good. Typing in all caps does not — screen readers may spell letter by letter.

Link text must describe the destination ("Read the accessibility chapter") not the location ("Click here").

Responsive typography and zoom

Responsive type is an accessibility feature. Users on phones, with low vision, or on high-DPI laptops all benefit when type scales with viewport and user preferences.

Combine clamp() for fluid sizing with rem-based spacing so zoom and root font-size changes cascade predictably. Test at 320px width, 200% browser zoom, and with prefers-reduced-motion respected for any type animations.

Avoid viewport units alone for body text (5vw headings are unreadable on narrow screens). Pair viewport scaling with minimum and maximum bounds.

Pre-ship accessibility checklist

Use this checklist on every text-heavy screen before release:

Contrast and color

• [ ] Body text meets 4.5:1; large text meets 3:1 (aim higher)
• [ ] Links distinguishable from body text by more than color alone
• [ ] Focus states visible and high-contrast
• [ ] Dark mode re-tested independently

Size and scale

• [ ] Body ≥ 16px (1rem) at default zoom
• [ ] Layout survives 200% zoom without horizontal scroll or clipped content
• [ ] Font sizes use relative units

Spacing and layout

• [ ] Line height ≥ 1.5 for body text
• [ ] Line length 45–75 characters on desktop; shorter on mobile
• [ ] Paragraph spacing ≥ one line height
• [ ] No justified body copy

Structure and assistive tech

• [ ] Heading hierarchy is sequential (no skipped levels)
• [ ] Interactive text meets minimum target size
• [ ] Meaning not conveyed by color or font style alone

Inclusive reading

• [ ] Confusable characters tested (0/O, l/1/I)
• [ ] All-caps reserved for short labels, not sentences
• [ ] Motion on text respects prefers-reduced-motion

Accessible typography is not restrictive — it is the discipline that keeps your voice audible to every reader. Build these checks into your component library and design tokens once, and every screen inherits the baseline for free.