Choose the Proper Color

Afdhal Dinilhak G64124026Dody Prasetya G64124034Erlangga Adinegoro G64124042Novi Indra G64124069

Whats is it?

Wavelengths of light themselves are notcolored.

What is perceived as actual color resultsfrom the stimulation of the properreceptor in the eye by a received lightwave.

2

Color

The Visible Spectrum

3

Color

To describe a color, it is useful to refer to the three properties itpossesses:

Hue : Spectral wavelength composition of a color.

chroma or saturation : Purity of a color in a scale from gray to themost vivid version of the color.

value or intensity : Relative light-ness or darkness of a color in arange from black to white.

4

Color

RGB

Many color monitors use the three primary colors of light, invarious combinations, to create the many colors we see onscreens.

By adjusting the amounts of red, green, and blue light presentedin a pixel, millions of colors can be generated. Hence, colorpalette editors exist with labels R, G, and B (or the words spelledout).

5

Color

HSV

Some palette editors use a convention based on the Munsellmethod of color notation called HSV, for hue, saturation, andvalue (or HSL for hue, saturation, and lightness). Again, variouscombinations produce different colors.

6

Color Uses

Color as a Formating Aid

Color as a Visual Code

Other Color Uses

7

Possible Problems with Color

High Attention-Getting Capacity

Interference with Use of Other Screens

Varying Sensitivity of the Eye to Different Colors

Color-Viewing Deficiencies

Color Connotations

Cross-Disciplinary and Cross-Cultural Differences

8

Color — What the Research Shows

To illustrate, on a positive note, color has been shown toimprove performance (Kopala, 1981; Nagy and Sanchez,1992; Sidorsky, 1982)

To improve visual search time (Christ, 1975; Carter, 1982)

To be useful for organizing information (Engel, 1980)

To aid memory (Marcus, 1986b)

To demarcate a portion of a screen (as opposed to lines ortype font, Wopking et al., 1985).

9

Color — What the Research Shows

Improve visual search time with color

To aid memory with color

10

Color and Human Vision

The Lens

Focus received wavelengths of light on the retina

The lens itself is not color corrected

The Retina

Light-sensitive surface of the eye

Comprises two kinds of receptors, rods and cones

11

Choosing Colors

One must consider the following factors :

The human visual system

The possible problems that the colors use may cause

The viewing environment in which the display is used

The task of the user

How the colors will be used

The hardware on which the colors will be displayed

12

Choosing Colors

Requires a clear understanding of how the information will be used

Use color as a redundant screen code.

Categories : color chosen to organize information or data on a screenmust aid the transfer of information from the display to the user.

Redundancy : never rely on color as the only way of identifying ascreen element or process.

Choosing Colors for Categories of Information

13

Choosing Colors

Colors are subject to contextual effects. The size of a coloredimage, the color of images adjacent to it, and the ambientillumination all exert an influence on what is actually perceived.

Adjacent images can influence the perceived color. A color on a darkbackground will look lighter and brighter than the same color on alight background

Colors in Context

14

Choosing Colors

Design for monochrome first, or in shades of black, white and gray.

Use colors conservatively. Do not use color where other identification techniques, such as

location, are available.

Usage

15

Choosing Colors

For best absolute discrimination, select no more than four or five colorswidely spaced on the color spectrum.

Good colors: red, yellow, green, blue, and brown

For best comparative discrimination, select no more than six or sevencolors widely spaced on the color spectrum

Other acceptable colors: orange, yellow-green, cyan, violet, andmagenta

Choose harmonious colors

One color plus two colors on either side of its complement. Three colors at equidistant points around the color circle.

For extended viewing or older viewers, use brighter colors

Discrimination and Harmony

16

Choosing Colors

To draw attention or to emphasize elements, use bright or highlightedcolors. To deemphasize elements, use less bright colors.

The perceived brightness of colors from most to least iswhite, yellow, green, red, blue.

To emphasize separation, use contrasting colors.

Red and green, blue and yellow.

To convey similarity, use similar colors.

Orange and yellow, blue and violet.

Emphasis

17

Choosing Colors

To indicate that actions are necessary, use warm colors.

Red, orange, yellow.

To provide status or background information, use cool colors.

Green, blue, violet, purple.

Conform to human expectations.

In the job.

In the world at large

Common Meanings

18

Choosing Colors

In the center of the visual field, use red and green.

For peripheral viewing, use blue, yellow, black, and white.

Use adjacent colors that differ by hue and value or lightness

Location

19

Choosing Colors

Order colors by their spectral position.

Red, orange, yellow, green, blue, indigo, violet

Ordering

20

Choosing Colors

Foregrounds:

Use colors that highly contrast with the background color.

For text or data, use Black Desaturated or spectrum center colors such as white, yellow,

or green. Warmer more active colors.

Use colors that possess the same saturation and lightness.

To emphasize an element, highlight it in a light value of the foregroundcolor, pure white, or yellow.

To deemphasize an element, lowlight it in a dark value of theforeground color.

Foregrounds and Backgrounds

21

Choosing Colors

Backgrounds:

Use a background color to organize a group of elements into a unifiedwhole.

Use colors that do not compete with the foreground.

Use

• Light-colored backgrounds of low intensity: off-white or light gray.• Desaturated colors.• Cool, dark colors such as blue or black.• Colors on the spectral extremes

Foregrounds and Backgrounds

22

Choosing Colors

Use at least five colors or color values to create a 3-D look on a screen.

Background: the control itself and the window on which it appears.

Foreground: captions and lines for buttons, icons, and other objects.

• Usually black or white.

Selected mode: the color used when the item is selected.

Top shadow: the bezel on the top and left of the control.

Bottom shadow: the bezel on the bottom and right of the control

Three-Dimensional Look

23

Color Palette, Defaults, and Customization

Permit users to customize their colors.

Provide a default set of colors for all screen components.

Provide a palette of six or seven foreground colors.

• Provide two to five values or lightness shades for each

foreground color.

Provide a palette of six or seven background colors.

Never refer to a screen element by its color.

24

Customization

Because color preference is subjective.

Compared were displayed color combinations that were judged to

be “good” or “poor.”

When color customization is permitted, whenever possible allow

users to see the results of their color choices before they are

applied. Include a sample screen in a preview function within the

customization process.

25

Default set

Both the Macintosh and Microsoft Windows provide standard, well-

thought-out color schemes.

Do not provide the color spectrum; limit the number of choices

available.

A maximum of six or seven foreground and background colors will

provide the necessary variety.

With these palettes, however, some sort of guidance concerning

maximum number of colors to use and what are good and poor

combinations should be provided.

26

Grayscale

For fine discriminations use a black-gray-white scale.

Recommended values are white, light gray, medium gray, dark

gray, black.

The eye resolves fine detail much better on a black-white scale.

Marcus (1986b) recommends five tonal values for black and

white, higher-resolution screens: black, dark gray, medium

gray, light gray, and white.

27

Text in Color

When switching text from black to color,

Double the width of lines.

Use bold or larger type.

• If originally 8 to 12 points, increase by 1 to 2 points.

• If originally 14 to 24 points, increase by 2 to 4 points.

Check legibility by squinting at text.

Too-light type will recede or even disappear.

28

Monochromatic Screens

At the standard viewing distance, white, orange, or green are

acceptable colors.

At a far viewing distance, white is the best choice.

Over all viewing distances, from near to far, white is the best

choice

29

Considerations for People with Color-Viewing Deficiencies

Use color combinations that can

be easily discriminated.

Ensure that the lightness contrast

between foreground colors is high.

30

Use color combinations that can be easily discriminated.

Ensure that the lightness contrast between foreground colors is

high.

Cultural, Disciplinary, and Accessibility Considerations

Consider the impact of specific colors on :

Users of various cultures.

Users of various disciplines.

Users relying on accessibility utilities.

31

Choosing Colors for Textual Graphic Screens

Use effective foreground/background combinations.

Use effective foreground combinations.

Choose the background color first.

Display no more than four colors at one time.

Use colors in toolbars sparingly.

Test the chosen colors.

32

Use effective foreground/background combinations

33

Choosing Colors for Statistical Graphics Screens

Emphasis

Number of Colors

Backgrounds

Size

Status

34

Choosing Colors for Statistical Graphics Screens

Measurements and Area-Fill Patterns

Physical Impressions

Size

Weight

Distance

Height

Depth

Concentration Level

Magnitude of Change

Action

Order

Neutrality

35

Choosing Colors for Web Pages

Purpose:

Color must always have a meaningful purpose.

Palette:

Use the browser 216-color palette.

Presentation:

Minimize the number of presented colors.

Always consider color in context.

Use similar or the same color schemes throughout.

For foregrounds: Use black or strong colors for text and

headings.

For backgrounds: Use weaker contrasting colors such as off-white

or light gray.

36

37

Choosing Colors for Web Pages

Relying exclusively on color.

Too many colors at one time.

Highly saturated, spectrally extreme colors together:

Red and blue, yellow and purple.

Low-brightness colors for extended viewing or older viewers.

Colors of equal brightness.

38

Uses of Color to Avoid

Links:

Use default colors for links.

Make unselected/unvisited links blue.

Make selected/visited links purple.

Do not display non-link text in link colors.

Testing:

Test all colors.

39

Uses of Color to Avoid

Colors lacking contrast.

Fully saturated colors for text or other frequently-read screen

components.

Pure blue for text, thin lines, and small shapes.

Colors in small areas.

Color for fine details.

40

Uses of Color to Avoid

Non-opponent colors.

Red and green in the periphery of large-scale displays.

Adjacent colors that only differ in the amount of blue they possess.

Single-color distinctions for color-deficient users.

Using colors in unexpected ways.

Using color to improve legibility of densely packed text.

41

THANK YOU

42