Accessible Typography, Colour Contrast & Dyslexia-Friendly UI Guide

Design token specifications for WCAG 2.2 AAA contrast, line-height/letter-spacing ratios, and Atkinson Hyperlegible typography in digital products.

By Gordon Geraghty·CC BY 4.0 Licence·Updated: 21 August 2026·INTERMEDIATE·GitHub Mirror ↗

Typography Design for Cognitive Accessibility

Meeting WCAG 2.2 AAA contrast standards improves readability for all users. Using fonts designed with distinct character shapes (such as differentiating uppercase I, lowercase l, and number 1) combined with generous line spacing reduces visual crowding and reading strain.

Implementation Code & Script

Accessible Typography & Contrast CSS Tokensaccessible-tokens.cssgroq

CSS variables meeting WCAG 2.2 AAA text contrast and optimal readability spacing.

:root {
  /* WCAG 2.2 AAA text contrast on light background (> 7:1) */
  --text-high-contrast: #0f172a;
  --text-muted-contrast: #334155;
  --bg-primary: #ffffff;
  --bg-subtle: #f8fafc;

  /* Dyslexia-friendly reading spacing */
  --line-height-body: 1.65;
  --letter-spacing-body: 0.015em;
  --word-spacing-body: 0.05em;
  --max-reading-width: 68ch;

  /* Font stack */
  --font-accessible: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-accessible);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  max-width: var(--max-reading-width);
  color: var(--text-high-contrast);
  background-color: var(--bg-primary);
}

How to cite and attribute this tool

CC BY 4.0 Licence

This resource is free, open and un-gated under the Creative Commons Attribution 4.0 (CC BY 4.0). You are encouraged to use, integrate and cite it with attribution:

Geraghty, G. (2026). Accessible Typography, Colour Contrast & Dyslexia-Friendly UI Guide. Gordon Geraghty Resources Hub. https://gordongeraghty.com/resources/neurodiversity-inclusion/accessible-typography-dyslexia-guide

BibTeX Format

@misc{geraghty_accessible_typography_dyslexia_guide,
  author = {Geraghty, Gordon},
  title = {Accessible Typography, Colour Contrast & Dyslexia-Friendly UI Guide},
  year = {2026},
  url = {https://gordongeraghty.com/resources/neurodiversity-inclusion/accessible-typography-dyslexia-guide},
  note = {Head of Performance, Empire Amplify}
}

Changelog & Version History

v1.0.0Initial release of accessible typography tokens and dyslexia-friendly CSS guidelines.