New · v2.0
Type that everyone can read.
Build a typography system that meets WCAG 2.2, scales fluidly across viewports, and stays readable for people with low vision, dyslexia, and cognitive disabilities.
Advanced · Modular scale · APCA · WCAG 1.4.12 · Design tokens
Accessible Typography Studio
Build a modular type scale with WCAG-oriented checks and experimental APCA estimates, then export it to Tailwind, Figma, CSS, iOS, or Android.
Modular 12-role scale WCAG 2.2 + APCA Flesch-Kincaid analyzerDyslexia & cognitive presets Tailwind · Figma · iOS · Android
Pairs with the Accessible Palette Studio → for a complete design-system-in-a-box.
Typography design workspace
Meets WCAG 2.2 AA minimums — 16px body, 1.5 line-height, 65ch max line.
Designed for screens. Versatile default for SaaS UI.
Designed for screens. Versatile default for SaaS UI.
Editorial serif with strong screen readability.
Programming-oriented monospace with great ligatures.
Specimen
Live specimen — renders the active stack and tokens
Modular type scale
Eight ratios from subtle (1.067) to dramatic (1.618 golden), mapped to twelve semantic roles: display, h1–h6, lead, body, small, caption, code.
Accessibility presets
WCAG default, dyslexia-friendly (Atkinson Hyperlegible), low-vision, cognitive load (Lexend), editorial, and compact UI — each a one-click starting point.
WCAG 2.2 + APCA grading
Review body size, spacing resilience, line length, hierarchy, and per-role contrast with links to the relevant W3C criteria.
Readability analyzer
Paste any copy and get Flesch Reading Ease, Flesch-Kincaid Grade Level, average sentence length, and long-word ratio with targeted rewrites suggestions.
WCAG 1.4.12 override test
One toggle simulates the WCAG text-spacing overrides (1.5 line-height, 0.12em letter-spacing, 0.16em word-spacing, 2× paragraph spacing). Catch broken layouts before users do.
Design token exports
Tailwind v4 @theme, Tailwind v3 config, CSS variables + utility classes, W3C DTCG typography tokens, Tokens Studio JSON for Figma, Swift UIFont, Jetpack Compose TextStyle.
Typography for accessible design systems
Type is half of every design system — and the half that's almost always shipped without an accessibility check.
Color contrast gets all the attention because contrast checkers are easy to find. Typography accessibility is harder — it's spread across WCAG 1.4.4 (resize), 1.4.8 (visual presentation), 1.4.12 (text spacing), 1.4.3 (contrast), and a half-dozen readability considerations that sit outside a single pass/fail rule. The Studio brings these checks into one workspace, then exports the system to your stack.
For design systems
Generate a complete type scale — 12 roles, fluid clamp() sizing, per-role line height and letter spacing, semantic tokens — ready for Tokens Studio or Style Dictionary.
For accessibility reviews
Live WCAG 1.4.12 override toggle, per-role contrast against your palette, and Flesch-Kincaid grade level on real copy. Every report row links to the relevant W3C Success Criterion.
For engineering
Export a working Tailwind v4 @theme block, a v3 config, CSS variables with utility classes, a Swift UIFont extension, and a Compose TextStyle object — all in seconds.
What the Studio grades
The accessibility checks under the hood
Body size and resize resilience
WCAG 1.4.4 does not set a minimum font size; it requires text to resize without loss of content or functionality. The Studio uses 16px as a practical starting point and flags smaller sizes for manual readability review.
Line height & spacing (WCAG 1.4.12)
WCAG 1.4.12 requires content to remain usable when users apply specified spacing values. Toggle the override to test those user styles for clipping, overlap, or lost content; the values are test conditions, not mandatory default styles.
Line length (WCAG 1.4.8)
WCAG 1.4.8 is a Level AAA criterion that limits blocks of text to no more than 80 characters or glyphs per line. The Studio also shows a narrower comfort band as design guidance and keeps it distinct from conformance.
Per-role contrast (WCAG 1.4.3 + APCA)
When you paste a palette primary, the report grades each text role's contrast against the derived background — body, small, caption, code, all H tags — using both the normative WCAG 2.2 luminance ratio and an experimental APCA Lc estimate. APCA output is supplemental design guidance, not a conformance result.
Readability (WCAG 3.1.5)
Flesch Reading Ease ≥ 60 and Flesch-Kincaid Grade Level ≤ 8 are the recommended targets for general audiences. The analyzer also flags long-sentence patterns and 3+ syllable word density.
Accessible Typography Studio FAQ
Modular scales, WCAG 1.4.12, APCA, and design-token exports — answered.
What makes typography accessible under WCAG 2.2?
Three things matter most: text remains readable when users resize up to 200% (1.4.4), text-spacing overrides (line-height ≥ 1.5, letter-spacing ≥ 0.12em, word-spacing ≥ 0.16em, paragraph-spacing ≥ 2× font size — WCAG 1.4.12) don't break the layout, and body text meets contrast minimums (4.5:1 for body, 3:1 for large text per 1.4.3). The Studio grades all of these automatically.
What is a modular type scale and why use one?
A modular scale multiplies a base font size by a ratio (1.125, 1.2, 1.25, 1.333, 1.5, 1.618) to derive every other size in the system. The result is a hierarchy that feels mathematically consistent — h1 to h6 read as steps along the same scale rather than arbitrary numbers. The Studio supports eight common ratios and shows the visual feel of each.
How does fluid clamp() sizing work?
Each font size is wrapped in clamp(min, preferred, max) so it scales smoothly between a small viewport (360px) and a large one (1280px). Body text generally stays constant; headings shrink on small screens to avoid breaking the line at narrow widths. The math is a linear interpolation between viewport sizes — no media queries needed.
Which accessibility presets are available?
WCAG 2.2 default, Dyslexia-friendly (Atkinson Hyperlegible, looser tracking, ≤ 60ch), Low-vision (20px body, generous spacing), Cognitive load (Lexend, 1.75 line-height), Editorial / long-form (serif at 19px, ≤ 70ch), and Compact UI (14px dense layouts with extra grading rigor).
What is the WCAG 1.4.12 text-spacing override test?
WCAG 1.4.12 requires that pages still work when users apply text-spacing overrides — line-height of 1.5× font size, paragraph spacing of 2× font size, letter-spacing of 0.12em, word-spacing of 0.16em. Toggle 'WCAG 1.4.12 override' in the Studio to simulate these overrides in any specimen and watch for clipped or overlapping text.
Can I pair this with the Accessible Palette Studio?
Yes — that's the point. Paste a palette's primary hex into the Studio (or share a URL between the two) and the typography report grades each text role's contrast against your real background and surface tokens, using both WCAG 2.2 ratios and APCA Lc.
What's Flesch Reading Ease?
Flesch Reading Ease (1948) scores text from 0 to ~120 based on average sentence length and average syllables per word. Scores ≥ 60 are recommended for general audiences. The Studio also reports Flesch-Kincaid Grade Level (US school grade) and flags overly long sentences or syllable-heavy word patterns.
Essential Accessibility Resources
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences
wcag
accessibility
apca
design tokens
Accessible Color Palettes Guide
How to build WCAG-compliant color systems for design systems and dark mode
design tokens