How to write dyslexic friendly web content: colours and fonts
The challenges people face with dyslexia
It’s estimated that around 6.3 million people have dyslexia in the UK. That’s 1 in 10 people, according to the British Dyslexia Association (BDA). And around 700 million have it worldwide.
Dyslexia is often associated with having trouble with reading, writing and spelling. But it can also affect:
- how you process and remember information
- how you recognise the different sounds that make up a word and match these to the letters on a page or screen
- concentration span
- your ability to focus on lines of text for a long time, which makes quickly understanding long passages of text difficult
You may also experience visual distortions that make letters jump around the page. Like many other conditions, dyslexia affects people to different degrees.
These best practice tips on language, colours, and fonts can help make your digital content more dyslexic friendly. But they can also improve readability for a larger number of your website users.
Use these tips with the Web Content Accessibility Guidelines (WCAG) to make your website more inclusive.
Use dyslexic friendly fonts
The font you choose can have a great impact on readability.
People with dyslexia can experience a type of visual distortion which makes the words appears to run together. This is more likely to happen if the font is highly stylized, or there’s not enough spacing between letters.
The following best practice tips make your content more dyslexic friendly. And they’ll improve readability for everyone:
- Choose sans serif fonts like Arial, Calibri, Verdana or Tahoma which are easier to read and less crowded than other typefaces.
- Use a font size of 12 to 14 point (or 16 to 19 pixels)
- Headings must be at least 20% larger than the body text
- Make sure inter-character spacing (also called tracking) is 35% of the average letter width
- Inter-word spacing should be at least 3.5 times the character spacing
- Use at least 1.5 spacing between lines
- Avoid underlines and italics, as these can make words look closer together and more cramped. Instead, use bold formatting for emphasis.
You can check and change the character spacing width in Microsoft Word.
If you’re publishing content on a webpage, it’s important to check the formatting afterwards. You may have to ask a web developer to make some of these changes.
Use dyslexia friendly colours
Many people with dyslexia are sensitive to the high contrast of pure black text on a pure white (#FFFFFF) background. This can trigger a visual distortion where the text blurs together. This sharp contrast can produce a glare that makes words harder to read and can make reading long pages of text tiring.
Use dark coloured text on a light (but not white) background. This will make written content more dyslexic friendly. And instead of using pure black (#000000) for your text colour, try dark grey.
Using backgrounds with patterns or photos can make the text harder to read for non-dyslexic users too. Instead, use a simple, single-colour background instead, such as:
- light grey
- soft pastel colours
Whatever you choose, make sure that there is still enough contrast between the background and text colours. And remember not to rely only on colour as the way to explain or identify something.
Write in plain English
Plain English writing is a style of writing that is clear, direct and easy to understand. It uses everyday language, short sentences and avoids complex jargon and metaphors.
Writing in plain English makes your content more accessible to people with dyslexia. But it also makes it easier for everyone to read and understand.
Consider the following best practice writing tips for readers with dyslexia:
- Choose short words over longer alternatives (for example, instead of “additional,” use “more”)
- Use the active voice over the passive voice
- Avoid complex or foreign language phrases like “a laissez-faire approach”
- Avoid using upper case
- Avoid words with silent letters where possible, such as ‘numb’
- Use commas instead of hyphens and em-dashes in your sentences, as these can interrupt the flow of the sentence.
Tools to help
You can check how readable your content is using various readability scales, like the Gunning Fog index.
Other writing tools like Hemingway Editor highlight the hard to read sentences in your text, complex language and the passive voice. Hemingway is also useful as it gives you an idea of the level of education a person needs to understand your writing.
If you use Microsoft Word, you can also find a readability score calculator in the preferences menu.
“With my dyslexia, I need text to be short and concise. Or I need the main points summarised at the top of the article as an executive summary. If anything is too long I won’t attempt to read it if I do not have to, or I will stop reading it part way through. Bullet points and a clear layout, plus signposting help me too.”
Use a consistent structure and layout
The way you present your content is just as important as the writing itself. It’s important that you structure your webpage with logical headings and a consistent layout. This will help all your users navigate through your text and understand it better.
Some general tips for structuring your content:
- Put all essential information in the opening section of your writing
- Use meaningful, relevant headings
- Include a contents table for longer pages of text, with links that allow readers to skip to the sections they want to read
- Consider splitting complex topics that need lots of detail across more than one web page
- Use short paragraphs to reduce the chance of the reader losing their place, or experiencing blurring distortions
- Use bullet points and numbered lists to break up long passages of text
- Communicate one idea per paragraph to allow breaks between concepts
- Avoid columns in your page layout
- A line length of 60 to 70 characters is ideal
People with dyslexia can also experience what’s called the ‘river effect’ when they see large gaps in long lines of text. The spacing between words moves the visual focus onto the white space, which looks like a river flowing down the page.
Certain bad practises like justified text, irregular spacing between words and double spaces after full stops can exaggerate this distortion. It is always better to use left-aligned text instead.
Design your content for assistive technology
It’s very common for people with dyslexia to use assistive technology devices like text-to-speech software, which converts text to audio.
Others may use a screen reader to help them understand a long page of text. While all screen readers work slightly differently, follow these general tips to make your content more accessible.
In either case, it’s likely that they will navigate your content using links and headings. Make sure:
- headings are relevant and follow a logical structure (H1, H2, H3)
- link text is descriptive (never use “click here” or “read more”)
This is also helpful in aiding the reader to digest the overall information without having to read it all. Including the distinguishing information at the beginning of each paragraph also helps with this.
Also try not to overuse acronyms. They can sound like nonsense when read aloud by a screen reader. For example, the acronym for search engine optimisation, “SEO” is pronounced like “SEO”.
Some readers will need to increase the size of the text to understand it better. It’s important that your website is correctly coded so they can access all content when the text size is increased by 200% or more.
Content must be responsive to your user’s devices, browsers and page orientation preference. The text should reflow to a single column when increased by 400% or more.
Provide information in different formats
Remember that your content does not have to just contain text. Many people with dyslexia identify as strong visual thinkers and processors.
- Use images to support the main points in the text
- Use flow charts to explain procedures
- Use icons to create visual signposts
- Use video and audio media to explain complex information
Adding audio files to your webpage means readers with dyslexia have a choice about how they engage with your content. Like audiobooks, they are particularly useful for people who prefer to ‘hear’ the text read aloud.
More resources on writing for dyslexia
- Writing to meet Web Content Accessibility Guidelines (Web Accessibility Initiative)
- Accessibility and me: Dealing with dyslexia (GOV.UK)
- Creating a dyslexia-friendly workplace (British Dyslexia Association)