color and text. color blindness red green blue united states results:
Post on 16-Jan-2016
221 Views
Preview:
TRANSCRIPT
Color And Text
Color Blindness
• Red
• Green
• Blue
United States Results:
http://www.diacenter.org/km/usa/favcol.html
Psychology of Color
•Red
Raises blood pressure
Stimulates aggressive behavior
Stimulates appetite
Encourages conversation
Psychology of Color
•Blue: Lowers blood pressure Calming effect Provides sense of security Appetite suppressant
Psychology of Color
Green Easiest color for the eye to
focus on for long periods of time Soothes pain Strength Safety
Psychology of Color
Orange Stimulates appetite Happiness Confident Adventure Slight elevation in Blood
Pressure
Psychology of Color
•Yellow Satisfying Optimistic Wisdom Not to be trusted – Western
Cultures
Color wheel according to Michel-Eugène Chevreul. Adjacent colors should all show the same difference to each other.
Triadic color scheme
• Pros: Offers high contrast while retaining harmony.
• Cons: Complementary scheme. • Tips:
– Choose one color to be used in larger amounts than others.
– If the colors look gaudy, try to subdue them.
Color wheel according to Ewald Hering.
Tetradic Color Scheme
• Pros: The tetradic scheme offers more color variety than any other scheme.
• Cons: This scheme is the hardest scheme to balance.
• Tips:– If the scheme looks unbalanced, try to
subdue one or more colors.– Avoid using primary colors in equal amounts.
http://www.toledo-bend.com/colorblind/Ishihara.html
Issues of ColorText
Text
Text
Text
http://www.colormatters.com/
Red/Green
Yellow-/Blue
Black/White
Blue/Green
Text
Text
Text
Text
Color Design Remedies
1. Exaggerate differences between foreground
and background colors
2. Avoid using colors of similar lightness
adjacent to one another
3. Design for maximum contrast Test your pages by printing in black and white.
<html><head>
<title>Data</title></head><body> This is a paragraph. Copy and paste this paragraph into your document three times. Thiswill allow you to work with the tags displayed on theprevious screen. Good luck!!!<!--This text will not appear within the window-->Jetaway Travel
</body></html>
Opening Tag Closing Tag Purpose _________________________________________________ <p> </p> Marks the end of a
paragraph -- doublespacing
<br> (closing Single space -- tag not used) carriage return
<blockquote> </blockquote> Indented paragraph
<html><head><title>my title</title></head><body> <!--Main Body--><p>Jetaway Travel is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be!</p>
Call now for special pricing! <br>
1-800-555-1234</body></html>
<html><head><title>my title</title></head><body> <!--Main Body--><blockquote> Jetaway Travel is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be!</blockquote>
Call now for special pricing! <p>
1-800-555-1234</body></html>
<html><head><title>my title</title></head><body> <!--Main Body--><p><h1>Jetaway Travel </h1>is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! </p>
Call now for special pricing! <br>
1-800-555-1234</body></html>
Opening Tag Closing Tag Purpose _________________________________________________ <h1> </h1> Largest Size Heading
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> Smallest Size Heading
Heading Font Size
Text Alignment
Opening Closing Purpose Tag Tag_________________________________________________ <div align=“alignment> </div> Left, Center, Middle,
and Right
Opening Tag Closing Tag Purpose _________________________________________________ <b> </b> Bold
<strong> </strong > Bold
Opening Tag Closing Tag Purpose _________________________________________________ <i> </i> Italics
<em> </em> Italics
<cite> </cite> Italics
<address> </address> Italics with line breaks
Opening Tag Closing Tag Purpose _________________________________________________ <strike> </strike> TEXT
<u> </u> UNDERLINE
<blink> </blink> MonzillaBLINKING
<sub> </sub> SUBSCRIPT
<code> </code> FIXED WIDTHFONT
<HTML><HEAD><TITLE>My title</TITLE></HEAD><BODY> <!--Main Body--><p><i><b>Jetaway Travel</b></i>is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! </p>Call now for special pricing! <br>1-800-555-1234</BODY></HTML>
Space Maintaining Tags
• <br> - line break
• <pre> - preformatted (registrar and shows carriage returns)
• <p></p> - paragraph
• <ul></ul> - indent
• - non-breaking space
Text Size
Opening Closing Purpose Tag Tag_________________________________________________ <font size=“#”> </font> Relative to
default text-2 to +4
<big> </big>
<small> </small>
<font>
<font size>Absolute value 1 2 3 4 5 6 7
Relative value -2 -1 - +1 +2 +3 +4
Advantage - control over font size
Disadvantage - overrides viewer wants and needs
<html><head><title>my title</title></head><body> <!--Main Body--><p><i><b> Jetaway Travel</b></i>is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! </p>Call now for special pricing! <br>1-800-555-1234<!--Copyright footer--><p><font size=“-1”>Thesepages are copyright 2000 by Jetaway Travel, Inc.</font></body></html>
Name of Color Attributes
Opening Closing Purpose Tag Tag_________________________________________________ <font color=“name”> </font> State
Color<font color=“#hex”> </font>
Colored Text
HEX Color HEX Color _________________________________________________ FFFFFF White 008000 Green000000 Black 00FF00 LimeC0C0C0 Silver FFFF00 Yellow808080 Grey 808000 OliveFF0000 Red 000080 Navy800000 Maroon 0000FF Blue800080 Purple 008080 TealFF00FF Fuchsia 00FFFF Aquahttp://www.w3schools.com/css/css_colornames.asp
<html><head><title>my title</title></head><body> <!--Main Body--><p><i><b>Jetaway Travel</b></i>is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! </p><i> Call now for <font color=“red”>special</FONT> pricing!</i><br>1-800-555-1234<!--Copyright footer--><p><font size=“-1”>Thesepages are copyright 2000 by Jetaway Trove, Inc.</font></body></html>
<i>call now for <font face="arial,helvetica" size=2>
<font color=“red”>special</font> </font> pricing!</i><br>
Fonts• Avoid decorative
Fonts• Avoid decorative
B
Special Characters
Symbol Example HTM Code _________________________________________________ Copyright c © or ©
Trademark TM ™
Registered r ®Trademark
Non-breaking @ Space
<html><head><title>my title</title></head><body> <!--Main Body--><p><i><b>Jetaway Travel</b></i>is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! </p><i> Call now for <font color=“red”>special</font> pricing!</i><br>1-800-555-1234<!--Copyright footer--><p><font size=“-1”>Thesepages are copyright © 2000 by Jetaway Trove, Inc.</font></body></html>
Optimal Line Length
• Min 3.6 inches
• Max 4 inches– Standard is base on normal size font (12) – CSS pix 14-16
<html>
<head>
<script>
function changeFontSize(element,step)
{
step = parseInt(step,10);
var el = document.getElementById(element);
var curFont = parseInt(el.style.fontSize,10);
el.style.fontSize = (curFont+step) + 'px';
return;
}
</script>
</head>
<body>
<p>
<a href="javascript:void(0);" onclick="changeFontSize('content','2');">Increase font</a>
<a href="javascript:void(0);" onclick="changeFontSize('content',-2);">Decrease font</a>
</p>
<p id="content" style="font-size:12px;">
My name is Sherlock Holmes. It is my business to know what other people don't know.
</p>
</body>
</html>
http://www.vijayjoshi.org/2009/04/02/changing-font-size-on-a-page-with-javascript-for-better-user-experience/
* WWW References:
Dutton, Frank. “Ishihara Test for Color Blindness” < http://www.toledo-bend.com/colorblind/Ishihara.asp > (8, Aug. 2009).
“Factors influencing the design and layout of manuals and other published material.” <http://www.rightwords.co.nz/layout.html> (4, Feb. 2007).
Georgia Tech Research Corporation.” GVU's 10th WWW User Survey.”<http://www.gvu.gatech.edu/user_surveys/survey-1998-10/>
(5, Dec. 2004).
“Komar & Melamid: The Most Wanted Paintings on the Web.”<http://www.diacenter.org/km/usa/favcol.html >
(21, June 2009).
top related