THE IMPACT OF THE TEXT AND BACKGROUND COLOR ON THE SCREEN READING EXPERIENCE

Abstract

Everyday use of modern technologies implies the need for an optimization of readability and legibility parameters used for the reading of text on screen. A lot of research on readability and legibility in printed materials and digital media has been conducted. It has been noted that the rules for the optimal readability and legibility do not apply equally to both mediums. The choice of proper typeface and font size, foreground and background colour, line spacing, sentence length, and text difficulty have the biggest role in text legibility. There is a tendency in our speaking area to read black text on a white background, which is a standard colour combination in printed materials. Furthermore, many studies have concluded that the above mentioned colour combination is one of the best when it comes to achieving optimal text readability and legibility. The purpose of this study was to test the readability and legibility of text on a computer screen by taking into consideration the different colour combinations of text and background. The factors listed above were used to define the text sample. In this research, for each of the five groups tested, the colour of the text and background were varied, while the content and other parameters of the text sample were constant.

Full text

78 TECHNICAL JOURNAL 11, 3(2017), 78-82
ISSN 1846-6168 (Print), ISSN 1848-5588 (Online) Original scientific paper
ID: TG-20170816160928
THE IMPACT OF THE TEXT AND BACKGROUND COLOR ON THE SCREEN READING
EXPERIENCE
Anja ZORKO, Snježana IVANČIĆ VALENKO, Mario TOMIŠA, Damira KEČEK, Darijo ČEREPINKO
Abstract: Everyday use of modern technologies implies the need for an optimization of readability and legibility parameters used for the reading of text on screen. A lot of
research on readability and legibility in printed materials and digital media has been conducted. It has been noted that the rules for the optimal readability and legibility do not
apply equally to both mediums. The choice of proper typeface and font size, foreground and background colour, line spacing, sentence length, and text difficulty have the biggest
role in text legibility. There is a tendency in our speaking area to read black text on a white background, which is a standard colour combination in printed materials.
Furthermore, many studies have concluded that the above mentioned colour combination is one of the best when it comes to achieving optimal text readability and legibility. The
purpose of this study was to test the readability and legibility of text on a computer screen by taking into consideration the different colour combinations of text and background.
The factors listed above were used to define the text sample. In this research, for each of the five groups tested, the colour of the text and background were varied, while the
content and other parameters of the text sample were constant.
Keywords: colour; eye tracking; legibility; readability; reading speed; text
1 INTRODUCTION
Colour has been studied for many years in many
aspects, such as physics, psychology, art and graphic
design. The term colour, when referred to as a physically
measurable stimulus defines colour as the dominant light
wavelength of the visible part of the spectrum which causes
colour perception. Colour can also be defined by its abstract
nature as a sensory experience that is generated by the
stimulation of the visual system with specific
electromagnetic radiation. [1]
The human perception of colour begins when
electromagnetic radiation stimulates the cones present in the
eyes. A different stimulation of red, green and blue cones
generates the experience and perception of different colours.
The digital, on-screen display, uses the additive colour
mixing technique and RGB colour space. The RGB colour
space is very much like the human colour perception; it also
uses three components for colour building. In the RGB
colour space, colour is defined by a red, green and blue
component and each of them can be defined in the range
from 0 to 255, which means in 256 different values. Colour
can also be written in a hexadecimal system. The first two
digits define the value of red; the next two value of green
and the last two values define the blue colour component.
[2] Regardless of the aspect in which colour is studied, it is
ubiquitous and indispensable in everyday life. The current
lifestyle, ever-present technology and the existence of the
Internet greatly affect our way of spending time. Either for
work or leisure, most of that time is spent in front of a
screen, computer, mobile or tablet. Therefore, for overall
health perseverance, it is important to know what effect
colour can have on text readability and legibility, as well as
whether it affects the eye strain.
Previous research shows that specific text and
background colour combinations can affect text readability
and legibility. The readability of printed materials has been
thoroughly examined and documented; research shows that
a combination of black text on a white background (positive
text) is more readable than a combination of white text on a
black background (negative text). Previous research also
show that a slightly coloured paper does not affect text
readability, but the brightness contrast between the
foreground and background colours do affect it; the greater
the contrast, the better the readability. [3]
Beside the general guidelines, previous research has
given specific colour combinations that are now considered
optimal for readability enhancement (black text on white
background and black text on yellow background) and some
which are not recommended for use (as shown in Fig. 1,
green text on an orange background and red text on a green
background). [1] [3]
Figure 1 Best and worst foreground and background
colour combinations for printed materials
2 READABILITY AND LEGIBILITY
Čerepinko [4] defines legibility as an optical and visual
characteristic of character and readability as an optical and
visual characteristic of blocks of text and its defining of
how difficult a character is for reading. The readability of
text refers to its content and represents the objective
difficulty of reading which can be measured with various
formulas. The ease of reading also depends on the
competence and reading abilities of the reader itself.
While analysing the readability research, Dillon [5]
states that the speed of reading, accuracy of reading, fatigue,

Anja ZORKO et al.: THE IMPACT OF THE TEXT AND BACKGROUND COLOR ON THE SCREEN READING EXPERIENCE
TEHNIČKI GLASNIK 11, 3(2017), 78-82 79
understanding of the read text and personal preferences can
be researched. According to Dillon, measuring the speed of
reading to define text readability is one of the most common
methods. It can be carried out in two ways. The first way is
by defining the length of text that is going to be read and
then measure the time required to read it for every subject.
Other option is to limit the time of reading and measure the
length of read text in a limited time. The process of reading
depends on many factors of which the most significant are
the content suitability of the text, age and readers’ education
[6]. An average reader, in a text that is suitable for his or her
age and education level, fixates on 1.2 words in one gaze.
For a more complex text and less known topics, a number of
fixated words drops down below 1 and vice versa, while a
simpler text generates a greater number of fixated words.
[7] Previous research show that the readability of a text
depends on a number of factors, the appearance and size of
the typeface, proper character combining, the medium on
which it is printed and the method with which the text is
printed. Thereby, the optimal amount of characters in a line
(60 to 70 characters in printed materials and 40 for the
digital screen) has been previously defined. [8] The
influence of contrast on readability and legibility has also
been previously researched [9]. The serif typefaces proved
to be more readable for printed materials, while the sans
serif fonts proved to be more readable for the technologies
that display text on digital screens (tablet, personal
computer) [10], and they are preferred by the majority of
readers.
3 W3C CONSORTIUM AND WEB CONTENT ACCESSIBILITY
GUIDELINES
The World Wide Web Consortium (W3C) guidelines
are often used while preparing materials for digital devices.
"W3C is international community whose mission is to
define open standards to ensure the long-term growth of the
Web." [11]
W3C has defined some web content accessibility
guidelines (WCAG 2.0). Those guidelines contain
recommendations on how to arrange web content so that it
is accessible and equivalent to a greater number of users.
Guidelines are separated by categories such as visibility,
usability, intelligibility, robustness. That clear difference
between the foreground and background colour can help
improve readability, and it is mentioned under the visibility
guidelines. To get a better overall content accessibility, it is
recommended to have a greater colour contrast.
Minimal contrast is defined in two categories:
•Level AA - contrast ratio at least 4.5:1
•Level AAA - contrast ratio at least 7:1 [12]
The colour and brightness contrast can be used to define
the colour of text and colour of the background. The
brightness contrast or reflection can be defined as a ratio of
the amount of light reflected from the object in contrast to
the light shining on the object. [13] W3C defines brightness
contrast as a difference of value between the brightness
values of text according to the brightness values of the
background. The values 125 and greater are defined as
positive and acceptable. The colour contrast is defined as a
physical value of the colour, the difference between colours
in a defined colour space. According to the W3C guidelines,
the difference between two colours should be 500 or more.
[3][12]
4 RESEARCH METHODOLOGY
The purpose of this study was to examine the influence
of different foreground and background colour
combinations on the screen reading experience. At the
beginning of the research, it was necessary to define the
textual sample, typeface, and colour combinations. 100
students from the University North, the Multimedia, Design
and Application Department were tested.
4.1 Sample definition
According to Brangan’s research of readability
formulas, for the purpose of this experiment, a textual
sample of a difficult (LIX=46; bordering medium) reading
difficulty was used. The text reading difficulty was
measured by using the LIX formula (1) adjusted for the
Croatian language:
𝐿𝐼𝑋 = 𝐴 𝐵
⁄+ (𝐶 × 100) 𝐴
⁄+ 2 (1)
where A is the number of words, B is the number of
sentences and C represents the number of long words (eight
or more characters). According to the LIX formula, the text
reading difficulty is measured by the following scale: <24
very easy, 25-34 easy, 35-44 medium, 45-54 difficult, >55
very difficult. [14]
Sheedy et al. have been researching the typeface
influence on the legibility of textual characters and words
on a digital screen, and according to that research, Arial and
Verdana are the most legible, and Times New Roman and
Franklin the least [15]. For this reason, the typeface used for
the sample in this research is a sans serif typeface Verdana,
font size 27 pt, arranged in one column.
Fig. 2 shows the sample used in this research. The
sample is copied from the "Grafički dizajn i komunikacija"
book by the authors Tomiša and Milković, and it is a
segment from the chapter about colour spaces. [16]
Figure 2 Textual sample used in this research

Anja ZORKO et al.: THE IMPACT OF THE TEXT AND BACKGROUND COLOR ON THE SCREEN READING EXPERIENCE
80 TECHNICAL JOURNAL 11, 3(2017), 78-82
For research purposes, two best and two worst colour
combinations were chosen, as defined by the previously
mentioned research (Fig. 1). A black text on a white
background and a black text on a yellow background were
chosen as the best colour combinations, and a green text on
an orange background and a red text on a green background
as the worst. For the fifth test group, a black text on a cream
background was chosen because that is the colour
combination that imitates the colours of printed books.
[3][1][17]
Since those colours have generally been defined in the
CMYK colour space (research was done for printed
materials), for the needs of this research, precise colour
tones have been selected from the web safe colour palette.
The web safe colour palette defines colours which should be
used for web designated materials. The usage of safe
colours should ensure that the same colour looks identical
on most digital devices independent of the device
characteristics and applications that are used. [1]
The enclosed Tab. 1 shows an overview of the chosen
colours and their RGB and hexadecimal values.
Table 1 Overview of the chosen colour values
Colour
RGB colour code
Hexadecimal colour
code
Red
Green
Blue
white
255
255
255
FFFFFF
cream
255
255
204
FFFFCC
yellow
255
255
0
FFFF00
orange
255
153
0
FF9900
red
255
0
0
FF0000
green
0
128
0
008000
black
0
0
0
000000
Tab. 2 shows samples used in this research, as well as
the colour contrast, brightness contrast and tone difference
values. Values have been calculated with an application
available on the snook.ca1 website. The application uses the
WCAG 2.0 formula for contrast calculations. It is possible
to precisely define the wanted colours of the text and
background, and the application then calculates the contrast
values and verifies whether those values are acceptable
considering the W3C guidelines. [12]
Table 2 Samples and their colour contrast, brightness contrast and tone difference
values
Colour
of text
Colour of
backgroun
d
Sample
Colour
contrast
Brightness
contrast:
(>= 125)
Tone
difference:
(>= 500)
black
white
SAMPLE
21
255
765
black
cream
SAMPLE
20.43
249.18
714
black
yellow
SAMPLE
19.56
225.93
510
green
orange
SAMPLE
2.4
90.92
280
red
green
SAMPLE
1.28
1.11
383
After reading the sample, the reading habits on digital
screens and the subjective reading difficulty were tested by
using the prepared survey. The reading difficulty was
evaluated by using the Likert scale from 1 to 5, where 1
defined hard to read and 5 easy to read.
4.2 Devices used in research
The textual samples used for this research were shown
on a Samsung LCD screen, S22A350H model. The screen
size was 21.5 inches and the aspect ratio was 16:9. The
subject’s distance from the screen was in the range from 50
to 80 centimetres, which is the distance suggested as the
most favourable for longer viewing and reading on a digital
screen. The specified distance was optimal according to the
eye tracking device specifications and the monitor visual
angle which was 170°/160°. [18][19]
The subject reading measuring was accompanied by the
eye tracking technology which allows us to measure the
point of gaze and fixation points while watching the screen.
The device used was the Gazepoint GP3 Desktop eye
tracking device and the accompanying Gazepoint Analaysis
3.5.0 software.
5 RESULTS AND ANALYSIS OF THE RESEARCH
The empirical analysis of this research was based on the
results obtained from the measurement conducted among
the students of the University North, the undergraduate
interdisciplinary professional study of the "Multimedia,
Design and Application" Department. The descriptive and
inference statistic methods have been used in the data
analysis. Students have been analysed based on gender, age
and year of enrolment.
Of a total of 100 subjects, 52 were male and 48 female.
On the basis of age, subjects were separated into three age
groups. The first group included students younger than 21,
the second included students from the age 21 to 25 and the
third included students aged 26 and older. The first group
was more numerous than the other two (58% of the
examinees), while the third group consisted of only 7% of
examinees. A bit more than half of the interviewed students
were enrolled in first year (52%), while only two students
were enrolled in their third year of college.
Within the inferential statistic, the distribution of the
reading time data obtained by the research was examined.
The distribution of the reading time data, which was tested
with the Kolmogorov–Smirnov test, statistically
significantly differs from the normal distribution. Therefore,
for the testing of the statistically significant differences
between the samples, a nonparametric Kruskal–Wallis test
was used. In the cases of the statistically significant
differences between the samples, multiple comparisons test
was used to determine the statistically significantly different
samples. The differences confirmed at p<0.05 were
considered statistically significant. For the graphical
representation of the reading time data distribution, the Box
and Whisker Plots were used. The statistical analysis was
performed by using the Matlab 7.0 mathematical software.
In Tab. 3 the descriptive statistics of the text reading
time and the results of the Kruskal–Wallis test are shown.

Anja ZORKO et al.: THE IMPACT OF THE TEXT AND BACKGROUND COLOR ON THE SCREEN READING EXPERIENCE
TEHNIČKI GLASNIK 11, 3(2017), 78-82 81
Table 3 Descriptive statistics and results of the Kruskal-Wallis test
for the text reading time
GROUP
Mean (s)
Median (s)
Kruskal-Wallis test
H
p
G1
31.60
32
11.53
0.02
G2
29.35
28
G3
31.40
32
G4
29.55
29.50
G5
29.20
28
As shown in Tab. 3 and Fig. 3, the shortest average
reading time was determined for the group G5, 29.20
seconds. Group G1 had the longest average reading time of
31.60 seconds. The biggest mean value of 32 seconds was
identified for the groups G1 and G3, while the lowest mean
value was identified for the groups G2 and G5. From Tab. 3
it can be seen that there is a statistically significant
difference in times of reading (p=0.02). By using the
multiple comparisons test, it has been confirmed that the
groups G1 and G5 are statistically significantly different.
Figure 3 Time taken to read the text sample
The ratio of the number of mistakes was tested for all
five groups. From a total of 100 students that were included
in the research, 43 of them read the textual sample without a
mistake. Group G4 had the largest percentage of students
that read the sample without a mistake (55%). That
percentage was just slightly lower in group 1, where 50% of
the students read the text without a mistake. Group G3 was
the group where the least number of students read the text
without a mistake, only 30%. In 37% of the readings, there
was one mistake, two mistakes in 33%, three mistakes in
12%, four in 11% and five mistakes occurred in 7% of the
readings. Group G3 had the largest number of students that
made one mistake during the reading (six students), and in
group G4 only two students made one mistake.
Tab. 4 shows the results of the tests, the longest,
shortest and average time of reading, as well as the total
number of mistakes for every group of examinees. From the
results shown, it can be concluded that the combination of
the black text on a white background is the most readable
combination of colours. The mentioned colour combination
was shown to the group G1 and that group also had the least
number of total mistakes.
The sample shown to the group G3 (a black text on a
yellow background) stands out as the worst colour
combination for text readability. Group G3 had the largest
mean value of reading time (Tab. 3) and the biggest total
number of mistakes (Tab. 4). Fig. 4 also shows the
deviation in the heat map of the group 4 in relation to the
other four.
Groups G4 and G5, which had combinations of colour
defined as the worst for readability, produced unexpected
results. [17] The total number of mistakes in the mentioned
groups was lower (Table 4) than the total number of
mistakes for the groups G2 and G3 which had the best
colour combinations. Group G5 also had the shortest
average time of reading.
Table 4 Results of measurement, times of reading and a total number of mistakes
G1
black text
white
background
G2
black text
cream
background
G3
black text
yellow
background
G4
green text
orange
background
G5
red text
green
background
longest time
of reading (s)
38
33
38
35
37
shortest time
of reading (s)
24
26
26
23
25
average time
of reading (s)
31.5
29.6
31.2
29.6
29.2
total number
of mistakes
18
28
31
23
24
Since measurements were recorded by an eye tracking
camera, the results of the research are also visible with the
help of heat maps that show the points of interest for the
subjects. The areas at which the subjects looked the most
are coloured in warm colours and the least viewed areas are
coloured in blue.
As it is visible from the examples in Fig. 4, heat maps
of all five samples were similar, only the group G3 showed
some deviation. The sample 3 had a black text on a yellow
background. The results of the measurements show that the
group G3 also had the most number of total mistakes. It can
be assumed that the above mentioned colour combination is
the most tiring and there is no tendency of fixation as there
is on the other four maps.
example 1 example 2
example 3
example 4 example 5
Figure 4 Overview of heat maps

Anja ZORKO et al.: THE IMPACT OF THE TEXT AND BACKGROUND COLOR ON THE SCREEN READING EXPERIENCE
82 TECHNICAL JOURNAL 11, 3(2017), 78-82
6 CONCLUSION
According to previous research about the influence of
colour on the readability of printed materials, it was
confirmed that the combination of a black text and white
background is one of the most readable and a combination
of a red text on a green background is the least readable
[17].
The purpose of this research was to determine the
foreground and background colour influence on the
readability on a digital screen. The results obtained in this
research are similar to those obtained for the readability on
printed materials. A black text on a white background came
out as the most readable colour combination. The group that
read above the mentioned sample had the least total number
of mistakes, although the average time of reading was the
longest, 31.5 seconds. That does not mean that the
mentioned combination is not a good colour combination
because the average time of reading for all groups was
between 29.2 and 31.5 seconds. In a survey that was carried
out just after testing, the respondents also declared that the
black foreground-white background colour combination is
the least stressful for the eyes.
A black text on a yellow foreground has proven to be
the least readable colour combination. The results of these
colour combination readings have the biggest total number
of mistakes and the least percent of students (30%) read this
sample without mistakes.
Unsuspected results were obtained for the fourth and
fifth sample, a green text on an orange background and a
red text on a green background. Even though on printed
materials those combinations have proven to be the least
readable, this research shows they are good for reading on a
digital screen. It is interesting that the total number of
mistakes was lower for those samples than for the second
and third (black-cream, black-yellow) samples. It can be
assumed that it is due to the fact that those samples had a
lower colour contrast which can be seen in Tab. 2.
Given the fact that this is only the start of a possibly
large field of research, a recommendation for future
experiments would be to increase the amount of colour
combinations and the number of respondents tested in order
to determine if there is (and what it would be) any specific
effect causing the differences between the same
combinations of colours in the different media (screen and
print).
Note: This research was presented at the International
Conference MATRIB 2017 (29 June - 2 July 2017, Vela
Luka, Croatia).
7 REFERENCES
[1] Žufić, J.; Kalpić, D.: Boja i efikasnije e-poučavanje,
Metodički obzori: časopis za odgojno-obrazovnu
teoriju i praksu, Vol. 4 (2009)1-2 No. 7-8 (2009) 57-72
[2] Kodner, J.; Nonaka, A.; Wilson, J.; Brajnard, D.;
Ungar, L.: Determining the Readability of Colored
Text, Univ. of Pennsylvania Philadelphia
[3] Tinker, M. A.: Experimental Studies on the Legibility
of Print: An Annotated Bibliography, Reading
Research Quarterly, Vol. 1, No. 4 (1966) 67-118
[4] Čerepinko, D.: Optimizacija grafičkih parametara
korisničkoga sučelja za 'tablet novine', Doktorska
disertacija, Grafički fakultet Sveučilišta u Zagrebu,
2014.
[5] Dillon, A.: Reading from paper versus screens: a
critical review of the empirical literature, Ergonomics,
Vol. 35, No. 10 (1992) 1297-1326
[6] Just, M. A.; Carpenter, P. A.: A theory of reading:
From eye fixations to comprehension, Psychological
Review, Vol. 87, No. 4 (1980) 329-355
[7] Furlan, I.: Čitanje u svjetlosti teorije informacije,
Pedagogija, Vol. 4 (1963) 596-612
[8] Rabinowitz, T.: Exploring Typography, Clifton Park,
NY: Thomson/Delmar Learning, 2006
[9] Legge, G.: Psychophysics of Reading, Mahwah, NJ:
Lawrence Erlbaum Associates, 2006
[10] Čerepinko, D.; Keček, D.; Periša, M.: Text Readability
and Legibility on iPad with comparison to Paper and
Computer Screen, Tehnički vjesnik Vol. 24, No. 4
(2017) 1197-1201
[11] https://www.w3.org/ (Accessed: 4.04.2017)
[12] https://www.w3.org/TR/WCAG/#visual-audio-contrast
(Accessed: 4.04.2017)
[13] York, J.: Legibility and Large-Scale Digitization, Hathi
Trust Digital Library, 2008.
[14] Brangan, S.: Razvoj formula čitkosti za zdravstvenu
komunikaciju na hrvatskom jeziku, doktorska
disertacija, Zagreb, Medicinski fakultet Sveučilišta u
Zagrebu, 2011
[15] Sheedy, J. E.; Subbaram, M. V.; Zimmerman, A. B.;
Hayes, J. R.: Text legibility and the letter superiority
effect, Human Factors: The Journal of the Human
Factors and Ergonomics Society, Vol. 47, No. 4 (2005)
797-815
[16] Tomiša, M.; Milković, M.: Grafički dizajn i
komunikacija, Veleučilište u Varaždinu, 2013., ISBN
978-953-7809-19-5
[17] Zjakić, I.; Milković, M.: Psihologija boja, Veleučilište
u Varaždinu, 2010., ISBN 978-953-95000-1-4
[18] http://www.samsung.com/us/computer/monitors/LS22
A350HS/ZA-specs (Accessed: 27 April 2017.)
[19] http://narodnenovine.nn.hr/clanci/sluzbeni/2005_
06_69_1354.html (Accessed: 6 April 2017.)
Authors’ contacts:
Anja ZORKO, Teaching Assistant
Snježana IVANČIĆ VALENKO, Lecturer
Mario TOMIŠA, Ph.D, Associate Professor
Damira KEČEK, Senior Lecturer
Darijo ČEREPINKO, Ph.D, Assistant Professor
University North,
104. brigade 3, 42000 Varaždin, Croatia
anja.zorko@unin.hr,
snjezana.ivancic@unin.hr,
mario.tomisa@unin.hr
damira.kecek@unin.hr
darijo.cerepinko@unin.hr