Blog · Accessibility

Dyslexia-friendly web design - a practical checklist

11 min read · May 25, 2026

Most accessibility checklists treat dyslexia as a footnote under "cognitive accessibility" and stop at "use a clear font." Dyslexic users are around one in ten of your audience, and the design decisions that affect them are not exotic - they sit in the same places you already make typography, layout and colour choices. This is the smallest set of those choices that meaningfully helps, written as a checklist you can run against an actual build.

The short version

If you only have an hour: ship body text at 18px or larger in a humanist sans-serif, line-height 1.5, max line length 70 characters, left-aligned, on an off-white background, and let your users override the font without your CSS fighting them. That single hour of work covers most of the gain.

If you want to go further: the rest of this article is the long form of that hour, plus the parts most teams miss - forms, motion, and how to actually test whether you got it right.

Why a checklist, not a font recommendation

Dyslexia is not one thing. Some readers struggle most with letter confusion (b/d, p/q rotating in perception). Others lose their place mid-line. Others can decode each word but burn so much working memory doing it that a 1,000-word article is exhausting in a way it is not for non-dyslexic readers. We covered the working-memory angle in detail in dyslexia and working memory; the practical implication for designers is that there is no single "dyslexia font" that fixes everyone. What you can do is reduce the load across all of these axes at once, and let users push it further if they need to.

The checklist below is ordered by impact. The first three sections are the ones that move the needle for almost every dyslexic reader. The later ones matter, but they are smaller wins.

1. Typography

Body font High impact

Use a humanist sans-serif for body text. Inter, Source Sans, Nunito Sans, Open Sans, and the dyslexia-tuned faces (Atkinson Hyperlegible, Lexend) all qualify. Avoid geometric sans-serifs (Futura, Avenir, Gotham) for long-form reading - the perfectly circular o and the symmetric n/u become harder to disambiguate at speed.
Avoid Times New Roman and other thin serifs as body defaults on screen. We unpacked why in why Times New Roman is hard for dyslexic readers; the short version is that the thin verticals and tight letterforms compound exactly the perception problems dyslexic readers already have. Serifs are fine for headings; they cost more in body.
If you are picking between sans-serif options, our breakdown in serif vs sans-serif for dyslexic readers covers the trade-offs. The default rule: sans-serif for screen body, anything you like for headings and display.

Size High impact

Body text at 18px minimum, ideally 19-20px on desktop. 16px is the lowest reasonable floor and only acceptable if you also push line-height to 1.6 and your font has a generous x-height. The full reasoning is in best font size for dyslexic adults; the gain from 16px to 19px is larger than most teams expect.
Use rem, not px, for font-size so browser-zoom and user-defined defaults work. Hard-coded px overrides one of the most useful accessibility levers your users already have.
Headings should be obviously different sizes, not subtly different. A 17px h2 sitting on top of 16px body text gives no visual hierarchy and forces the reader to re-derive structure from the text itself.

Weight Medium impact

Body weight 400 or 450, not 300. Modern UI design has drifted toward thin body weights because they look elegant on retina displays; they read significantly worse for dyslexic users, who lose contrast and stroke definition. Why 300 is a tax on dyslexic readers is in font weight and dyslexia - does bold actually help?
Use bold for emphasis, not italic. Italics rotate the letterforms and compound the same letter-confusion problems serif body text creates.

Spacing High impact

Line-height 1.5-1.7 for body text. 1.2 is too tight; 1.8 starts to break the paragraph into disconnected lines. The British Dyslexia Association recommends 1.5 as the floor.
Letter-spacing default; do not tighten body text below 0. A small positive tracking (0.01-0.02em) sometimes helps and rarely hurts. Full discussion in line spacing and letter spacing for dyslexia.
Paragraph spacing larger than line-height. The eye needs a strong visual cue that one paragraph has ended and another begun; a single blank line is not enough at body sizes.

2. Layout

Line length High impact

60-75 characters per line, measured at body size, not container width. Long lines force the eye to track further across the page and increase the chance of losing the line on return. We covered this from the reader's perspective in dyslexia and eye tracking; the design implication is a max-width somewhere around 38rem for English body copy.
Cap your container, not the viewport. A full-width article on a 27-inch monitor is unreadable for almost everyone, not just dyslexic users.

Alignment Medium impact

Left-align body text in left-to-right scripts. Justified text creates uneven word spacing and the "rivers" of white space that pull a dyslexic reader's eye vertically off the line. The full case is in justified vs left-aligned for dyslexic readers.
Avoid centring body paragraphs. Centred text has no consistent left edge to return to, which is the single most useful anchor for a tired or dyslexic reader.

Hierarchy Medium impact

Strong semantic headings (h1, h2, h3) with visual weight that matches the level. Dyslexic readers skim more than they read end-to-end; a clear heading structure lets them re-enter the page where they left off.
Short paragraphs. Two to four sentences. A wall of text is a cognitive load problem before it is a visual one.
Use lists where the content is a list. Forcing a list into prose makes the reader rebuild the structure mentally; lists do that work in the layout.

3. Colour and contrast

Contrast High impact

WCAG AA at minimum, AAA where possible. The standard ratios (4.5:1 for body, 3:1 for large text) are the floor, not the goal.
Avoid pure-black text on pure-white background. The contrast is too high for many dyslexic readers; the page glares and letters appear to vibrate. Soften both ends: a dark grey (#1a1a1a or #222) on an off-white (#fafaf7 or #f7f3eb).
Cream, light blue, light grey and pale yellow backgrounds are the four most commonly preferred backgrounds for dyslexic readers. The deep dive is in background colours for dyslexia; the design implication is that an off-white default is almost always better than a pure-white one.

Dark mode Medium impact

Ship a dark mode that is not pure black on pure white inverted. Dark mode is not automatically dyslexia-friendly; in some readers it helps, in others it makes the letters appear to swim. The full picture is in dyslexia-friendly dark mode.
Respect prefers-color-scheme and offer a manual toggle. Both. Some users override their system to use dark mode only on certain sites.

Colour-coded information Low impact for dyslexia, high for accessibility generally

Never use colour alone to convey state (success, error, warning). This is a general accessibility rule but matters specifically for dyslexic readers, who often have co-occurring colour-perception differences.

4. Motion, distraction, and respect for the reader

Motion Medium impact

Respect prefers-reduced-motion. Auto-playing videos, parallax effects and scroll-triggered animations all increase cognitive load. For dyslexic readers, who are already running closer to working-memory capacity, motion is not "extra"; it is a tax.
No carousels for primary content. Anything important enough to be on the page deserves a static slot.

Reader-mode friendliness Medium impact

Use semantic HTML (article, section, main, proper heading order). Reader-mode and reading extensions parse semantic markup; if your article is wrapped in 12 nested divs, your dyslexic users cannot escape your design. Our comparison in reader mode vs reading extensions shows why this matters.
Do not block font overrides. Setting !important on font-family in body styles fights browser extensions like LexiFont that let users apply a dyslexia-friendly font globally. If your design is good, it survives a font swap; if it only works with one specific font, it was over-fitted.

5. Forms

Form readability Medium impact

Label every field outside the input. Placeholder-only labels disappear the moment a user starts typing - which is the moment they most need the label to check what they meant to put in the field.
Field size matches expected input. A two-character country-code field should not be 200px wide.
Specific error messages. "Invalid input" forces the reader to re-derive what went wrong. "Email is missing the @ symbol" tells them exactly where to look.
Do not auto-format as the user types unless the format is unambiguous (phone numbers in a fixed locale, credit cards). Reformatting in real time disorients dyslexic users.
Allow generous time-outs on session-based forms. A dyslexic user re-reading your terms-of-service before signing it is the user you wanted; do not kick them out at the five-minute mark.

6. Testing

What to actually test High impact for shipping confidently

Read your own body copy at the size you ship it, on the device your users will use. The number of teams that design at 14px on a 5K monitor and then ship at 14px to a 13-inch laptop screen is unreasonable.
Apply LexiFont (or any dyslexia-font extension) to your own site and read three full articles. If your design breaks - if headings collide, if cards overflow, if buttons reshape - the breakage will hit your dyslexic users by default.
Tab through the page with the keyboard. If you cannot reach every interactive element with Tab and read its purpose from focus state alone, neither can a user with assistive tech.
Test on a 200% zoom. Many dyslexic users zoom their browser. If your layout breaks at 200%, you are excluding them.
Ask one dyslexic user to read for five minutes and tell you what they noticed. Not "is this accessible" - that is a yes/no with no useful answer. Just "what stood out, good or bad, in those five minutes." The answers are short and obvious.

The honest part: what this checklist will not fix

None of this turns a fundamentally cluttered page into a calm one. If your editorial choice is to put twelve recirculation modules around the article, no font tweak will save the reader. The structural decision - how much content sits on the page at once, how aggressively it competes for attention, how many things are blinking - is upstream of typography. Our piece on dyslexia-friendly news sites walks through what this looks like in practice on the worst offenders.

It also will not replace the user's own tools. A meaningful share of dyslexic readers run a font-swap extension (this is exactly what LexiFont exists to do) regardless of how good your design is, because they have settled on a specific stack - OpenDyslexic at 18px, cream background, 1.6 line-height - that works for them across every site. The kindest thing you can do is design in a way that survives that override.

The two-minute version (print this)

Body 18-20px, humanist sans, weight 400-450, line-height 1.5, max 70ch per line, left-aligned, dark grey on off-white, semantic HTML, no font-family !important, labels outside inputs, respects prefers-reduced-motion and prefers-color-scheme, works at 200% zoom.

That is roughly 90% of the gain. The rest of this article is how to get the last 10%.

Get LexiFont Pro - OpenDyslexic, Lexend, Atkinson Hyperlegible and Comic Neue for $14.99 one-time