Color Theory in Web Design

Web Development 1
Name ___________________________Date ___________________Block _____
Color Theory in Web Design
The purpose of this lesson is to provide you with a general understanding of the role that color plays in effective
web design.
At the completion of this exercise:
you will be able to explain the basic concepts related to using color and the web.
you will be able to identify and make use of color related resources online
you will be able to identify accessibility concerns related to color and implement key strategies to make
sites accessible to people who are color blind
Activities
Read all of the resources below.
Reading Check: Respond to the following questions. Have your instructor review your answers.
Web Style Guide: Visual Design - http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html
1. What are the 3 main purposes of graphic design?
2. What tool is helpful in designing the layout of a page?
3. What is something you should always keep in mind as you design the html and css for menu lists,
content lists, page header graphics, and other design elements?
4. What are the 2 most important principles of web page layout?
5. Summarize the points to keep in mind for each of the following design considerations:
Consistency –
Contrast –
Color and Contrast in Typography –
Contrast Variability –
Avoid Overusing Contrast –

White space –
Style –
Simplicity –
Wikipedia: Web Colors - http://en.wikipedia.org/wiki/Web_colors
6. What are the three basic colors that monitors transmit?
7. How many colors could be referenced by name (e.g., "red") in HTML 4.01?
8. How many different colors are there in the "web-safe" palette?
9. What are the 2 reasons why this number of web-safe colors was chosen?
WebAIM: Color Blindness - http://webaim.org/articles/visual/colorblind
1. Are the majority of people we refer to as “color blind” unable to see any color at all? Explain.
2. What 2 things are important to remember when designing sites that are accessible to people who
are color blind?
Color Vision - http://www.iamcal.com/toys/colors/whatis.php
1. Define/describe the different types of color blindness listed below.
• Trichromat
• Dichromat
• Anomalous Trichromat
• Monochromat

2. Click on the Statistics tab - In a class of 30 students about how many would be color blind?
3. Experience what your webpages might look like to those with color vision deficiencies:
• Click on the Palette tab.
• Select NORMAL
• Select CHANGE TEXT COLOR
• Click on a color from the palette that you would typically consider using for text.
• Select CHANGE BACKGROUND COLOR
• Click on a color from the palette that you would typically consider using for a
background.
• Now click on each of the types of color vision deficiencies to see what your “web page”
text/background color scheme would look like to those with color vision deficiencies.
4. Try different color combinations.
• Which ones would be the hardest to see by those with Deuteranomoly (the most
prevalent form)
5. Select a black background
and green text.
• What would a typical
monochromat see?
EXPERIENCE COLOR VISION DEFICIENCY
Go to http://www.neitzvision.com/content/colorblindworld.html and go through the slides.
1. How did you feel when asked to identify the items?
2. Imagine trying to read a webpage that conveys information with color only. (as in a train map with route
colors) How would you feel if you were trying to follow someone’s directions that told you to take the
red line and switch to the green line at a particular station, for example?