How to Make Websites Readable for Dyslexia
If you're dyslexic, you've probably noticed that some websites are genuinely difficult to read. Dense text blocks, tiny fonts, poor colour contrast, and distracting layouts can make even simple tasks feel exhausting. The good news is that small changes, both to how websites are designed and how you read them, can make a huge difference.
This guide covers practical strategies for making websites more readable, whether you're a web designer wanting to improve your site, a parent helping your child navigate online learning, or someone with dyslexia looking for ways to make your browsing easier.
Use Dyslexia-Friendly Fonts
The typeface you're reading makes a genuine difference. Serif fonts, which have small lines at the end of letters, can be harder for dyslexic readers to distinguish between similar letters like 'b' and 'd'. Sans-serif fonts (without serifs) are generally easier to read.
Better still are fonts specifically designed for dyslexia. OpenDyslexic, for example, has thicker bottoms on letters and increased spacing, which helps the brain process text more easily. Dyslexia-friendly fonts like this reduce the cognitive load when reading.
If you're designing a website, consider offering OpenDyslexic as an option. If you're a reader struggling with a site's font, browser extensions like Dyslexly let you apply dyslexia-friendly fonts to any website you visit, instantly making text clearer.
Improve Colour and Contrast
Colour overlays and contrast adjustments are unexpectedly powerful. Black text on white can create visual stress for some dyslexic readers, causing text to appear to swim or shimmer on the page. Warmer background colours, like cream or soft blue, often feel easier on the eyes.
Contrast matters too. If your site uses dark grey text on a light grey background, you're making it harder for everyone, not just dyslexic readers. Aim for strong contrast: dark text on light backgrounds, or light text on dark backgrounds.
For designers: test your colour choices with contrast checkers. WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal text. If you're a reader finding websites difficult, Dyslexly includes colour overlay options that let you adjust background and text colours for individual sites, removing the strain.
Increase Spacing and Line Height
Cramped text is an enemy of readability. When lines of text sit too close together, dyslexic readers often lose their place or accidentally jump to the wrong line. Increasing line height (the vertical space between lines) makes a measurable difference.
The same applies to letter spacing. Text crammed together horizontally is harder to parse. A little extra breathing room helps letters stay distinct in your visual field.
Website designers should aim for line height of at least 1.5 times the font size, and letter spacing of 0.12 em. For readers navigating tight layouts, upgrading to Dyslexly gives you access to adjustable line spacing and letter spacing controls, so you can customise any website to your comfort level.
Break Text Into Smaller Chunks
Large walls of text are intimidating for everyone, but they're particularly taxing for dyslexic readers. Breaking content into smaller paragraphs, using clear headings, and including white space makes pages feel less overwhelming.
Bullet points and numbered lists are your friend. They're easier to scan and remember than dense prose. Short sentences are also better than long, complex ones. When you finish a sentence, you've accomplished something, and your brain gets a micro-break before moving to the next idea.
Designers should aim for paragraphs of 3-4 sentences maximum. Readers can also adjust this themselves using tools that reformat pages, though this works best when sites are already reasonably well-structured.
Use Text-to-Speech Support
Reading and listening at the same time helps dyslexic readers process information more effectively. When you hear words read aloud while seeing them on screen, your brain receives reinforcing signals, improving comprehension and reducing reading effort.
Website designers can embed built-in text-to-speech functionality. For users, browser extensions like Dyslexly include text-to-speech that works on any website, letting you listen to articles, emails, and online documents without needing special versions.
Offer Reading and Focus Tools
Some dyslexic readers benefit from 'line focus' tools that highlight a single line at a time, reducing visual clutter and helping you track where you are on the page. Word simplification tools are also helpful, replacing complex vocabulary with simpler alternatives without changing the meaning.
If you're designing a website for accessibility, consider partnering with accessibility-focused tools or building these features in. For individual readers, tools like Dyslexly integrate these features into regular websites, so you don't have to find specialised versions of every site you use.
Make Navigation Clear and Consistent
Dyslexic readers can be slower to process written navigation, so it needs to be intuitive. Clear menus, logical site structure, and consistent placement of navigation elements reduce cognitive load and mean users aren't hunting for buttons.
Use plain, direct language. Avoid jargon and vague labels like 'miscellaneous' or 'resources'. Labels like 'Contact us', 'Help', or 'Search' are immediately clear. Breadcrumb navigation (showing the path you've taken through the site) is especially helpful, as is a working search function.
Consistency is crucial. If your logo links to the homepage on one page, it should on every page. If settings are in the top-right corner on some pages, they should be there on all pages.
Conclusion
Making websites readable for dyslexia involves thoughtful choices about fonts, colours, spacing, and structure. Whether you're a website designer, teacher, parent, or someone with dyslexia navigating the web yourself, these principles work. If you're reading online and struggling, tools that add dyslexia-friendly support to any website can remove the friction. And if you're building websites, remembering that accessibility benefits everyone makes your site better for all readers.
Frequently Asked Questions
What is the best font for dyslexic readers? Sans-serif fonts are generally easier for dyslexic readers than serif fonts. Fonts specifically designed for dyslexia, such as OpenDyslexic, Dyslexie, and Read Regular, are even better because they have exaggerated letter shapes that are harder to confuse. Different fonts work for different people, so it's worth trying a few to find what works best for you.
Can colour overlays really help with reading? Yes, for many dyslexic readers. Coloured overlays or background colours reduce the visual stress that can make text appear to move or shimmer. Common helpful colours include cream, light yellow, light blue, and light green, though the best choice varies from person to person. Experimenting to find your ideal colour takes a few minutes and can noticeably improve comfort.
What is line height and why does it matter? Line height is the space between lines of text. If lines are too close together, dyslexic readers often lose their place or accidentally skip lines. A line height of at least 1.5 times the font size is recommended for accessibility. This simple adjustment makes text much easier to follow without changing anything else about the page.
Are there tools that make regular websites more readable? Yes. Browser extensions can apply dyslexia-friendly fonts, colours, spacing adjustments, text-to-speech, and line focus tools to any website, turning a difficult-to-read site into something accessible. These tools work across all websites you visit, so you don't need to find specialist versions of every page.
Should website designers build in dyslexia features or rely on user tools? Ideally both. Building accessibility into websites (using good fonts, contrast, and spacing) benefits everyone and is the gold standard. However, not all websites prioritise this yet, which is where user tools fill the gap. As a designer, focus on the fundamentals. As a reader, use whatever tools help you access the web comfortably.