color - understand to better use
Post on 19-May-2015
2.209 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Color can be created by two means
Subtractive color
Color is made from subtrac2ng wavelengths of light.
Examples: fruits, clothes, human skin, etc.
reflected light
Our eyes either receive:
Color can be created by two means
Primary colorsreflected light
Cyan, yellow and magenta.Color model: CYMK.
Our eyes either receive:
Color can be created by two means
Additive color
Color is made from mixing wavelengths of light.
Examples: TV, computer displays, sun light, etc.
direct light
Our eyes either receive:
Color can be created by two means
Primary colors direct light
Red, green, blue.Color model: RBG.
Our eyes either receive:
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
Saturation measures the purity of the most dominant wavelengths:
Fundamentally, color is the perception of light rays wavelengths in the electromagnetic visible spectrum.
Color properties, in a more scientific way
data and images from CambridgeinColour.com.
Hue
Saturation
Color properties, in a more scientific way
data and images from CambridgeinColour.com.
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
+ —
Color properties, in a more practical way
Differences in intensity of light (darker vs lighter).>> bright red vs dim red.
Brightness (value)
dark vs light
+ —
Color properties, in a more practical way
Hue
Brightness (value)
Saturation
pure vs muted
dark vs light
+ —
+ —
Color properties, in a more practical way
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.
Purples, blues, aquas, and greens.
Color movement: inward
Cool colors
Color temperature
data and images from ColorLab, h^p://colorlab.webespacios.com.
Color temperature
Warm colors Cool colors
data and images from ColorLab, h^p://colorlab.webespacios.com.
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.
Human eye structure.
Human eye structure.
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.
data from The essen:al guide to user interface design.
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
Human eye structure.
Re6na
Fovea
Human eye structure.
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.
Image from CambridgeinColour.com.
Color sensitivity in the periphery.4.2
Fovea
Re6na
Center of fovea:our eyes work with trichromatic color.
Color sensitivity in the periphery.4.2
Fovea
Re6na
Around fovea: we are red-green blind.
>> Reds and greens tends to look yellow.
>> Violets and blues tends to look blue...
Color sensitivity in the periphery.4.2
Fovea
Re6na
Extreme periphery:we are insensible to color.
Color sensitivity in the periphery.4.2
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.
Image from CambridgeinColour.com.
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.
Image from CambridgeinColour.com.
green red
Opponent channels:
Image from CambridgeinColour.com.
blue yellow
Opponent channels:
Image from CambridgeinColour.com.
black white
Opponent channels:Brightness
Image from CambridgeinColour.com.
black white
Opponent channels:Brightness
Image from CambridgeinColour.com.
black white
Opponent channels:Brightness
Image from CambridgeinColour.com.
Brightness is derived from green and red waves.5.1cone cells peak sensitivity to light brightness
black whiteBrightness
Image from CambridgeinColour.com.
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.
data from The essen:al guide to user interface design.
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 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.
WHAT COLOR DO YOU SEE? YELLOW
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.
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?
TIME -‐ image from Flickr user Tony the Misfit.
COKE -‐ image from Flickr user xiaming.
SCREENS -‐ image from Flickr user nouQraz.
COKE -‐ image from Flickr user xiaming.
YES
ComputerHave a LONGER exposition time.
Other mediums(TV, printouts, magazines, etc.)
Have a SMALLER exposition time.⇒
⇒
SCREENS -‐ image from Flickr user nouQraz.
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 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.
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.
TIME -‐ image from Flickr user Tony the Misfit.
SCREENS -‐ image from Flickr user nouQraz.
COKE -‐ image from Flickr user xiaming.
TIME -‐ image from Flickr user Tony the Misfit.
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
DO NOT SEARCH AT ALL
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
DO NOT SEARCH AT ALL
Bugs Bunny
10 de Abril de 2009
Chiwawa
4 de Maio de 2009
SECOND PAGESECOND PAGE
DO NOT SEARCH AT ALL
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
Why always give enough contrast
Bad contrast makes harder for the eyes to focus (excess of accommodation) causing visual fatigue.
Contrast effects ⇒
Image from Flickr user Shadab.
Why always give enough contrast
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
How to always give enough contrast
Avoid using both colors with maximum satura:on ⇒ difficult to look?
Using natural opponent channels colors.1.2Opponent channels colors
How to always give enough contrast
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. 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
How to always give enough contrast
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.
How to always give enough contrast
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
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.
Avoid simultaneous saturated colors2
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
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.
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
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.
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
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.
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.
look with careful...
look with careful...
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.
data from The essen:al guide to user interface design.
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:
emanuel.m.fernandes@gmail.com
November 9, 2009
top related