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.
Accessible Typography & WCAG AAA Contrast Architecture
Validates typographic legibility (OpenDyslexic, Atkinson Hyperlegible, system sans), line-height (1.5–1.8), letter-spacing (+0.05em), paragraph width (<70ch), and WCAG AAA (7:1) / AA (4.5:1) color contrast ratios.
Accessible Typography, Colour Contrast & Dyslexia-Friendly UI Guide Configurator
Dyslexia-Optimized Typography — WCAG 2.1 AAA High-Legibility Spec
High-legibility typography and color contrast configuration designed to minimize visual crowding and cognitive fatigue for neurodivergent readers.
1 Input Parameters & Assumptions
| Parameter | Value | Context & Provenance |
|---|---|---|
| Typeface Family | Atkinson Hyperlegible Font | Designed by Braille Institute for unambiguous character distinction |
| Body Font Size | 19px Pixels | Comfortable reading size for long-form technical documentation |
| Line Height | 1.75 (175%) Line Spacing | Prevents vertical line skipping and visual crowding |
| Letter & Word Spacing | +0.06em / +0.10em Tracking | Generous horizontal letter spacing to prevent character blending |
| Text / Background Colors | #1e293b on #fefcf8 Hex Pair | Slate text on warm off-white background to prevent harsh high-glare contrast |
2 Explicit Mathematical Formula
Contrast Ratio Formula: (L1 + 0.05) / (L2 + 0.05)
Text Color (#1e293b Slate 800): Relative Luminance L1 = 0.0248
Background Color (#fefcf8 Warm Off-White): Relative Luminance L2 = 0.9576
Contrast Ratio = (0.9576 + 0.05) / (0.0248 + 0.05) = 1.0076 / 0.0748 = 13.47:1
WCAG 2.1 Compliance: AAA Pass (Exceeds 7.0:1 threshold for normal text)
Typographic Spacing: Font Size 19px, Line Height 1.75 (175%), Letter Spacing +0.06em, Word Spacing +0.10em3 Computed Output Metrics
| Computed Metric | Result | Interpretation & Threshold |
|---|---|---|
| Calculated Contrast Ratio | 13.47:1 Contrast Ratio | Substantially exceeds WCAG AAA 7.0:1 standard while avoiding harsh pure-black-on-pure-white glare |
| WCAG Compliance Level | WCAG AAA (Enhanced) Accessibility Tier | Highest level of web accessibility compliance for contrast and readability |
| Visual Crowding Reduction | Optimized (+0.06em) Legibility | Ample character apertures and spacing reduce cognitive reading fatigue |
Accessible Typography, Colour Contrast & Dyslexia-Friendly UI Guide — Scope & Limitations
Explicit operational boundaries and constraints defining target use cases and out-of-scope scenarios.
Built For (Target Use Cases)
- Generating CSS typography tokens (font, size, line height, letter and word spacing) for legibility-focused interfaces.
- Calculating WCAG 2.1 contrast ratios between two hex colours using the relative luminance formula.
- Comparing typography presets for dyslexia-friendly, dark-mode, and warm-editorial reading experiences.
Not Built For (Limitations & Out-of-Scope)
- Auditing an existing live website for accessibility; it only evaluates colours and type values entered manually.
- Assessing accessibility barriers beyond visual contrast and typography, such as screen reader or keyboard navigation.
- WCAG 2.2 or ARIA conformance testing; the calculator applies only the WCAG 2.1 contrast formula.
Operational Assumptions & Defaults
- Input colours are valid 6-digit sRGB hex values; no support for HSL, CMYK, or named colours.
- Contrast is calculated between exactly two flat colours, not gradients, images, or overlaid text.
- Presets reflect one designer's typography choices, not a universally validated accessibility standard.
Accessible Typography & Dyslexia-Friendly Contrast Styler
WCAG 2.1 AAA & Dyslexia DesignTest reading comfort for neurodivergent and low-vision users. Adjust font families, letter-spacing, line-height, and word-spacing while verifying real-time WCAG 2.1 relative luminance and contrast compliance.
Typography & Spacing Controls
Contrast & WCAG 2.1 Status
Live Reading Pane Preview
Accessible typography is essential for readers with dyslexia, ADHD, astigmatism, or visual processing differences. Increased letter-spacing and generous line-height prevent visual crowding, line-skipping, and cognitive fatigue during extended reading sessions.
Deploy Accessible CSS Typography Variables
Copy the generated CSS custom properties and typography utility classes into your global stylesheet or Tailwind configuration.
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
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);
}WCAG AAA Contrast & Legibility QA
Verify color contrast using Lighthouse accessibility audits and check that paragraph measure does not exceed 70 characters.
Pre-Production Verification Checklist
Verify body copy text color against background achieves at least 7:1 contrast ratio for AAA compliance.
Ensure max-width on long-form content is constrained to prevent reading fatigue and line jumping.
Confirm body paragraph line-height is at least 1.5 with distinct paragraph spacing.
Terminal Diagnostic & Debug Commands
Scans live page for color contrast and typographic accessibility violations.
npx @axe-core/cli https://gordongeraghty.comFailure Remediation & Troubleshooting
Cause: Using light gray (#94a3b8) on white background (contrast ratio 2.8:1, fails WCAG AA).
Fix: Darken subtle text to #475569 or darker to guarantee at least 4.5:1 contrast for normal text.
How to cite and attribute this tool
CC BY 4.0 LicenceThis 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:
@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 Media, Empire Amplify}
}Changelog & Version History
v1.0.0Initial release of accessible typography tokens and dyslexia-friendly CSS guidelines.
Strategic Takeaway & Operational Guidelines
Pure black text on stark white (#000000 on #ffffff) creates high-glare visual vibration for readers with dyslexia or astigmatism. Soft slate on warm off-white (#1e293b on #fefcf8) achieves an exceptional 13.47:1 contrast ratio without visual strain.