Good Background Colors for Readers: a Study of People with and Without Dyslexia
Total Page:16
File Type:pdf, Size:1020Kb
Good Background Colors for Readers: A Study of People with and without Dyslexia Luz Rello Jeffrey P. Bigham Human-Computer Interaction Institute Human-Computer Interaction Institute & Carnegie Mellon University Language Technologies Institute [email protected] Carnegie Mellon University [email protected] ABSTRACT The use of different background colors to enhance reading performance of those with dyslexia has been broadly dis The use of colors to enhance the reading of people with cussed in previous literature and has been recommended by dyslexia have been broadly discussed and is often recom institutions such as the British Dyslexia Association [4]. To mended, but evidence of the effectiveness of this approach is the extent of our knowledge the existing recommendations lacking. This paper presents a user study with 341 partic are not based on objectives measures collected with large ipants (89 with dyslexia) that measures the effect of using user studies. In this paper, we present the first study that background colors on screen readability. Readability was measures the impact of ten background colors on the reading measured via reading time and distance travelled by the performance. The user study was carried out with a large mouse. Comprehension was used as a control variable. The number of participants (341) with and without dyslexia, al results show that using certain background colors have a sig lowing for a statistical comparison between groups. nificant impact on people with and without dyslexia. Warm The main contributions of this study are: background colors, Peach, Orange and Yellow, significantly improved reading performance over cool background colors, - Background colors have an impact on the readability Blue, Blue Grey and Green. These results provide evidence of text for people with and without dyslexia, and the to the practice of using colored backgrounds to improve read impact is comparable for both groups. ability; people with and without dyslexia benefit, but people with dyslexia may especially benefit from the practice given - Warm background colors such as Peach, Orange, or the difficulty they have in reading in general. Yellow are beneficial for readability taking into con sideration both reading performance and mouse dis tance. Also, cool background colors, in particular Blue Keywords Grey, Blue, and Green, decreased the text readability Background colors, Dyslexia, Readability, Reading Speed for both groups; however, this do not necessarily mean that such colors need to be avoided. Categories and Subject Descriptors - When reading on screen, people with dyslexia present K.4.2 [Computers and Society]: Social Issues—Assistive a significantly higher use of the mouse in terms of dis technologies for persons with disabilities; K.3 [Computers tance travelled by the mouse. in Education]: Computer Uses in Education—Computer assisted instruction The next section focuses on dyslexia, reviews related work, and explains the relationship of dyslexia to visual stress syn drome (Meares-Irlen syndrome). Section 3 explains the ex 1. INTRODUCTION perimental methodology and Section 4 presents the results, More than 10% of the population has dyslexia, a specific which are discussed in Section 5. In Section 6 we derive rec learning disability with a neurobiological origin [15, 17, 32]. ommendations for dyslexic-friendly background colors and The World Federation of Neurology defines dyslexia as a dis mention future lines of research. order in children who, despite conventional classroom expe rience, fail to attain the language skills of reading, writing, 2. DYSLEXIA AND COLORS and spelling commensurate with their intellectual abilities According to the International Association of Dyslexia, [33]. dyslexia is characterized by difficulties with accurate and/or fluent word recognition and poor spelling and decoding abil Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed ities. These difficulties typically result from a deficit in for profit or commercial advantage and that copies bear this notice and the full cita the phonological component of language that is often un tion on the first page. Copyrights for components of this work owned by others than expected in relation to other cognitive abilities and the pro ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or re publish, to post on servers or to redistribute to lists, requires prior specific permission vision of effective classroom instruction [20]. Therefore, in and/or a fee. Request permissions from [email protected]. theory, dyslexia is not related to the color in which the text ASSETS ’17, October 29-November 1, 2017, Baltimore, MD, USA or the background is presented. However, there are a num ©c 2017 ACM. ISBN 978-1-4503-4926-0/17/10. $15.00 ber of studies and recommendations regarding colors and DOI: https://doi.org/10.1145/3132525.3132546 dyslexia. One possible explanation for this is that visual stress syndrome (Meares-Irlen syndrome) is associated with of 32 children with dyslexia with a control group of same size. dyslexia. In this section we explain both, (i) the previous The differences between the two groups did not reach sta work regarding color recommendations and dyslexia, and (ii) tistical significance. The authors conclude that Meares-Irlen the relationship of dyslexia to Meares-Irlen syndrome. syndrome is prevalent in the general population and possibly somewhat more common for people with dyslexia. Children 2.1 Related Work with dyslexia seemed to benefit more from colored overlays McCarthy and Swierenga stated that poor color selections than non-dyslexic children. The authors stress that Meares- are one of the key problems encountered by people with Irlen syndrome and dyslexia are separate entities and are dyslexia when reading on a screen [21]. There are a number detected and treated in different ways [18]. of studies that have recommended the use of certain fonts Moreover, Jeanes et al. [16] showed how color overlays im or background colors. According to Perron, high contrast proved the reading performance of children in school without creates so much vibration that it diminishes readability [23]. taking into consideration dyslexia or other visual difficulties. Likewise, Bradford recommends avoiding high contrast and Gregor and Newell [13], and later Dickinson et al. [7] have suggests pairing off-black/off-white for font and background shown that visual changes in the presentation of text may respectively to enhance Web accessibility for people with alleviate some of the problems generated by dyslexia and dyslexia [3]. In a user study carried out by Gregor and visual comorbidities. Newell [12, 13] mucky green/brown and blue/yellow pairs were chosen by people with dyslexia. 3. METHODOLOGY An eye-tracking study of 22 participants with dyslexia [28] To study the effect of background colors on screen read showed that a black font over a cream background presented ability, we conducted a user study where 341 participants shorter fixation durations among the participants, being the (89 with dyslexia) read 10 comparable texts with varying most readable pair. The same experimental setting was later background colors. Readability was measured via reading performed with a larger group of participants (92 people, 46 speed and a mouse-tracking measure, while comprehension with dyslexia and 46 as a control group) giving comparable was used as a controlled variable measured by comprehen results [26]. Similarly, a cream background color is recom sion tests. mended by the British Dyslexia Association [4]. Our study advances previous work in two ways (i) we are 3.1 Experimental Design using 10 background colors with black font similar to the color overlays used to treat Meares-Irlen syndrome, even if it 3.1.1 Independent variables is not a language based disorder, given their previous success In our experimental design, Background Color served as in that target population (see Section 2.2); (ii) it is the first an independent variable with 10 levels. The text color time that a mouse tracking measure is used to address text used in all samples was black (f00000). Following we present readability for participants with dyslexia; and (iii) the user each of the levels of Background Color followed by the RGB study was carried out with a large number of participants color values, the hex color value; and the luminosity contrast with and without dyslexia allowing a statistical comparison ratio1). Since all the color contrasts are greater than 7:1 they between the groups. all meet the WCAG[5] color contrast requirements for AAA. 2.2 Dyslexia and Meares-Irlen syndrome - Blue: RGB(150, 173, 252); #96ADFC; 9.68:1. Dyslexia rarely occurs alone. Dyslexia has a wide range of comorbities, that is, conditions that exist simultaneously but - Blue Grey: RGB(219, 225, 241) #DBE1F1; 16.05:1. are independent to dyslexia. The most common ones are: dysgraphia, attention deficit disorder and attention deficit - Green: RGB(219, 225, 241) #A8F29A; 15.83:1. hyperactivity disorder, and visual stress syndrome (Meares- Irlen syndrome). Among the visual difficulties associated - Grey: RGB(168, 242, 154) #D8D3D6; 14.21:1. with dyslexia that could be alleviated by modifications of - Orange: RGB(216, 211, 214) #EDDD6E; 15.17:1. the visual display [10], the most studied is Meares-Irlen syn drome [18]. - Peach: RGB(237, 221, 110) #EDD1B0; 14.35:1. Meares-Irlen Syndrome is a perceptual processing disor der, meaning that it relates specifically to how the brain - Purple: RGB(237, 209, 176) #B987DC; 7.56:1. processes the visual information it receives. Unlike dyslexia, it is not a language-based disorder but it is comorbid with - Red: RGB(185, 135, 220) #E0A6AA; 10.2:1. dyslexia. Of individuals with dyslexia, 25.84% in Spanish-speakers - Turquoise: RGB(224, 166, 170) #A5F7E1; 16.99:1. [1] to 46% in Portuguese-speakers [14] have Meares-Irlen - Yellow: RGB(248, 253, 137) #F8FD89; 19.4:1.