Module 2: Color Theory

Overview

This module provides an introduction to color theory and helps to teach and reinforce basic color principles. The importance of this module stems from the fact that color choice plays an important role in visitors' initial reactions to websites and should therefore be taken very seriously. This is also an early opportunity to discuss accessibility. People perceive color differently. Some colors don't translate well across browsers. Some people (such as those with color blindness) may be unable to perceive color at all. It's important for websites to be accessible to all of these individuals.

This module is designed to provide an overview of color theory, but practical steps for how to apply this knowledge will come later, when students learn to stylize websites using cascading style sheets in Unit 3.

Lesson 1: Color Theory in Web Design

• Estimated lesson length: 30 - 60 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• This lesson requires students to read on-line materials, then respond to a series of questions. For this and any other lesson where students must respond to questions, use your own discretion as to how students should respond. Students could use the traditional method of turning in hand-written answers on paper, but since this is a technology course it may be better to ask students to submit their answers via email, or if you have access to an web-based quiz, survey, or assessment tool, that could be used as well.
• You may choose to have students read through the articles independently so they can read at their own pace or have the articles read aloud while you use a projector.
• The number of official color names (question b in the reading check) can be confusing for students (and instructors). Sixteen color names were originally defined in the HTML 4.01 specification: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). These same color names are supported in CSS 2.1, along with one additional color, "orange" (bringing the total to 17). Therefore, the correct answer to reading check question b is technically 16, but 17 might also be acceptable depending on how strict you choose to be. These 16 (or 17) colors tend to be referred to as "key colors" or "standard colors", but browsers also support an additional 130 color names, often referred to as "extended colors". These were originally defined in the W3C Scalable Vector Graphics (SVG) 1.0 specification, but were formally adopted in CSS 3. All major browsers today support all of these color names.

Answers to the Reading Check

1. Q: What are the three basic colors that monitors transmit?
   A: red, green blue
2. Q: How many colors can be referenced by name (e.g., "red") in HTML 4.01?
   A: 16 color names are defined in HTML 4.01 (see additional details in the Tips section above).
3. Q: How many different colors are there in the "web-safe" palette?
   A: 216
4. Q: Are the majority of people we refer to as color blind unable to see any color at all? Explain.
   A: No. The majority of colorblind people have trouble distinguishing certain colors.
5. Q: According to the WebAIM page on color blindness, what is the key to designing sites that are accessible to people who are color blind?
   A: Make sure that colors are not your only method of conveying important information.