color - understand to better use

Image from Flickr user nsaplayer.

Color

Understand, to better use

1 What is?

2 How do we perceive?

3 Guidelines...

4 Did you know...

Agenda

CO L O R

1What is color?

From the sun to our eyes

The sun emits light composed of several electromagne:c wavelengths.

Some wavelengths are absorbed by apple´s color pigments and some are reflected.

Our eye receives the reflected wavelengths and process it into red color.

1

2

3

images from Flickr users pren:sc (eye), Oceano Mare (landscape) and Dykstra (apples).

“”

Color is a sensation and,therefore a subjective experience.

in Apple Developer Documenta:on, Color Management Overview, 2009.

image from Flickr user chandudesai.

Research on prison discovered that red and yellow wings increased violence rather than blue and green.

Image from Flickr user wwarby.

Emotional...

Some people cannot distinguish between red and green.

Image from Flickr user an untrained eye.

Color impairments...

While in the western culture white is used for marriages, in the Eastern Asia, it’s often used in funerals.

Image from Flickr user an Extra Medium.

Cultural...

“”

Color is a sensation and,therefore a subjective experience.

image from Flickr user chandudesai.

This content aims at better understanding color,

nevertheless

these are notrigid rules to follow.

in Apple Developer Documenta:on, Color Management Overview, 2009.

But, what are really the colors we feel everyday, all the time, at least most of us, that give us all the emotions and kind of talk to us, giving even different meanings to the same aspects, depending on which part of the globe we live in, but, really, what is color, tell me please, that’s the reason, I am reading this damn presentation, to know and understand what is color....

By the way, nice color, the one used in this slide :)

CO L O R I S

Color is the visual effect that is caused by the spectral compositionof the light emitted, transmitted, or reflected by objects. in Color Logic for Web Site Design

“

”

GAMMA RAYS X-‐RAYS ULTRAVIOLET RAYS RADAR FM TV SHORTWAVE AMINFRARED RAYS

units: nm

VISIBLE LIGHT

Color is the visual effect that is caused by the spectral compositionof the light emitted, transmitted, or reflected by objects. in Color Logic for Web Site Design

“

”400 450 500 550 600 650 700 750

Spectral composi:on:

Objects:

emi^ed transmi^ed reflectedLight:

Visual effect:

Color can be created by two means

Our eyes either receive:

direct lightreflected light


Subtractive color

Color is made from subtrac2ng wavelengths of light.

Examples: fruits, clothes, human skin, etc.

reflected light



Primary colorsreflected light

Cyan, yellow and magenta.Color model: CYMK.



Additive color

Color is made from mixing wavelengths of light.

Examples: TV, computer displays, sun light, etc.

direct light



Primary colors direct light

Red, green, blue.Color model: RBG.


Hue is the most dominant light wavelength:

data and images from CambridgeinColour.com.

Fundamentally, color is the perception of light rays wavelengths in the electromagnetic visible spectrum.

Color properties, in a more scientific way

http://www.cambridgeincolour.com


Saturation measures the purity of the most dominant wavelengths:

Fundamentally, color is the perception of light rays wavelengths in the electromagnetic visible spectrum.





Hue

Saturation





Color itself in electromagnetic spectrum.>> blue, green, yellow, etc.

Hue

Color properties, in a more practical way

The purity of hue (more or less of a color).>> blood red, pure yellow, etc.

Saturation

pure vs muted

+ —


Differences in intensity of light (darker vs lighter).>> bright red vs dim red.

Brightness (value)

dark vs light

+ —


Hue

Brightness (value)

Saturation

pure vs muted

dark vs light

+ —

+ —


Do colors appear to move?

Color movement

BACKWARD INWARD STOPPED

+ +

Do colors appear to move?Yes.

Color movement

lens re:nalight wavelengths

Because different light wavelengths are focused differently by the eye lens.

400nm (blue)IN FRONT

600nm (green)PERFECTLY

750nm (red)BEHIND

Why colors appear to move?

Color movement

Warm colors

Red, oranges, yellows and green-yellows.

Color movement: outward

Color temperature

data and images from ColorLab, h^p://colorlab.webespacios.com.

http://colorlab.webespacios.com


Purples, blues, aquas, and greens.

Color movement: inward

Cool colors

Color temperature




Color temperature

Warm colors Cool colors




Brightness

Neutral colors

Black, white and gray are not saturated and are called neutral colors.

Saturation: 0%

Color temperature

2How do we perceive color?

Light passes through the cornea.

Cornea

1

data from Sensa:on and Percep:on.

Cornea: focus and refracts light rays.

Human eye structure.

Pupil

Iris

The iris open / closes the pupil to regulate the light that enters the eye.2

Dilated pupils: at night the pupils open more to get more light.



Accommodation

The lens gets fa9er to focus on close objects and returns to its normal, thinner, shape when viewing objects farther away.

The lens focus light into the retina.3

Lens: to obtain a sharp clear image in the retina, the lens refracts and focus the light rays.

Different wavelengths require different focusing.3.1

lens re:nalight wavelengths

shorter wavelengths (blue)

IN FRONT

medium wavelengths (green)

PERFECTLY

long wavelengths (red)

BEHIND

Different wavelengths require different focusing.3.1

Repercussions

3.1.1 Blues appear to be distant, reds appear to be closer.

3.1.2 Simultaneous saturated colors may cause visual fa:gue.

3.1.3 Difficult to obtain a sharp image in re:na with pure blue.

3.1.4 Green is the most reshul color for the human eye.

data from The essen:al guide to user interface design.

3.1.1 Blues appear to be distant, reds appear to be closer.

BACKWARD INWARD STOPPED

+ +

Inward: colors appear to move backward (blue).

Outward: colors appear to move forward (red).

Just right: colors appear to be stopped (green).

MOVEMENT

Refocusing different wavelengths simultaneously, make the muscles tired.

>> The worst case is blue vs red.

3.1.2 Simultaneous saturated colors may cause visual fatigue.

look carefully...

REFOCUSING

3.1.3 Difficult to obtain a sharp image in retina with pure blue.

look carefully... look carefully...

Short wavelengths (blue) focus behind retina, creating less sharper images.

>> Small objects, text and edges should be avoided with pure blue.

FOCUSING

3.1.4 Green is the most restful color for the human eye.

Green light wavelengths focus perfectly in the retina, creating sharper images.

>> Why is so relaxing to go out and enjoy nature?

PERFECT FOCUS

image from Flickr user ichiro kishimi

Some wavelengths are absorbed by the lens.3.2

Some wavelengths are absorbed by the lens.3.2

Repercussions

3.2.1 The lens absorbs more wavelengths in the blue spectrum.

3.2.2 As people get older, sensi:vity to blue decreases.

3.2.3 Older people need brighter, saturated colors.


3.2.1 The lens absorbs more wavelengths in the blue spectrum.

3.2.2 As people get older, sensitivity to blue decreases.

As we get older, our lens yellows.

color examples from Color Logic for Web Site Design.

older people may see

3.2.3 Older people need brighter, saturated colors.

data from The essen:al guide to user interface design.Image from Flickr user SundeepGoel.

The lens also refocus with brightness differences.3.3

If the lens has to continuously refocus for bright and dark objects, it may cause visual fatigue.

BRIGHTNESS VARIATION

Image from Flickr user masontrullinger.

3.3.1 High contrast variations may cause visual fatigue.

Re6na

Fovea

Retina light receptors receive light wavelengths and fire accordingly.4


Re6na

Fovea


Retina light receptors receive light wavelengths and fire accordingly.4

rods cones

Re6na

Fovea

Retina light receptors:

rods

Operate mostly in dim light, concentrated outside of fovea.

>> Sensi2vity with periphery vision

Re6na

Fovea

cones

Color vision, concentrated on fovea, give sharper vision.

>> Acuity with central vision

Re6na

Fovea

Color is perceived by the response ratio from 3 types of cones.4.1

cone cells peak response to light

Image from CambridgeinColour.com.



Color is perceived by the response ratio from 3 types of cones.4.1Short wavelength (S) - 440 nm.

>> 2% “blue” on periphery of fovea.

Medium wavelength (M) - 535 nm.

>> 32% “green” on middle of fovea.

Long wavelength (L) - 565 nm.

>> 64% “red” on middle of fovea.




Color sensitivity in the periphery.4.2

Fovea

Re6na

Center of fovea:our eyes work with trichromatic color.


Fovea

Re6na

Around fovea: we are red-green blind.

>> Reds and greens tends to look yellow.

>> Violets and blues tends to look blue...


Fovea

Re6na

Extreme periphery:we are insensible to color.


Fovea

Re6na

4.2.1 Yellow and blue are the best colors in the visual periphery.

data from Color-‐Vision Mechanisms in the Peripheral Re:nas of Normal and Dichroma:c Observers

cone cells peak response to light

Cones responses are translated into 3 opponent channels.5

Opponent channels: brain interprets color using antagonist responses from 3 cones.




antagonist responses

, means that neurons in these opponent channels either respond one color or the antagonist, never both at the same time.

antagonist responses

⇐ if green neurons are responding heavily, red ones respond less ⇒++++

+++++++++

++++++++++

+++++++++

+++

++

+++

+

Example:

green red blue yellow black white

Opponent channels:Brightness

Efficiency: The long (red) and medium (green) wavelengths overlap. To be efficient the brain uses this overlapping info to get 2 channels of color and one of brightness.




green red

Opponent channels:




blue yellow

Opponent channels:




black white

Opponent channels:Brightness




Brightness is derived from green and red waves.5.1cone cells peak sensitivity to light brightness

black whiteBrightness




Brightness is derived from green and red waves.5.1

Repercussions

5.1.1 Brighter colors in the spectrum are in the middle.

5.1.2 Yellow is the most luminous color in the spectrum.


5.1.1 Brighter colors in the spectrum are in the middle.

400 450 500 550 600 650 700

WAVELENGTH (nm)

BRIGHTNESS

5.1.2 Yellow is the most luminous color in the spectrum.

Yellow gets people’s attention faster than any other color.

American school buses are yellow.

Metro floor barriers are yellow.

Instruc2ons: stare at the black dot in the blue square for 30 seconds, then move your eyes immediately to the white

square in the right.

WHAT COLOR DO YOU SEE?

What is happening: Each opponent channel has cells firing up for blue, but eventually they will get :red because you

are making an effort, and the cells for yellow that are already firing will become prominent because they are not :red.

EXPERIMENT

EXPERIMENT

WHAT COLOR DO YOU SEE? YELLOW



WHAT COLOR DO YOU SEE? YELLOW



After-image effect: one of the effects from the opponent color theory.

EXPERIMENT

blue yellowOpponent channel:

data from Using Color Effec:vely. Color blindness example from Color Logic For Web Site Design.

Color blindness , a color vision deficiency, is the inability to perceive differences between some of the colors that others can distinguish.in Color Logic for Web Site Design

“

”readable? readable? readable?

readable? readable? readable?

color blinded people may see

Mainly two types: Red-green & Blue-Yellow.

Some people lack one of the photopigments used in eye’s retina to transmit color.

Color blindness

Saturated colors with the same brightness are hard to distinguish by impaired people.

are color defective.

8% of men and

0.4% of women

What number do you see?

data from Ishihara color test in Wikipedia.

EXPERIMENT

What number do you see?

>> 74 -‐ normal vision.

>> 21 -‐ some vision impairment.

>> Nothing -‐ you´re in real trouble. You don’t perceive color at all.

data from Ishihara color test in Wikipedia.

EXPERIMENT

3Guidelines to use color...

TIME -‐ image from Flickr user Tony the Misfit.

Do communication mediums matter?


COKE -‐ image from Flickr user xiaming.

SCREENS -‐ image from Flickr user nouQraz.


YES

ComputerHave a LONGER exposition time.

Other mediums(TV, printouts, magazines, etc.)

Have a SMALLER exposition time.⇒

⇒


How long would you look at these commercials?lower exposition time, because you can stop looking whenever you want...

image from Flickr user heymynameispaul.

How long would use a bright yellow background, in your PC?longer exposition time, because working in the computer is part of many people´s daily lives.





Careful when choosing highly saturated and bright colors.

Guidelines

1 Always give enough contrast

2 Avoid simultaneous saturated colors

3 Avoid pure blue for small text & objects

Always give enough contrast

News

ENROLL IN PROGRAM

HOME PAGE

SEARCH NEARBY

Bugs Bunny

10 de Abril de 2009

Chiwawa

News

ENROLL IN PROGRAM

HOME PAGE

DO NOT SEARCH AT ALL

Bugs Bunny

10 de Abril de 2009

Chiwawa

4 de Maio de 2009

SECOND PAGESECOND PAGE


4 de Maio de 2009

SEARCH NEARBY

1

News

ENROLL IN PROGRAM

HOME PAGE

SEARCH NEARBY

Bugs Bunny

10 de Abril de 2009

Chiwawa

News

ENROLL IN PROGRAM

HOME PAGE


Bugs Bunny

10 de Abril de 2009

Chiwawa

4 de Maio de 2009

SECOND PAGESECOND PAGE


4 de Maio de 2009

SEARCH NEARBY

Always give enough contrast1

Why always give enough contrast

The sharper the object stands out against its background, the quicker and better the lens accommodation.

Lens

Accommodation

Contrast

Image from Flickr user WTL photos.

difference in perceived brightness of two objects


Bad contrast makes harder for the eyes to focus (excess of accommodation) causing visual fatigue.

Contrast effects ⇒

Image from Flickr user Shadab.


Image from Flickr user Grant MacDonald.

Text size also ma^ers. The smaller the text, higher needs to be the contrast.

Differences in brightness ⇒

The eye focuses most sharply on objects with different colors and brightnesses.

ask yourselves:

Is this color bright or dark?

How to always give enough contrast

Using dark colors vs bright colors.1.1

Using dark colors vs bright colors.1.1How to always give enough contrast

When in doubt:

Use a color space that includes the brightness property

HSB color space tool, HSB is also available...

Using natural opponent channels colors.1.2

red & green blue & yellow black & white

can you read me? can you read me?

can you read me?can you read me?

Opponent channels colors


Avoid using both colors with maximum satura:on ⇒ difficult to look?

Using natural opponent channels colors.1.2Opponent channels colors


image from Flickr user kuyman.

Using brighter colors vs darker colors in the visible spectrum.1.3How to always give enough contrast

can you read me? can you read me?

can you read me?can you read me?

Avoid using both colors with maximum satura:on ⇒ difficult to look?

Using a compliant tool with WCAG 2.0's luminosity contrast algorithm.1.4How to always give enough contrast

⇒ Available at h^p://juicystudio.com/services/luminositycontrastra:o.php

Smoothing used contrast on screens.1.5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

vs vs


Smoothing used contrast on screens.1.5

data from Logoorange in h^p://www.logoorange.com/text-‐color-‐contrasts.php, Image from Flickr user Ben Dodson.


Color contrasts are more intense and sharp on screens ⇒

Because the screens emit light instead of reflecting it, the resulting colors are brighter and more intense.

Avoid simultaneous saturated colors2


NoteBeware of colors in images. Do not compare solely big saturated colored areas.>> look around for images that may have saturated colors (tennis ball), because they influence the final result.

1 - Excessive eyes refocusing causing visual fatigue

look with careful...

Do you remember?

2 - False perception of depth

look carefully...

Inward: colors appear to move backward (blue).

Outward: colors appear to move forward (red).

Why avoid simultaneous saturated colors

Some mediums use saturated colors to catch attention (TV, printed advertising, street billboards, etc.)

>> on a website do you always need to catch a^en:on?

>> how long will people look at the saturated colors?

4 - Saturated colors with same brightness hard to distinguish by impaired people

read? read? read?

read? read? read?

color blinded people may see

3 - Communication mediums.

Why avoid simultaneous saturated colors

Do you remember?

I am very saturated! I have a gradient instead!

image from Flickr user shianghan27.

Using gradients.1

Desaturating your colors.2

How to avoid simultaneous saturated colors


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Avoid pure blue for small text & objects3


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Avoid pure blue for small text & objects3

AlertSome people say that this guideline is not so relevant when applied to computer displays. Because these displays already deal with blurred pixels, the influence of blue text in our visual system will be irrelevant.

Ar:cle from SBFAQ Part 6: Color for Text and Graph Legibility, Is blue bad? from Visual Expert, Human Factors. In h^p://www.visualexpert.com/FAQ/Part6/cfaqPart6.html

Why avoid pure blue for small text & objects

1 - Difficult to obtain a sharp image in retina with pure blue color.



2 - The blue photopigments in the retina are very few.

Re6na

Fovea

>> 2% “blue” on periphery of fovea.

>> 32% “green” on middle of fovea.

>> 64% “red” on middle of fovea.

Do you remember?

Why avoid pure blue for small text & objects

4 - As people get older, sensitivity to blue spectrum decreases.


Color examples from Color Logic for Web Site Design.

3 - The lens absorbs more wavelengths in the blue spectrum than other regions.

older people may see

Do you remember?

Desaturating your blues or using another colors.1

Increasing size of letters or thickness of objects2

How to avoid pure blue for small text & objects

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

Fine Print in blue

Fine Print in blue

image from Flickr user AHMED.

4Did you know...

Why the sky looks blue? “ The daytime sky looks blue because short ligh wavelengths,

which fall at the blue end of the spectrum, are scattered more than long wavelengths.”

data from Sensa:on and Percep:on, Wolfe. Image from Flickr user 瑞士大龙.

“The fact that all the properties of particles are determined by principles closely related to the methods of observation would mean that the basic structures of the material world are determined, ultimately, by the way we look at this world”physicist Fritjof Capra

Document version Revision date Author (s) Changes

2.0 9 nov 2009 Emanuel Fernandes Complete redesign of document to simplify content.

1.0 30 jun 2009 Emanuel Fernandes Ini:al document.

Slides designed by:

[email protected]

November 9, 2009