Color Theory

Primary Colors Colors that cannot be created by mixing others.

Secondary Colors Colors that are created by mixing two primary colors together.

Tertiary Colors Colors that are created by mixing a primary color and a secondary color.

Complementary Colors Colors that are opposite each other on the color wheel.

Analogous Colors Colors that are located close together on a color wheel.

Color Combinations

Monochromatic Relationship Colors that are shade or tint variations of the same hue.

Complementary Relationship Colors that across from each other on a color wheel.

Triad Relationship Three hues equally positioned on a color wheel.

Tetrad Relationship Four colors evenly spaced apart on the color wheel.

Analogous Relationship Colors located adjacent to each other on a color wheel.

Accented Analogous Relationship Uses mainly similar colors, but includes one complementary color as an accent color.

Activity: Make your own color wheel

Why learn color theory? Color and contrast are key components of usability. Text legibility is dependent on the reader’s ability to distinguish text from the background. Make sure your color choices do not make this difficult. Makes your website accessible to all people

Contrast Black text on a white background has the highest level of contrast. Some colors, such as yellow, disappear on a white background. Dark colors work much better. White text on black is almost as good for legibility. Dark text on black is difficult to read because of a low level of contrast.

Color Schemes Best option - color palettes chosen from nature. Avoid bold, highly saturated primary colors except in regions of maximum emphasis, and even there use them cautiously

Displaying Color Three basic colors that monitors transmit: – Red – Green – Blue

How to Reference Color A color is specified according to the intensity of its red, green and blue components – RGB Triplet – Hexadecimal format – Name Byte 1: red value Byte 2: green value Byte 3: blue value

Color Accessibility Also, never forget that almost 10 percent of male readers have some trouble distinguishing shades of red from shades of green

Not only would this be hard for someone with color-blindness to see, but some color combinations also cause visual illusions.

Web Accessibility Web accessibility means that people with disabilities can use the Web. More specifically, it means that people with disabilities can perceive, understand, navigate, and interact with the Web Web accessibility also benefits others, including older people with changing abilities due to aging.

Types of Web Accessibility How do people who cannot move their arms use your website? What about people who cannot see well or at all? Or people who have difficulty hearing or understanding, or have other accessibility needs?

User Interaction Some people do not use a mouse. Instead they use: – Keyboard only (used by people with physical, and visual disabilities) – Touch screen (used by people with cognitive and physical disabilities) – Voice recognition (speech input) and other hands- free interaction

Content Presented in Different Ways Text alternatives for non-text content Description of data represented on charts, diagrams, and illustrations Brief descriptions or transcripts of non-text content such as audio and video files Labels for form controls, input, and other user interface components

Content is Easy to See and Hear To make your content more accessible, try the following: – Color is not used as the only way of conveying information or identifying content – Default foreground and background color combinations provide sufficient contrast – Users can pause, stop, or adjust the volume of audio that is played on a website – Background audio is low, or can be turned off, to avoid interference or distraction (audio that is automatically played could interfere with text-to-speech)

Clear Organization Users can easily navigate, find content, and determine where they are within a website Content that is well organized helps users to orient themselves and to navigate effectively. This includes: – Pages have clear titles and are organized using descriptive section headings – Users are informed about their current location within a set of related pages – The keyboard focus is visible and the focus order follows a meaningful sequence

Consistency and Predictability Many people rely on predictable user interfaces and are disoriented or distracted by inconsistent appearance or behavior. – Navigation mechanisms that are repeated on multiple pages appear in the same place each time This helps people to quickly learn the functionality and navigation mechanisms provided on a website, and to operate them according to their specific needs and preferences.

Meet Mr. Lee, Online Shopper with Color Blindness Mr. Lee wants to buy some new clothes, appliances, and music. As he frequently does, he is spending an evening shopping online. He has one of the most common visual disabilities for men: color blindness, which in his case means an inability to distinguish between green and red. He has difficulty reading the text on many websites. When he first started using the Web, it seemed to him the text and images on a lot of websites used poor color contrast, since they appeared to use similar shades of brown. He realized that many websites were using colors that were indistinguishable to him because of his red/green color blindness. In some cases, the site instructions explained that discounted prices were indicated by red text, but all of the text looked brown to him. In other cases, the required fields on forms were indicated by red text, but again he could not tell which fields had red text. How can you make your website more accessible to Mr. Lee?

How to Help Mr. Lee use sufficient color contrast, and redundant information for color. – Can accomplish this by including names of the colors of clothing as well as showing a sample of the color – by adding text cues such as an asterisk to discounted prices in addition to showing them in a different color – by clearly indicating the required fields on the order form in addition to indicating them by color.

Resources design/3-visual-design.html design/3-visual-design.html web/principles#navigable essibility