For people with dyslexia reading web pages can be difficult, but there are things designers can do to make it easier. They are quite simple changes, but may require sacrificing some design freedom.
Dyslexia is a recognised disability with a biological foundation. It affects around 15% of people worldwide (men and women equally).
This is another research post for a project I've been working on with the University of Hertfordshire, which aims to be used by people with a range of disabilities. Most projects won't have such strict accessibility requirements so it's up to the designer to decide how closely to follow these guidelines.
A paper written for WAI R&D Symposia did an empirical study of optimal colors to improve readability; testing both dyslexics and non-dyslexics. Another study found no significant effects. I'll summarise the WAI study, but as recommendations from other sources are further contradictory, take the following with a pinch of salt.
The web's default combination of black text on a white background is not to be recommended. It's most preferred by non-dyslexics but has a poor preference with dyslexics. Empirically it has medium fixation durations with both groups (it takes longer to read than other combinations, though it's not the worst). It is also not recommended from a (digital) design perspective. As the excellent book Butterick's Practical Typography states, glowing screens produce very high contrast which becomes tiring, so I usually use off-black text (#222222) on white.
Most surprisingly, off-black text on off-white background had poor reading performance and low preference with both groups.
The best all-rounder combination tested was pure black text but on a cream (#FAFAC8) background. This was tested as it was recommended and used by the British Dyslexia Association. Worryingly though, the BDA now seem to have switched to using a variant on the worst performing combination; dark grey on light grey! Even worse, some of their other color combinations flat out fail the WCAG color contrast guidelines.
Unfortunately the off-black on white combination which I usually design with was not tested.
Popular design advice suggests off-black on white. The WAI study suggests black on off-white (cream). As several studies conflict and none showed huge differences it's probably OK to use any reasonable color combination. Whatever combination you choose should still adhere to the WCAG color contrast guidelines for visibility. I will be sticking to tinting just the foreground or background color to suit a brand design, while keeping the other color black or white (ensuring suitable contrast in between).
Designers often like to choose from a wide array of fonts to make designs more interesting and to suit the tone of their content “Typography is the visual component of the written word”—Mathew Butterick.
However font choice can affect readability by people with dyslexia. For primarily informational sites—where the artistry of the design can take a back seat—known readable choices should be used. The paper Good Fonts for Dyslexia researches this thoroughly.
Some fonts lead to a faster reading and shorter fixation times. The best performing and most preferred fonts are equally suitable for dyslexics and non-dyslexics. The top choices being Arial, Verdana, Helvetica and Times. This is likely because those are widely available on most computers so are frequently used—a person with dyslexia will get used to seeing these fonts thus finding them easier to read.
There are specially designed fonts for dyslexia, however one such performed poorly in the study. They are also ugly so participants didn't like them. I have not seen them used or recommended by any dyslexia organisation. My hypothesis is as above that the readability of fonts is due to familiarity rather than any specific features, so dyslexic fonts are doomed to fail. I would recommend against using them as their benefit doesn't seem clear and they are sure to ruin the aesthetic of any design. However they could be offered as a choice, for any dyslexic user who has become used to and likes them.
For the University of Hertfordshire project (and this post) I have chosen Arial as the body font and Verdana to provide some contrast to headings. As Butterick recommends a serif font for long body text then another good combination would be Times for body and Arial for headings.
✓ Bold text is easier to read by people with dyslexia. Make headings and certain emphasised elements bold but leave the main text normal weight.
Do not use italics! People with dyslexia find italics especially hard to read. So use them sparingly on just one or two words for emphasis, but not whole paragraphs.
Avoid underlined text as it makes letters appear to merge together. This is also good general design advice as underlining should be reserved for links. Enough emphasis can be gained from bold alone.
ALL CAPITAL text is hard to read and annoying generally so don't use it. People don't read every letter in a word, they tend to “read” the shape of the word. When in all caps, however, a word's shape is different to what we're used to and effectively just a rectangle; hence being harder to read.
The BDA Dyslexia Style Guide's section on layout is quite similar to the guidelines in Butterick's as good typography will make reading easier for everyone. Another article on designing for dyslexia echoes much the same, and finally a post with resources on broader issues. I will encourage you to follow Butterick's as it is more comprehensively written by a designer (and type designer no less). The whole book is a good read, or if short on time the key rules can suffice. Summarising the most important for dyslexia:
Good writing is equally as important for understandability, however designers often don't have control over the content so I won't cover it (but Butterick does).
I found several articles about designing for dyslexia that don't follow their own advice, setting a bad example. It's shocking how badly some dyslexia organisations designed their own websites, even failing web standards. If they don't bother to suitably design their own websites, why should less dyslexia focussed websites put in the effort?
I think it's important and worth designing with dyslexic people in mind, so this post is styled following its own advice. Hopefully this will encourage others to follow these guidelines. Consider whether you—with or without dyslexia—found this post easier to read than usual, and decide if you can comfortably use some of these design tips in your own work.
article {
max-width: 600px;
background-color: #FAFAC8;
color: #000;
font-family: arial, sans-serif;
font-size: 23px;
line-height: 30px;
}
h1, h2, h3, h4, h5, h6 {
font-family: verdana, sans-serif;
}
Designing for dyslexia doesn't conflict with designing for other accessibility concerns such as color blindness, it enhances the readability of the design for everyone. There are many little things that can be improved for dyslexics, so even just incorporating a few of them could make a difference without having to make a big compromise on the design's artistry.
Sticking to the most common fonts can aid readability, primarily Arial, Verdana, Helvetica and Times. Large font size, a line spacing > 1, and short line lengths can all enhance readability too. There is contradictory research on color choices leaving you to make educated guesses.