GENERATING WEB TEMPLATE WITH SUITABLE COLORS
BASED ON GENETIC ALGORITHM
Tuncay Yigit, Ali Günes, Serif Okumus and Melih Orhan
Department of Computer Engineering, Suleyman Demirel University, Cunur, Isparta, Turkey
Keywords: Web template, Color compatibility, Genetic algorithm.
Abstract: In this paper, we present a new approach that generates a web template with compatible colors. This
approach uses a genetic algorithm. The system generates random colors for each web template. All
templates are showed previews on the screen and then the best template is selected by applying the genetic
algorithm. It is converted to Html format and is showed on web browser. It is kept in the database for later
use.
1 INTRODUCTION
Web pages are communication tools between a web
producer and a web user. Many web page designs do
not have an aesthetic appearance. If we assume that
user is not a web developer and that he needs an
automatic tool to make him valuable creative
suggestions in order to personalize his site, then
standard editors can be useless because they fail to
catch the user preferences (Oliver at al., 2002). For
this case, it is important to choose an appropriate
color and design for an important event, it is crucial
to choose appropriate color schemes to convey
images and messages on your web page.
This study focuses on the following problem:
when creating a site, the user may specify the
personalize style of his sites and that more precisely
text colors, background colors, fonts, etc. The user
can use suitable web templates for web site styles
but many of templates have a color compatibility,
unsuitable fonts and fonts color.
In this paper, we propose to a genetic web design
optimizer for best web page styles. Our study
focuses on the optimization of web sites style, i.e.
compatibility of font and page background colors.
Genetic Algorithms (GAs) are search techniques
used to find approximate solutions. They were
formalized in 1975 by Holland (Holland, 1975).
GAs deal with a population of candidate solutions
for a given problem. Each solution is encoded with
in a sequence of genes. GAs consist of main steps.
Firstly, an initial population is generated (step1).
Then, iteratively each candidate solution gets a score
that evaluates its fitness with regard to the problem
(step 2).
Then, some solutions are selected (step 3) and
reused to generate a new population (step 4). The
generation consists in applying operations on
solutions (e.g., mutation, inbreeding). Sims (Sims,
1991) applied GA to artistic creation and replaced
automatic evaluation with human evaluation. This
approach is referred as Interactive GA (IGA)
(Takagi, 2001). IGAs lead to new kind of
applications in computer science like the
reconstruction of a criminal face guided by the
victim, or the creation of beautiful images. In those
applications, the user selects individuals according
to his own criteria and the IGA evolves the
individuals according to the user’s preferences
(Monmarché, 1999). The main drawback of a IGA is
the user fatigue induced by the selection of the best
individuals over generations. Usually, users can't go
beyond 20 generations of 16 individuals (Sims,
1991).
In Human Computer Interaction (HCI), IGA has
been explored by Monmarché to generate HTML
web pages. In these works, individuals represent
Cascading Style Sheets (CSS) (Monmarché, 1999)
or CSS plus webpage layout (Secretan, 2008). The
population is composed of 12 individuals. Each of
them is used to generate a web page. The set of web
pages is scaled to fit on a single screen. Individuals
can be edited by designers for saving time (e.g.,
colors customization). At each of IGA iteration,
338
Yigit T., Günes A., Okumus S. and Orhan M..
GENERATING WEB TEMPLATE WITH SUITABLE COLORS BASED ON GENETIC ALGORITHM.
DOI: 10.5220/0003678103380342
In Proceedings of the International Conference on Evolutionary Computation Theory and Applications (ECTA-2011), pages 338-342
ISBN: 978-989-8425-83-6
Copyright
c
 2011 SCITEPRESS (Science and Technology Publications, Lda.)

designers select best candidates among the 12 web
pages.
This study have three main restriction. First, the
selectors that identify HTML elements on which to
apply CSS transformations are predefined (e.g., titles
of level 1, paragraphs, images). It is impossible to
generate new groupings along the IGA process (e.g.,
even paragraphs and images). Second, there is no
high level description (e.g., no task model) which
the IGA could rely on generating more complex
transformations (e.g., replace an entry text with a
calendar). Finally, individuals can’t be complexities
along the IGA process. Only parameters can be
tuned, but no new parameter can be added (e.g., no
insertion of text or images to enhance existing
elements).
The paper is organized as follows. In the next
section, the system description and technology that
used are explained. Compatibility criteria of two
color and interactive genetic algorithms in user
interface design are described in Section 3.
Experimental results and conclusions are given in
Sections 4 and 5, respectively.
2 MATERIALS
2.1 System Description
Our project is roughly presented in Figure1. It takes
a task model in input. It uses a customizable
flowchart of GA operations to create and make
evolve a population of transformations.
Figure 1: System flowchart.
The user interface of our project is divided into
two pieces: a workflow editor and a web based user
interfaces for exploring the design based on IGA.
The workflow editor is composed of two parts: on
the left, general control system is located in the
menus. At the center, a wizard is dedicated to build
the workflow. Steps of wizard: The user selects a
predefined HTML template. It is based on web
standards. Then user determines the values of
genetic algorithm operators. The wizard generates
web templates with random colors. All templates are
showed preview on the screen. The most
harmonious color web template is selected with the
genetic algorithm applied with the necessary
procedures. This template is kept in the database for
later use.
2.2 Technological Choices
This study is based on the Java Enterprise Edition
(Java EE) platform. Java EE is a web profile to
create next-generation web applications. We have
used Java Server Faces (JSF) on the based Java EE.
Java Server Faces (JSF) is a Java-based web
application framework intended to simplify
development integration of web-based user
interfaces. For support JSF, we have used Eclipse
IDE tool.
3 METHODS
3.1 Use of Color
Color is an important asset in the design of Web
content, enhancing its aesthetic appeal, its usability,
and its accessibility. However, some users have
difficulty perceiving color. People with partial sight
often experience limited color vision, and many
older users do not see color well. In addition, people
using text-only, limited-color or monochrome
displays and browsers will be unable to access
information that is presented only in color (Web
content accessibility guidelines 2.0, 2007).
3.2 Determining Colour Visibility
Colour Visibility is based on two sets of algorithms:
Luminosity Contrast Ratio and Color Difference-
Brightness Difference, suggested by the World Wide
Web Consortium (W3C).
Contrast Ratio Formula: The contrast ratio is
determined by the formula 1.
Measure the relative luminance of each letter (unless
they are all uniform) using the formula 1.
L = 0.2126 * R + 0.7152 * G + 0.0722 * B (1)
where R, G and B are defined as:
if RsRGB <= 0.03928 then
R = RsRGB/12.92 else
R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then
G = GsRGB/12.92 else

UserControlSystem
Model Transform
GENERATING WEB TEMPLATE WITH SUITABLE COLORS BASED ON GENETIC ALGORITHM
339

G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then
B = BsRGB/12.92 else
B = ((BsRGB+0.055)/1.055) ^ 2.4
and
RsRGB, GsRGB, and BsRGB are defined as:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
The "^" character is the exponentiation operator.
Color Brightness Formula: Color brightness is
determined by the formula 2.
((Red value X 299) + (Green value X 587) + (Blue value X
114)) / 1000
(2)
The difference between the background brightness,
and the foreground brightness should be greater than
125.
Color Difference Formula: Color difference is
determined by the formula 3.
(max(Red1,Red2) min(Red1,Red2)) +
(max(Green1,Green2) min(Green1,Green2))+
(max(Blue1, Blue2) min (Blue1, Blue2))
(3)
The difference between the background colour and
the foreground colour should be greater than 500.
Two colors provide good color visibility or good
color compatible if the contrast-ratio and brightness
difference and color difference between the two
colors are greater than set ranges. These ranges are
listed in below.
 Brightness Differences > 125
 Color Differences > 500
 Contrast Ratio > 4.5
3.3 Interactive Genetic Algorithm in
User Interface Design
Firstly individuals are described that were generated
for system. Then describe the components:
initialization of the population, genetic operations,
evaluation and selection.
Individuals encode a set of web templates. The
structure of each template is associated with
standard HTML template. We decorate individuals
with random colors. For instance, in Figure 2, each
template was created for the background and font
(text) color. We encode the user interfaces
representation in chromosomes. As shown in Figure
2, every color in the chromosomes represents a gene.
Appearance gene of each part was encoded by
decimal number as RGB (255,255,255).
Initialization has to deal with two concerns: the size
of the population, and the generation mechanism.
The size of the population is crucial: if too small,
there is a risk to converge towards “bad” or
undesired solutions; if too large, evolution of
solution becomes time consuming. Pic breeder
(Secretan, 2008) shows that it is possible to obtain
good results with 16 elements. In this study, the size
of population is a variable parameter.
We have used random generation mechanism for
initializations. Individuals are randomly generated
by system.
Selection of individuals, several selection
methods exist in the literature. One can cite steady-
state selection or roulette wheel selection (selection
probability proportional to the score). Elitist
strategies may be applied. They consist of keeping
the best individuals unchanged through generations
in order to avoid regression.
Figure 2: Chromosome structure.
3.4 Fitness Function
In fitness function, we compute the similarity
between two individuals. It calculates color
similarity of two user interfaces, in term of the font
and background color. To determine color similarity,
we calculate color difference (l(x)) and brightness
(k(x)) between two colors. The average of
background and font color of each column, fitness in
formula 4 was used as convergence measurement,
which is shown as follow:
(4)
where m is the threshold value. It is equal to 60% as
default.
4 EXPERIMENTAL RESULTS
In this study, we determined default values of GA’s
parameters on Table 2. We have tested our study
using single-point crossover and 8 colors. As the
first step to generate 20 individuals with randomly
as shown Figure 3. Each individual is consisted of
four parts (header, sidebar, content, footer) and each
ECTA 2011 - International Conference on Evolutionary Computation Theory and Applications
340

part is used two colors (background color,
foreground color).
Table 1: Default values of GA’s parameters.
Figure 3: First Population.
Experimental results are presented in Table 3 and
Figure 4. Figure 4 compares to minimum, maximum
and average fitness values with the different number
of individuals. These data were obtained by running
the genetic algorithm on five times for each cases.
Table 2: Fitness values according to number of
individuals.
Figure 4: Charts of the test results.
Fitness function value can changes between -250
and 160. In figure 5(a) and figure 5(b) is generated
at the end of the genetic algorithm. In figure 5(a),
fitness value is -79.45 and it is worst template. In
figure 5(b), fitness value is 29.71 and it is the best
template.
(a)
(b)
Figure 5: The worst(a) and the best(b) template.
5 CONCLUSIONS
We have studied the generating best web template
based on genetic algorithm. In this study, we
suggested a new fitness method applying genetic
algorithms. Our fitness function is approached 85%
of the maximum fitness value.
REFERENCES
Holland, J. H., 1975. Adaptation in natural and artificial
systems, University of Michigan Press, Ann Arbor.
Monmarché, N., Nocent, G., Slimane, M., Venturini, G.,
Santini, P., 1999. Imagine: a tool for generating
HTML style sheets with an interactive genetic
algorithm based on genes frequencies, IEEE SMC '99
Conference Proceedings, pp.640 - 645, Tokyo, Japan.
Oliver, A., Regragui, O., Monmarché, N., Venturini, G.,
2002. Genetic and interactive optimization of web
sites, Laboratoire d’ Informatique Université de Tours.
Secretan, J., Benato, N., Rodriguez, D. B., Cambell, A.,
and Stanley, A., 2008. Evolving pictures
collaboratively online, In CHI ’08: Proceeding of the
GENERATING WEB TEMPLATE WITH SUITABLE COLORS BASED ON GENETIC ALGORITHM
341

twentysixth annual SIGCHI conference on Human
factors in computing systems, pp.1759-1768, New
York, USA.
Sims, K., 1991. Artificial evolution for computer graphics,
In SIGGRAPH’91, Proceedings of the 18th annual
conference on Computer graphics and interactive
techniques, pp. 319–328, New York, USA.
Takagi, H., 2001. Interactive evolutionary computation as
humanized computational intelligence technology,
Theory and Applications International Conference, 7
th
Fuzzy Days, Dortmund, Germany.
Troiano, L., Birtolo, C., and Cirillo, G., 2009. Interactive
Genetic Algorithm for choosing suitable colors in User
Interface, Learning and Intelligent Optimization,
Trento, Italy.
Web content accessibility guidelines 2.0, W3C Draft 11
December 2007, viewed 05 June 2011, <http://
www.w3.org/TR/2007/WD-WCAG20 20071211/>
Web content accessibility guidelines 2.0, Understanding
WCAG 2.0, viewed 05 June 2011, <http://
www.w3.org/TR/UNDERSTANDING-WCAG20/visu
al-audio-contrast-without-color.html>
ECTA 2011 - International Conference on Evolutionary Computation Theory and Applications
342