Layout Guidelines for Web Text and a Web Service to Improve Accessibility for Dyslexics
Luz Rello, Gaurang Kanvinde, Ricardo Baeza-Yates · 2012 · Proceedings of the International Cross-Disciplinary Conference on Web Accessibility (W4A) · doi:10.1145/2207016.2207048
Summary
This paper presents evidence-based layout guidelines for making web text more readable for people with dyslexia, derived from a user study with 22 dyslexic participants and a matched control group. The study is notable for being the first to combine eye-tracking data with qualitative data from interviews and questionnaires to define dyslexia-friendly text presentation guidelines. Participants read 36 text segments with systematically varied layout parameters: font grey scale (0%, 25%, 50%, 75%), background grey scale (100%, 75%, 50%, 25%), eight colour pairs, four font sizes (14, 18, 22, 26 points in Arial), four character spacings (-7%, 0%, +7%, +14%), four line spacings (0.8, 1.0, 1.2, 1.4), four paragraph spacings (0.5, 1, 2, 3 lines), and four column widths (22, 44, 66, 88 characters per line). The methodology combined objective fixation duration measurements from a Tobii T50 eye tracker with subjective user preferences, and when these conflicted, the authors prioritized eye-tracking data for non-numerical values (like colours) since user preferences can change over time. The resulting guidelines were implemented in AccessibleNews DysWebxia, a web service that reformats online articles with dyslexia-friendly styling.
Key findings
The study confirmed statistically significant differences in fixation duration between dyslexic (0.23 seconds) and non-dyslexic (0.20 seconds) readers (p<0.038). Key guideline recommendations: font size of 26 points (the largest tested, preferred by 63.64% of participants with significantly shorter fixation durations than 14pt, p<0.001); creme/black colour pair (fastest to read at 0.214 seconds mean fixation, recommended by the British Dyslexia Association); 10% grey scale for font and 90% for background (avoiding pure black on white, as high contrast can cause words to swirl or blur); +7% character spacing (both the most readable by eye tracking and tied as most preferred); 1.4 line spacing (most preferred at 38.64%); 2-line paragraph spacing (fastest to read and most selected at 65.91%); and 77 characters per line column width (averaged from the two most preferred values of 44 and 66, as wider columns correlated with better readability, r=-0.751). A surprising finding was that the most popular colour pair (yellow/black, chosen by 8.3 participants) actually had the highest mean fixation duration (0.239 seconds) — users perceived high contrast as more readable even though it was objectively harder to process. The off-white/off-black pair recommended in previous literature was chosen by zero participants.
Relevance
This is a foundational study in the Rello research program on dyslexia and web accessibility, establishing the empirical basis for the DysWebxia tool. The guidelines are directly actionable for web developers: use large fonts (at least 22-26pt for body text), avoid pure black on white, use creme or off-white backgrounds, increase character spacing slightly, use generous paragraph spacing, and allow moderate line lengths. The finding that subjective preferences and objective readability measures can diverge significantly is crucial — it means that user preference surveys alone are insufficient for establishing accessibility guidelines, and eye-tracking or similar objective measures are needed. The web service prototype (AccessibleNews DysWebxia) demonstrates a practical deployment model where articles are extracted, reformatted, and served with customizable parameters. The study is limited to Spanish speakers and 22 dyslexic participants, and the authors acknowledge that there is no single "dyslexic profile" — customization remains important. This work directly informed the later study on Wikipedia font sizes that narrowed the optimal size to 18 points when tested in a real website context.
Tags: dyslexia · readability · typography · eye tracking · text presentation · web accessibility · cognitive accessibility · color contrast · font size · line spacing
Standards referenced: WCAG 2.0