Accessibility (Typography)

Accessible typography ensures that text-based content can be read, understood, and interacted with by the widest possible range of users — including people with low vision, color blindness, dyslexia, cognitive differences, motor impairments, and age-related changes in sight. Typography is arguably the most important accessibility domain on the web, because the vast majority of web content is text.

The foundational principle is this: if users can't read your text, nothing else on the page matters. Accessibility in typography is not a nice-to-have or a compliance checkbox — it's the baseline for functional communication.

Font size is the starting point. Never set body text below 16px equivalent (1rem). For users who have set their browser default font size larger, use relative units so text scales with their preferences:

/* Accessible: scales with user preference */
body {
  font-size: 1rem;       /* Inherits browser default (typically 16px) */
  line-height: 1.6;
}

/* Inaccessible: ignores user preference */
body {
  font-size: 14px;       /* Always 14px regardless of user settings */
}

Never use px for font-size in body text if you can avoid it. Users who rely on browser zoom or accessibility font size settings expect relative units to honor those preferences.

Line height is often overlooked but critical for users with cognitive differences and dyslexia. WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) requires that no content or functionality is lost when line height is increased to 1.5× font size:

p {
  line-height: 1.6;          /* Default comfortable reading */
  letter-spacing: 0.02em;    /* Slight spacing aids many readers */
  word-spacing: 0.05em;
}

Color contrast must meet WCAG AA minimums: 4.5:1 ratio for normal text, 3:1 for large text (18pt+ or 14pt+ bold). Never convey meaning through color alone, and test with actual contrast ratio tools rather than visual estimation:

/* Accessible body text */
body {
  color: #212121;           /* ~16:1 contrast on white */
  background: #ffffff;
}

/* Accessible secondary text */
.secondary {
  color: #595959;           /* 7:1+ contrast on white (passes AAA) */
}

Avoid text in images wherever possible — screen readers can't read it, it doesn't scale, and it fails zoom. Use real HTML text with CSS for all styling.

Focus indicators for keyboard navigation must be visible, especially for linked text. Don't remove outline without providing an equivalent visible indicator.

Typeface choices also affect accessibility. Fonts with high x-heights, open apertures, and clear letterform distinction support more users. System fonts (system-ui, -apple-system) are often an excellent accessible default because users are already familiar with them and they render at native OS quality.