Good Background Colors for Readers: A Study of People with and without Dyslexia
Luz Rello, Jeffrey P. Bigham · 2017 · Proceedings of the 19th International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS '17) · doi:10.1145/3132525.3132546
Summary
This paper presents the first large-scale user study measuring the effect of background colors on screen readability for people with and without dyslexia, providing empirical evidence for the widely recommended but previously unvalidated practice of using colored backgrounds to improve reading. The researchers tested 10 background colors (Blue, Blue Grey, Green, Grey, Orange, Peach, Purple, Red, Turquoise, and Yellow) with black text, all meeting WCAG AAA contrast ratio requirements (greater than 7:1). The study involved 341 participants — 89 with dyslexia and 252 controls — all Spanish native speakers aged 18-60, recruited through dyslexia associations across Spanish-speaking countries. Readability was measured through two dependent variables: Reading Time (time to read a 55-word paragraph) and Mouse Distance (total pixels the mouse traveled over the text, a secondary readability indicator where more mouse movement correlates with more complex text processing). Comprehension questions served as a control variable to ensure texts were actually read. The connection between dyslexia and color sensitivity is partly explained by Meares-Irlen Syndrome, a perceptual processing disorder comorbid with dyslexia in 25-46% of cases, characterized by visual stress and perceptual distortions that can be alleviated by colored filters.
Key findings
Background color had a highly significant effect on reading time for both groups (chi-squared(9)=1154.81, p<0.001). Warm background colors consistently outperformed cool colors. For participants with dyslexia, Peach produced the shortest mean reading time (14.85s), followed by Orange (15.33s) and Yellow (16.30s). Blue Grey was worst (21.57s) — 45% slower than Peach. The same pattern held for the control group: Peach (12.28s), Orange (12.32s), and Yellow (13.43s) were fastest, with Blue Grey again worst (18.82s, 53% slower than Peach). Critically, the Spearman correlation between groups was very strong (rho=0.964, p<0.001), meaning the color effects were comparable for both populations. Cool colors Blue Grey, Blue, and Green consistently produced the longest reading times and highest mouse distances for both groups. Mouse distance data confirmed the pattern: Blue Grey produced the longest mouse distances for both groups. People with dyslexia had significantly longer reading times overall (mean 17.73s vs 14.98s, p<0.001) and significantly more mouse movement (mean 1954.64 vs 1546.90 pixels, p=0.015). The warm color recommendations align with the British Dyslexia Association's recommendation of cream-colored backgrounds and prior eye-tracking studies showing shortest fixation durations on cream backgrounds.
Relevance
This study provides the first large-scale empirical validation for a practice that has been recommended for years without strong evidence: using warm-toned backgrounds to improve readability. The practical implications are straightforward and immediately actionable for web developers, content creators, and accessibility practitioners. Instead of the default white background, using Peach (#EDD1B0), Orange (#EDDD6E), or Yellow (#F8FD89) background colors with black text can measurably improve reading performance for all users, with particular benefit for the estimated 10% of the population with dyslexia. The finding that cool colors like Blue Grey and Blue significantly impair reading performance is equally important as a design caution. Notably, these effects are not dyslexia-specific — both groups responded similarly to color stimuli — which means warm background colors represent a universal design improvement rather than a specialized accommodation. The mouse tracking methodology is also noteworthy as a novel, unobtrusive measure of reading difficulty that could be applied in other readability research. For WCAG compliance, all tested colors exceeded AAA contrast ratios, demonstrating that readability-enhancing colors and accessibility standards are fully compatible.
Tags: dyslexia · readability · color contrast · reading accessibility · visual design · web accessibility · typography · Meares-Irlen syndrome
Standards referenced: WCAG 2.0