effect of font and background color combination on …rx...font/background color combination is an...

39
EFFECT OF FONT AND BACKGROUND COLOR COMBINATION ON THE RECOGNITION EFFICIENCY FOR LCD DISPLAYS A Thesis Presented By Zeliang Cheng to The Department of Mechanical and Industrial Engineering in partial fulfillment of the requirements for the degree of Master of Science in the field of Industrial Engineering Northeastern University Boston, Massachusetts May 2015

Upload: others

Post on 31-May-2020

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

EFFECT OF FONT AND BACKGROUND COLOR COMBINATION ON THE

RECOGNITION EFFICIENCY FOR LCD DISPLAYS

A Thesis Presented

By

Zeliang Cheng

to

The Department of Mechanical and Industrial Engineering

in partial fulfillment of the requirements

for the degree of

Master of Science

in the field of

Industrial Engineering

Northeastern University

Boston, Massachusetts

May 2015

Page 2: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

ii

Table of contents:

1. Introductions ............................................................................................................ 1

1.1 General backgrounds ........................................................................................ 1

1.2 The influence of colors on the RE .................................................................... 3

1.3 Literature reviews ............................................................................................. 4

1.4 Study goals ........................................................................................................ 7

2. Methods ..................................................................................................................... 8

2.1 The Primary Color Difference .......................................................................... 8

2.2 Study hypotheses .............................................................................................. 9

2.3 Measurement of the RE .................................................................................... 9

3. Data Collection and Experimental Design ........................................................... 11

3.1 Participant ....................................................................................................... 11

3.2 Testing Program .............................................................................................. 11

3.3 Testing Procedures .......................................................................................... 13

3.4 Experiment setup and protocols ...................................................................... 16

3.5 Experimental design........................................................................................ 17

4. Data Analysis .......................................................................................................... 20

4.1 Main factors .................................................................................................... 20

4.2 Interaction between factors ............................................................................. 21

4.3 Response Surface Methodology ..................................................................... 23

5. Conclusions and Discussions ................................................................................. 24

References: .................................................................................................................. 28

Page 3: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

iii

Acknowledgements:

Without the generous advices and helps offered by my academic advisor

Professor Yingzi Lin, this graduate thesis could not be completed so smoothly. I

hereby express the deepest appreciation for Professor Lin’s time and efforts. I also

want to extend my appreciation to my classmate Vahab Vahdatzad, who contributed

his time and wisdom to the experiment design and the data analysis parts of this thesis

and whose name will be appeared as the second author of this thesis if this thesis be

published on other journals.

Page 4: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

iv

Abstract:

User interface (UI) is an important media that connects us with other physical

systems. With the popularization of computers, the Liquid Crystal Displays (LCDs) as

a main type of information output terminal for computers have become one of the

main types of UI. With a general goal of improving the recognition efficiency (RE) of

LCDs and reducing human observers’ information reading errors, this paper studies

the effect of font/background colors on the RE of texts being presented on LCD.

In this study, a new concept of the Primary Color Difference (PCD) was put

forward to define the font/background color difference, which enables us to study the

relationship between the RE and the font/background colors in a more efficient way.

Results shown that the PCD has a significant effect on the RE of text being presented

on the LCDs. Besides, certain PCD values give the texts a better RE than other PCD

values do. Furthermore, font/background color combinations that share similar PCD

values may also share certain color properties which result in the similar RE for the

text being presented on the LCDs.

Key words: User Interface, Recognition Efficiency, Font/Background Colors,

Primary Color Difference.

Page 5: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

1

1. Introductions

1.1 General backgrounds

User interface (UI) is an important media that connects human with other

physical systems [Zhang et al., 2007]. Nowadays, with a trend that computers have

being widely used as a control and monitoring terminal in many industries, human-

computer interface (HCI) has become a main type of UI. Typical HCIs include Liquid

Crystal Displays (LCDs), Light Emitting Diode (LED) displays, indicator lights and

even speakers, among which electronic displays such as the LCDs are the most

common ones [Humar et al., 2008]. As an example, in the current healthcare institutes

the media for information flow is now transitioning from paper-based to computer-

based [Beuscart-Zéphir et al., 2010], which results in a growing number of

information being presented on LCDs. In this case, a proper design of the way

information being displayed on LCDs could decrease the human errors of information

reading and hence prevent fatal errors [Lawler et al., 2011]. With a general goal of

improving the human-computer interaction efficiency, this paper aims to improve the

visual performance of LCDs, one of the most common HCIs, by studying the way

texts being presented on them.

One important indication of visual performance of certain text presented on LCDs

is its Recognition Efficiency (RE) [Dyson, 2004]. The RE is further related to the

text’s readability or legibility. Readability is the reader’s ability to recognize the form

Page 6: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

2

of a word or a group of words for contextual purposes [ANSI/HFS 100-1988], while

the legibility is the reader’s ability to recognize the form of single word without

contextual purposes. In a common sense, the more legible words or texts are being

presented, the higher their RE is. In this paper however, we examine only on the non-

meaningful and randomly composed three-letter word stimuli in order to eliminate the

learning effect. A higher RE means the word stimulus is more legible. More detail

about the stimuli studied in this paper will be explained later.

The texts’ RE has been confirmed to be influenced by factors such as their

luminance, font size, font style and text layout by previous researches. For example,

luminance was found to have major effects on the RE [Bruce and Foster, 1982; Small,

1982; Legge and Rubin, 1986]. Researchers such as Lin (2005) not only found that

the combination of luminance and contrast ratio had a significant effect on RE, but

also pointed out the two factors might have some correlations that merit further study.

The font type is another factor that may influence the RE, and for different types of

languages the influences may be different. Researchers studied on English characters

[Ling et al., 2006; Huang et al., 2009; Shen et al., 2009] found that there was no

significant effect of commonly used font types on RE while researches on Chinese

characters [Cai et al., 2001; Lai et al., 2010; Yau et al., 2009] indicated that significant

effect was found between these two factors. Furthermore, the combination of font size

and font type may also influence the RE [Ramadan, 2011].

Page 7: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

3

Besides of these factors, color is another important factor affecting the RE.

Yussof et al. (2012) drew a conclusion that the background color gives affection to RE

of texts on e-books. This conclusion was also supported by Bonnardel et al. (2011)’s

research on the website design. Some researchers also pointed out that inappropriate

use of color could result in poor performance and a higher incidence of visual

discomfort [Murch, 1985; Matthews and Mertings, 1987].

1.2 The influence of colors on the RE

Before looking further into the effect of colors on the RE, we should define colors

first. A useful way to define colors is using the widely accepted concept of “primary

color”, which define any observable color by the combination of the three primary

colors. Considering the difference between the physical properties for reflector

materials (such as papers) and luminophor materials (such as LCDs we examined in

this paper), the primary color’s definition is different on this two materials. For colors

on reflectors, the three main colors are “Red, Yellow and Green” while for colors on

luminophor the three main colors are “Red, Green and Blue”, or RGB. Because our

target is LCD, a typical kind of luminophor, we use RGB as our color definition scale

plate.

For any color shown on LCDs, its RGB has 256 different values (indicated by

consecutive integers from 0 to 255). So colors on LCDs can be defined by its three

Page 8: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

4

RGB values, respectively. For instance, the pure black can be defined as Red=0,

Green=0, Blue=0 or (RGB=0, 0, 0); the pure white can be defined as Red=255,

Green=255, Blue=255 or (RGB=255, 255, 255). The black and the white are two

extreme cases of colors. Other colors’ RGB values fall between 0 and 255. For

example, the sky blue can be defined as (RGB=0, 155, 255).

If we could make a general rank about the virtual performance of

font/background color combinations in terms of their RE, our goal to compare the RE

under different font/color combinations would be realized. In other word, we should

get a complete ranking of the RE for all the possible color combinations. However, as

we could imagine, the number of colors defined by RGB could be more than 16

million (256×256×256), let along the combination between any two of them (more

than 200 trillion combinations). Thus we must find a more efficient way to realize the

goal rather than enumerate all the possibilities.

Previous studies on the effect of font/background color combinations on the RE

simply hand pick several typical color combinations to determine which combination

is better than the others, which lacks generality.

1.3 Literature reviews

The first known research focused on the reflector media to rank texts’ RE

Page 9: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

5

according to their font/background color combinations was conducted in 1912 by Le

Courier [Le Courrier du Livre, 1912]. He performed an experiment in which letters

were printed on paper posters under different font/background color combinations.

Each poster contained two rows of letters. All posters were exposed to sunlight and

participants were asked to rank the legibility of the letters. The ranking of 13

font/background color combinations was then listed in a table, which was known as

Le Courier legibility table as shown in table 1.1. The higher the legibility was ranked,

the better texts’ RE would be. Later on between 1928 and 1963, Tinker and Paterson

carried out a similar research of legibility and readability on reflector [Tinker and

Paterson, 1929]. They studied the legibility of text under 10 font/background color

combinations and gave another ranking. As we can see, their ranking is differed from

the ranking in the Le Courier table. But this discrepancy is not typical. Even today,

researchers can hardly come to an agreement about which color combination is

statistically better than others under different experimental conditions.

Table 1.1: Le Courier’s legibility table

Ranking 1 2 3 4 5 6 7 8 9 10 11 12 13

Font Color BK G R B W BK Y W W W R G R

Background Color Y W W W B W BK R G BK Y R G

Note: “R” is Red, “G” is Green, “B” is Blue, “BK” is Black, “W” is White and “Y” is

Yellow.

Page 10: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

6

Another limitation of previous studies is that because luminophor’s physical

properties are different from those for reflectors, conclusions from previous studies

can hardly be directly extended into the context of luminophor such as LCDs. For

instance, some researchers reported that the visual performance was slower with

electronic display than with paper material [Gould et al., 1987; Dillon, 1992]. Also,

they pointed out that electronic displays might lead to visual fatigue and strain more

quickly and frequently. In 2008, Humar et al. performed an experiment similar to Le

Courier’s but on electronic screens rather than on paper posters. The purpose of their

study was to examine the visual performance of webpages [Humar et al., 2008]. They

examined a number of font/background color combinations, and changes in the

ranking of the same color combination can be observed accordingly, as listed in table

1.2. Although earlier researchers failed to identify specific color combination that

performs a better readability on electronic displays, they revealed that the

font/background color combination is an important factor that affects RE [Radl, 1980;

Pace, 1984].

Table 1.2: Comparison of Humar’s and Le Courier’s legibility table

Font Color BK G R B W BK Y W W W R G R

Background Color Y W W W B W BK R G BK Y R G

New Ranking 7 5 1 10 6 4 11 8 3 13 2 9 12

Old Ranking 1 2 3 4 5 6 7 8 9 10 11 12 13

Note: “New Ranking” is Humar’s ranking; “Old Ranking” is Le Courier’s ranking.

Page 11: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

7

Finally, the methods used by previous researchers were also different from one

another. We can classify these methods into three main categories with regard to how

to measure the participant’s visual performance [Humar et al., 2008]. The first method

is called visual search tasks [Small, 1982; Pace, 1984; Pearson and Schaik, 2003].

One typical application of this method is that participants had to either identify

misspelled words or find special words from non-meaningful paragraphs. The second

method is to measure the recognition time for certain stimuli (characters, words or

sentences) [Bruce and Foster, 1982; Pastoor, 1990; Wu and Yuan, 2003; Ramadan,

2011]. The third method is to measure participant’s accuracy in words recognition

tasks. The stimuli were shown to the participants either for a very short time or in a

relatively small font size and the participants were either asked to identify them or

write them down as many as possible during the task [Travis et al., 1990; Schieh et

al., 1997; Schieh and Lin, 2000; Wang and Chen, 2003]. In this study however, we

adopt the second method in measuring the recognition time for each stimuli, which

will be elaborate in the following parts.

1.4 Study goals

Our general goal is to find a more efficient way to examine the effect of the

font/background color combinations on the RE and to tell from statistical perspective

which color combination is better than the other.

Page 12: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

8

2. Methods

2.1 The Primary Color Difference

As we mentioned above, colors on luminophor materials can be defined by the

three primary colors of RGB with each ranging from integer value 0 to 255. Given

any two colors, we could further define their Primary Color Difference (PCD) as the

absolute difference between each of their three primary colors respectively: namely

the ΔRed (ΔR), the ΔGreen (ΔG) and the ΔBlue (ΔB) (Δ represent absolute

difference). The value of the ΔR, the ΔG or the ΔB for any two given colors will fall

between 0 and 255.

As a result, we could adopt the concept of the PCD to define the font/background

color difference. For example, the orange color font (RGB=255, 100, 0) on pure white

background (RGB=255, 255, 255) can be defined as ΔR=0 (255–255), ΔG=155 (|100–

255|) and ΔB=255 (|0–255|), or (ΔRGB=0, 155, 255). But the reverse is not

necessarily true. A PCD of (ΔRGB=0, 155, 255) could represent the color

combination of any pair of colors with the same primary color difference. For

instance, the PCD of the sky blue font (RGB=0, 155, 255) on pure black background

(RGB=0, 0, 0) is also (ΔRGB=0, 155, 255).

Page 13: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

9

2.2 Study hypotheses

In this paper, we study the font/background color by focusing only on their PCD

values regardless of what color combination it may represent for. One of our

hypotheses is that although certain PCD value can stand for many font/background

color combinations, these combinations that share a same PCD value may have

certain color properties in common and results in the similar RE. If this hypothesis is

proved true, we could realize one of our goals to find a more efficient method to study

colors rather than enumeration.

As we could tell from previous studies, text’s visual performance, or the RE,

under different font/background color combinations is different from one to another.

For instance, pure black text on pure white background is easier to read for majority

of people than yellow text on white background [Xue-min Zhang et al., 2007]. Thus,

another hypothesis is that there must be some relationship between the PCD value and

the RE.

2.3 Measurement of the RE

We designed an experiment to measure participants’ RE to certain text under

different font/background color combinations (see experiment design part for more

details). Participants were requested to respond to the font stimuli shown on the

screen as fast as they can. Similar to previous studies, we define the RE by

Page 14: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

10

participants’ average Response Time (RT) to the target stimuli.

There are some discussions about how to interpret RE using RT. For example,

because RE itself is a “subjective” concept, it is hardly to establish one-to-one

correspondence between each REs and their RTs. Different people have different

observations. One possible reason for this diversity is that our ability to mentally

processing the environmental stimulus is different from one to another. Furthermore,

the attitude of different individuals towards the outside of the world is also different

and no evidence show that such a bias has not effect on their RE. For example,

individuals who show a greater preference to green color may have a quicker response

to greens. To better address this problem, we use random sampling in selecting the

participants in terms of their gender, ethnics and backgrounds.

Moreover, people’s RE for certain stimulus may change with time and their living

environment. One possible explanation is that people’s mental and physical status will

change with time. Besides of these subjective factors, environmental factors such as

light, temperature and noise may also have significant effect on people’s RE to certain

stimuli. So we fixed all environmental factors for all participants to achieve results

focused on font/background color effects on RE and RT.

Another major problems we faced was how to measuring RT accurately. The

average RT in our experiment was <1s for the given stimuli. Besides, it was hard to

Page 15: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

11

tell exactly when or whether a participant recognizes the stimulus. Recognition as a

mental process is hard to be observed with a “threshold” of appear and gone. Even the

participant his/herself cannot tell exactly when he/she distinguish or recognize the

stimulus.

In order to solve these problems, we wrote a computer program to assist the

experiment in order to record RT with high accuracy and stability. Another reason to

use computer program was that it enables us to control variables easily. More details

about the program will be explained in part 3.2.

3. Data Collection and Experimental Design

3.1 Participant

We sent invitations randomly to Northeastern University students and we

randomly selected 11 qualified invitees to participate in the experiment. All

participants are current student (Average age=25, 6 Male, 5 Female). All participants

are with normal vision or corrected to normal vision.

3.2 Testing Program

In order to record subjects’ RT to certain stimuli accurately, a computer program

Page 16: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

12

is written in Microsoft Visual Studio C# platform. A structural procedure to measure

RT is introduced. Factorial design experiment platform is used to perform

experiments using proposed testing application.

The program enable us to control variable by changing the text's font/background

color regarding to its RGB values. A graphical user interface is designed to help

participants understand how experiments work. Figure 3.1 shows the interface of the

program.

Nine (9) stimuli each consist of three randomly selected letters are mapped to a

numeric keypad as the target text. ATS is mapped to 1, OTR to 2, OPS to 3 and so

forth, as shown in Figure 3.1. During the experiment, these stimuli will randomly and

individually being presented to participants in certain font/background colors. To

minimize the learning effect of participants predict the stimulus without read it

completely, these nine stimuli share some similar characters such as same starting or

ending character.

The testing program was also tested to verify its user friendliness. A systematic

approach to collect the data (in terms of RT) was approved, which will be elaborated

in the following section.

Page 17: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

13

Figure 3.1

3.3 Testing Procedures

We assigned one font/background color combination for each run of the test. The

program will run to show participants the nine stimuli under the assigned

font/background color combination and collect the participants RT to these stimuli.

We replicated the testing procedure several times to achieve more accurate data.

The testing process is shown in Figure 3.2 below as an example of

font/background color combination as green/black. First, a crosshair cue appears in

the center of the screen for 200 milliseconds to indicate the position that stimulus will

appear. Then, a randomly selected stimulus of green appears at the same position 200

milliseconds after the crosshair hide. In each experiment, a participant will be asked

Page 18: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

14

to press the space button on the keyboard as soon as recognizing the stimuli. Once the

participant pressed the space button, the stimulus text disappears, living only the

background. The time interval from the stimulus appear on display to the participant

press space button, is recorded as the response time (RT). After the participant pressed

the space button, the program waits until participant enter the stimulus mapped

number to check recognition correctness. For example, if the participant recognized

the “RAP” stimulus, he/she should press the mapped number button “1” in the

keyboard; if the participant recognized the “ROT”, he/she should press the number

button “2”, and so forth. The testing procedure will be repeated until enough data

being collected regardless the confirmation typing is correct or not. However, if the

participants' incorrectness rate exceed 5%, the data collected in this run will be

discarded. Stimulus words combinations were selected in a way that participants could

not easily guess the stimulus word unless he or she recognizes all its three letters. For

instance, two of the nine stimuli start with letter “R”, two of them start with letter “S”;

two of the nine stimuli end with letter “P”, two of them end with letter “T”, and so

forth.

Page 19: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

15

Figure 3.2

Initialize

Show only the

background for 1000ms

Show crosshair on the

background for 200ms

Show only background

again for 200ms

Show the font stimulus

and begin timing

Stimulus disappear when

the subject pressed the

Space buttom. Stop timing

Test finished?

Test finished

YES

NOAPR

Page 20: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

16

3.4 Experiment setup and protocols

Prior to performing any experimental design, careful considerations of factors

that might affect test results are inevitable [Ader, Mellenberg & Hand, 2008].

Environmental conditions, experiment conditions and instruments are examples of

conditions and factors that should be controlled. Some of these factors might as well

have impacts on the test’s legibility, they are not fitted into our research scope and can

be considered in further researches.

Environmental factors such as light intensity and audible noise were fixed during

the experiments by controlling the laboratory conditions. The experiment instruments,

screen size, screen type, screen resolution, computer hardware specifications,

keyboard type, chair type and height, and table height were same for all participants.

In terms of selecting LCD displays’ type and specifications, most prevalent

displays’ settings were considered. LCD displays with 1920×1080 resolution and

screen refresh rate of 60Hz, diagonal viewing Size of 24 inches with preset display

area (H×V): 20.9×11.7 square inches were used during the experiments.

We controlled laboratory conditions such as distance of participants to the

display, display’s angle, position of display and keyboard. In order to control variables

of the relative position between subjects and the display, all participants were required

to sit straight comfortably on an adjustable rotary chair in front of the display. The

Page 21: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

17

subjects were also required to adjust the display and the chair properly that make sure

their sight lines are as perpendicular to the center of the display plane as possible. The

ergonomic designs suggest 50 to 70 centimeters distance between eyes and screen and

10 to 20 centimeters lower than user eyesight. Participants were asked to familiar with

the testing software and the testing procedure before the test.

3.5 Experimental design

The study was designed as full factorial design. As shown in figure 3.3. The first

factor was “background color” with 2 values that were white (RGB=255, 255, 255)

and black (RGB=0, 0, 0). The second factor was “font color” with 9 values defined by

the primary color difference (PCD) that are: three ∆Rs (∆R=250, ∆R=180, ∆R=110);

three ∆Gs (∆G=250, ∆G=180, ∆G=110); and three ∆Bs (∆B=250, ∆B=180, ∆B=110).

For each combination of background and font color, the test was repeated 10 times.

That means each participants were asked to perform all 18 experiments (2×9) with 10

replications each (18×10=180 experiments in total), which last about 35 minutes.

Number of participant that completed the tests were 11 and the overall number of tests

was 1980 (2×9×10×11).

Page 22: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

18

Figure 3.3

∆B=180

∆B=250

∆G=110

∆G=180

∆G=250∆R=110

∆R=180

∆R=250

∆B=110

White

Black

2

1

Font color

9

8

7 6

5

4

3

2

1

Font color

Full factorial

experimental design

According to Fisher et al., any experiments conducted under statistical Design of

Experiments (DoE) framework have to follow three principals (i.e. randomization,

replication, blocking) in order to achieve a reasonable and valid finding [R. A. Fisher,

1935; D. C. Montgomery, 2008]. We also applied these techniques in our design.

Randomization is the process of assigning individuals randomly to one or group

Page 23: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

19

of experiments. In our experiments the order of allocating font/background color was

randomized. A proper randomization approach helps “averaging-out” impacts of

extraneous factors that might present. Replication decrease impacts of variability by

repeating each factor combination independently. It also helps obtaining an

approximation of experimental error. For this reason, for the same font/background

color the test was repeated 10 times although the actual text stimuli were different

during the replication process. Finally, blocking is a design technique that arranges

experimental units into a group to improve comparison precision and eliminate known

variation. We used blocking to group results by participants. Some participants had

faster reactions than others. By grouping each participant, a set of relatively

homogenous experimental conditions were compared.

Page 24: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

20

4. Data Analysis

For analyzing the data, Factorial Analyses of Variances (ANOVA) were

conducted to compare mean response time to each combination of font/background

color. All analysis was performed with Minitab 15. ANOVA results revealed that not

only the main factors (i.e. font and background color) have significant effects on

text’s legibility, interactions between factors do too.

4.1 Main factors

Font/background colors as main factors were compared by ANOVA. There was a

significant difference between two background colors (ANOVA, F= 911.55, p = 0.00)

as well as between different font colors (ANOVA, F= 3385.06, p = 0.00).

In addition to these factors, ∆ values were compared. Through grouping font

colors by their ∆ values (i.e. ∆=250, ∆=180, ∆=110) rather than ∆Rs, ∆Gs, and ∆Bs

we were able to further express impacts of ∆ values on the legibility. There was a

significant difference between ∆ values (ANOVA, F= 263.50, p = 0.00), though F-

value was comparatively lower. In this case, the R-Sq value was high enough (R-Sq =

83.28%) to assure the data was fitted well to ANOVA statistical model.

Figure 4.1 depicts mean response time for each factor. Green had least response

time followed by red and blue. Also response time to black background color was less

than white.

Page 25: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

21

Figure 4.1

4.2 Interaction between factors

If interactions between factors exist, differences in response value (i.e. RT)

among levels of different factor might not be the same [D. C. Montgomery, 1935; R.

A. Fisher, 2008]. In other words, interaction is the failure of one factor to generate

same impacts on the response value at different levels of another factor.

Page 26: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

22

Hence, we analyzed all possible interactions of factors to interpret significant

changes in response time. Figure 4.2 illustrates all possible interactions. The

interaction plot between background and font color is shown in the top right. As we

can see, there was a significant interaction effect between the two main factors. For

other colors (i.e. red and blue) interaction between factors led to different response

time when levels of one factor changed. The interactions between ∆ values and font

colors are shown in middle right. In all delta values, green font color had least

response time following by red and blue respectively. ∆ values and font colors had not

significant interaction and the previous trend were remained unchanged. Also, there

was not a significant interaction between background color and ∆ values on response

time as shown in middle top of the figure.

Figure 4.2

900

600

300

RGB

250180110

900

600

300

WB

900

600

300

BG color

Delta

Font color

B

W

BG color

110

180

250

Delta

B

G

R

color

Font

Interaction Plot for Response timeData Means

Page 27: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

23

4.3 Response Surface Methodology

Response Surface Methodology (RSM) provides deeper explorations among

associated control variables to one or more response of interest. In general, RSM

includes of group of statistical and mathematical techniques used in building an

unknown functional relationship between response variables and a number of input

variables. Fitting response curve to the levels of a quantitative factor can be beneficial

to interpret that relationship, predict response value with different combinations of

design factors, and determine the optimum setting of variables to minimize (or

maximize) response value.

Figure 4.3 shows how changing font colors and ∆ values concurrently, might

affect response time. The best response time area achieved by ∆ values within 220 to

250 intervals. This is a good expansion of our results since ∆ values as well as font

colors can be inferred as continues variables. Note that minimum response time

achieved when font color is between green and red.

Page 28: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

24

Figure 4.3

5. Conclusions and Discussions

In this study, we examined the effect of font/background color combination on

the Recognition Efficiency (RE) via a new concept of Primary Color Difference

(PCD) between the two colors. We conducted the experiment with a Design of

Experiment of 2×9 levels: 2 background colors (White and Black), and 9 PCD values

between a given background color and the font colors (ΔR=250/180/110,

ΔG=250/180/110, ΔB=250/180/110).

Results reveal that the background/font color combination has a significant effect

on the RE. Generally speaking, black background performs better than the white

Font Colors

De

lta

3.02.52.01.51.0

240

220

200

180

160

140

120

BG colors 1

Hold Values

>

< 200

200 300

300 400

400 500

500 600

600 700

700

time

Response

Contour Plot of Response time vs Delta, Font Colors

Page 29: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

25

background in terms of the RE. Besides, when maximizing the ΔG value of the

font/background combination the RE could be greatly increased, maximizing the

same amount of ΔR shows relatively less of such an increase, while maximizing the

same amount of ΔB shows even some decrease in the RE. Thus the effect of PCD on

the RE can be shown as “ΔG>ΔR>ΔB”. Moreover, font/background color

combinations with a higher PCD value of either ΔG, ΔR or ΔB shows a better

performance of the RE compared with those color combinations with a less PCD

value. According to the ANOVA analysis, not only the font color, background color

and PCD values, but also the interactions between these factors have significant effect

on the Recognition Time (RT).

Some of these conclusions can be intuitively shown in figure 5.1 (in example text

“Hello”). In this example graph, each row indicates a certain PCD value (ΔR, ΔG and

ΔB of either Δ=250, 180 or 110). The left half of the graph is on black background

and the right half is on white background. According to our conclusions, the text

“Hello” on black background is generally more distinguishable than that on white.

Besides, in general, texts with its ΔG maximized are more distinguishable than those

with ΔR maximized or those with ΔB maximized. For each of the three PCD groups

in the graph, the texts on the first row are more distinguishable than the texts on the

following rows while the upper group (ΔG) shows a more clear of such trend

(ΔG>ΔR>ΔB). Font with the ΔG maximized with Δ=250 is most distinguishable

while font with the ΔB maximized with Δ=110 is least distinguishable. These

Page 30: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

26

subjective feelings accord with our statistical results.

One of the most important applications of our conclusions is that we could

maximizing certain text’s RE by adjusting only the text’s font color so that the ΔG or

ΔR values between the text’s font/background colors be maximized.

Figure 5.1

One inference from the conclusion is that the RE of the text on certain

background color can be maximized when increasing both the ΔG and the ΔR at the

same time. Further research should be done on this inferences though.

Page 31: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

27

One innovation of this study is that we put forward a new concept of PCD in

studying the virtual performance of the user interface. By considering the PCD

instead of the specific font/background colors, we greatly reduce the sample space of

all the possibilities to be examined. Most importantly, this study offers a realizable

way to maximizing the RE for any given color.

This study also has several limitations. First, all of the participants are students

between age of 19-28 and we only have 11 participants. We could involve more

participants with a broader range of ages in the further study. Besides, we examine the

value of ΔR, ΔG, and ΔB separately without considering the consequences that two or

three of the PCD values change together. Furthermore, due to the limited time, the

testing program may have some undiscovered flaws that could affect the accuracy of

the data collected. Finally, we only considered one of the color’s property (primary

colors) rather than all other physical properties such as the saturability.

Page 32: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

28

References:

Ader, Mellenberg & Hand (2008) “Advising on Research Methods: A consultant's

companion”.

An-Hsiang Wang, Chih-Chen Tseng, Shie-Chang Jeng, Effects of bending curvature

and text/background color combinations of e-paper on subjects’ visual performance and

subjective preferences under various ambient illuminance conditions, 2007

ScienceDirect, 161-166.

ANSI/HFS 100-1988, (1988) American National Standard for Human Factors

Engineering of Visual Display Terminal Workstations. The Human Factors Society, Inc.

Bruce, M., Foster, J.J., 1982. The visibility of colored characters on colored

backgrounds in view data displays. Visible Language 16 (4), 382–390.

Chien-Jung Lai, Effects of color scheme and message lines of variable message signs

on driver performance, Accident Analysis and Prevention 42 (2010) 1003-1008.

Chien-Jung Lai, Kuo-Duan Yen, Duan-Bing Wang, Effects of Chinese font style and

color on variable message sings, Proceeding of the Fourth International Driving

Symopsium on Human Factors in Drive Assessment, Training and Vehicle Design.

Chin-Chiuan Lin, Effects of screen luminance combination and text color on visual

performance with TFL-LCD, International Journal of Industrial Ergonomics 35 (2005)

229-235.

Page 33: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

29

Creswell, J.W. (2008). Educational research: Planning, conducting, and evaluating

quantitative and qualitative research (3rd). Upper Saddle River, NJ: Prentice Hall. 2008,

p. 300. ISBN 0-13-613550-1.

D.A.Norman, The Design of Everyday Things, Basic Books, New York, 2002.

D.C. Montgomery, Design and analysis of experiments: John Wiley & Sons, 2008.

Dengchuan Cai, Chia-Fen Chi, Manlai You, The legibility of Chinese characters in

three-type styles, International Journal of Industrial Ergonomics 27 (2001) 9-17.

Dillon, A., 1992. Reading from paper versus screen: a critical review of empirical

literature. Ergonomics 32, 1297–1326.

Ding-Long Huang et al., Effect of font size, display solution and task type on reading

Chinese fonts from mobile devices, International Journal of Industrial Ergonomics 39

(2009) 81-89.

Erin K. Lawler et al., Cognitive ergonomics, socio-technical systems, and the impact

of healthcare information technologies, International Journal of Industrial Ergonomics

41 (2011) 336-344.

Fisher, Ronald Aylmer, 1935,“The design of experiments.” The design of experiments.

Page 34: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

30

Gould, A.J.D., Alfaro, L., Barnes, V., Finn, R., Grischkowsky, N., Minuto, A., 1987.

Reading is slower from CRT displays than from paper: attempts to isolate a single-

variable explanation. Human Factors 29 (3), 269–299.

Graham B.Erickson et al., Readability of a computer-based system for measuring visual

performance skills, 2011 Optometry 82, 528-542.

Hani (2009). “Replication study”, retrieved 27 October 2011.

Humar et al., 2008. The impact of color combinations on the legibility of a Webpage

text presented on CRT displays. International Journal of Industrial Ergonomics, 38

(2008) 885–899.

I-Hsuan Shen et al., Lighting, font style, and polarity on visual performance and visual

fatigue with electronic paper displays, Displays 30 (2009) 53-58.

Jonathan Ling, Paul and Schaik, The influence of font type and line length on visual

search and information retrieval in web pages, Int. J. Human-Computer Studies 64

(2006) 395-404.

Le Courrier du Livre, 1912. Lisibilite des Affiches en Couleurs. Sheldons Limited

House, Cosmos, p.255.

Legge, G.E., Rubin, G.S., 1986. Psychophysics of reading: IV. Wavelength effects in

normal and low vision. Journal of the Optics Society of America, A (3), 40–51.

Page 35: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

31

Legge, G.E., Rubin, G.S., Luebker, A., 1987. Psychophysics of reading: V. The role of

contrast in normal vision. Vision Research 27 (7), 1165–1177.

Legge, G.E., Parish, D.H., Luebker, A., Wurm, L.H., 1990. Psychophysics of reading:

XI. Comparing color contrast and luminance contrast. Journal of Optical Society of

America A 7 (10), 2002–2010.

Mary C. Dyson, 2004. How physical text layout affects reading from screen. Behaviour

& Information Technology. Nov.-Dec. 2004, VOL. 23, NO. 6, 377–393.

Marie-Catherine Beuscart-Zéphira et al, 2010. Example of a Human Factors

Engineering approach to a medication administration work system: Potential impact on

patient safety. International Journal of Medical Informatics, 2010, 79, e43–e57.

Mohamed Zaki Ramadan, Evaluating college students’ performance of Arabic typeface

style, font size, page layout and foreground/ background color combinations of e-book

materials

Nathalie Bonnardel et al., The impact of color on Website appeal and user cognitive

processes, Displays 32 (2011) 69-80.

Pace, B.J., 1984. Color combinations and contrast reversals on visual display units. In:

Proceedings of the Human Factors Society 28th Annual Meeting. HFES, Santa Monica,

CA, pp. 326–330.

Page 36: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

32

Pastoor, S., 1990, Legibility and subjective preference for color combinations in text.

Human Factors 32 (2), 157–171.

Pearson, R., van Schaik, P., 2003, The effect of spatial layout of and link color in Web

pages on performance in a visual search task and an interactive search task.

International Journal on Human–Computer Studies 59, 327–353.

Radl, G.W., 1980, Experimental investigations for optimal presentation-mode and

colors of symbols on the CRT-screen. In: Grandjean, E., Vigliani, E. (Eds.), Ergonomic

Aspects of Visual Display Terminals. Taylor & Francis, London, UK, pp. 127–135.

Rahmah Lob Yussof et al., Affective engineering of background color in digital

storytelling for remedial students, Social and Behavioral Sciences 68 (2012) 202-212.

Shieh, K.-K., Chen, M.-T., 1997. Effects of screen color combination, work-break

schedule, and workplace on VDT viewing distance. International Journal of Industrial

Ergonomics 20 (1), 11–18.

Shieh, K.-K., Lin, C.-C., 2000. Effects of screen type, ambient illumination, and color

combination on VDT visual performance and subjective preference. International

Journal of Industrial Ergonomics 26 (5), 527–536.

Shieh, K.-K., Chen, M.-T., Chuang, J.-H., 1997, Effects of color combination and

typograghy on identification of characters briefly presented on VDTs. International

Journal of Human–Computer Interaction 9 (2), 169–181.

Page 37: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

33

Small, P.L., 1982. Factors influencing the legibility of text/background color

combinations on the IBM 3279 color display station. Report No. HF066, IBM Hursley

Park, Winchester, England.

Spenkelink, G.P.J., Besuijen, J., 1996, Chromaticity contrast, luminance contrast, and

legibility of text. Journal of the Society for Information Display 4 (3), 135–144.

Tinker, A.M., Paterson, G.D., 1928. Influence of type form on speed of reading. Journal

of Applied Psychology 12, 359–368.

Tinker, A.M., Paterson, G.D., 1929a. Studies of typographical factors influencing speed

of reading: II. Size of type. Journal of Applied Psychology 13 (2), 120–130.

Tinker, A.M., Paterson, G.D., 1929b. Studies of typographical factors influencing speed

of reading. III. Length of line. The Journal of Applied Psychology 13 (3), 205–219.

Tinker, A.M., Paterson, G.D., 1929c. Studies of typographical factors influencing speed

of reading: V. Simultaneous variations of type site and line length. The Journal of

Applied Psychology 13 (2), 72–78.

Tinker, A.M., Paterson, G.D., 1929d. Studies of typographical factors influencing speed

of reading: VI. Black type versus white type. The Journal of Applied Psychology 13

(2), 241–247.

Page 38: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

34

Tinker, A.M., Paterson, G.D., 1929e. Studies of typographical factors influencing speed

of reading. VII. Variations in color of print and background. Journal of Applied

Psychology 13 (2), 471–479.

Tinker, A.M., Paterson, G.D., 1932. Studies of typographical factors influencing speed

of reading: X. Style of typeface. The Journal of Applied Psychology 16, 605–613.

Tinker, A.M., Paterson, G.D., 1940. How to Make Type Readable: A Manual for

Typographers, Printers, and Advertisers, Based on Twelve Years of Research Involving

Speed of Reading Tests Given to 33,031 Persons. Harper & Brothers, New York.

Tinker, A.M., Paterson, G.D., 1942. Reader preferences and typography. Journal of

Applied Psychology 26, 38–40.

Tinker, A.M., Paterson, G.D., 1944. Eye movements in reading black print on white

background and red print on dark green background. American Journal of Psychology

57, 93–94.

Tinker, A.M., Paterson, G.D., 1946. Readability of mixed type forms. Journal of

Applied Psychology 30, 631–637.

Tinker, A.M., 1955. Tinker Speed of Reading Test. University of Minnesota Press,

Minneapolis.

Tinker, A.M., 1963. Legibility of Print. Iowa State University Press, Ames, IA.

Page 39: Effect of font and background color combination on …rx...font/background color combination is an important factor that affects RE [Radl, 1980; Pace, 1984]. Table 1.2: Comparison

35

Wu, J.H., Yuan, Y.F., 2003. Improving searching and reading performance: the effect

of highlighting and text color coding. Information & Management 40 (7), 617–637.

Xue-min Zhang, Hua Shu, Tian Ran, Effect of computer screen back and font color on

Chinese reading comprehension, 2007 International Conference on Intelligent

Pervasive Computing.

Yi-Jan Yau, Chin-Jung Chao, Sheue-Ling Hwang, Optimization of Chinese interface

design in motion environments, Displays 29 (2008) 308-315.