homepage Welcome to WebmasterWorld Guest from 54.166.39.179
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
What are the web colors most comfortable to users?
foxfox

5+ Year Member



 
Msg#: 3598678 posted 5:36 pm on Mar 12, 2008 (gmt 0)

Are there any guidelines for web colors which is the most confortable to users sitting in front of a computer?

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3598678 posted 8:49 pm on Mar 14, 2008 (gmt 0)

Since no one's answered this, the short answer really is "no" because color is a subjective experience. It's going to depend on your target market. Once you know your target market, you can review psychological reactions to colors and come up with what might be "best." But you could still be wrong. :-)

fside

5+ Year Member



 
Msg#: 3598678 posted 1:30 am on Mar 15, 2008 (gmt 0)

> any guidelines <

I can only imagine - legibility.

Here you have dark blue. bluish purple, light gray, white. It's unobtrusive. I might prefer an dull white or beige textured background, in addition (the sharpness can help make the text seem 'crisper'). You can have 'negative' sites, with black and gray under white lettering. I don't know how quickly one might get tired of those, however.

There are natural color combinations, too. Look in the garden, or the coloring of the bugs, etc. Try to match those colors and hopefully various viewers will have their monitors set about the same as you do - which might be assuming a lot.

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3598678 posted 3:13 am on Mar 15, 2008 (gmt 0)

Got to agree with fside on legibility. It's crucial. I lean heavily toward light-colored and light-textured background-images with color: #000

Also agree about complementary color combinations; primarily with background-images:, because I have to have a really good reason to stray from black text.

If there is much text, I stay with very readable fonts; Arial, Verdana - the usual suspects. The fancy fonts aren't usually user friendly for more than a few sentences at most. Save the fancy stuff for <h1>, <h2>, graphics - short stuff that will benefit from a font stands out a bit, but isn't overbearing in an unreadable quantity.

I know that you've specifically asked about colors, and the short answer is dark text on a light background as a winning formula (for my sites).

As long as I'm onto fonts, I like to use a higher than average font-size: than you will find almost anywhere, but it works for us. I start with font-size: 100% in html, body - and then bump it up in the <div>s. 1.1em minimum to as much as 1.35em depending on what it's for and how much there is. 1) Higher and higher screen resolutions make font-sizes smaller and smaller on the screen. (Especially with sites still working with px and such, and there are tons of them.). 2) There are a ton of older users out there, and they reward sites that they can read without a hassle!

line-height: is also very useful. Bump it up and get some extra leading between the lines. This can also add tremendously to legibility.

Also agree about complementary color combinations; primarily with background-images:, because I have to have a really good reason to stray from black text.

If there is much text, I stay with very readable fonts; Arial, Verdana - the usual suspects. The fancy fonts aren't usually user friendly for more than a few sentences at most. Save the fancy stuff for <h1>, <h2>, graphics - short stuff that will benefit from a font stands out a bit, but isn't overbearing in an unreadable quantity.

I know that you've specifically asked about colors, and the short answer is dark text on a light background as a winning formula (for my sites). But you've also prompted 'guidelines' and 'most comfortable'. For this, color is but one consideration. It's about overall usability and user experience. If you've got a good bit of text, a lot to say, break that text up with relevant images. In fact, the images don't even have to be spectacular. For most articles, the key value of adding additional images is not to examplify the text (though important), but to break the text up and make it more readable, more user friendly; the eye can come and go, the reading can start and stop - and it's easy to find your place because the eye has probably keyed on an image. As a general rule, people do not read books or even long articles online. But, float images left and right here and there among the paragraphs, and people will eat it up.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3598678 posted 3:43 pm on Mar 15, 2008 (gmt 0)

Since this has moved away from color and into legibility, it's time to link to one of my favorite tools:

Access Keys [accesskeys.org]

Checks your pages for relative contrasts and reports critical problems.

benevolent001

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3598678 posted 3:59 pm on Mar 15, 2008 (gmt 0)

Hi

Trust me there is no limit to our creativity as webmasters , we can use any of colors OPTIMALLY to make our users feel comfortable.

Just for you to start off here is quick tip

Just Google for color wheel , if you are choosing two colors for your website , keep any two colors which are diagonally at 180 degrees from each other.

If you want to choose three colors for website , choose three colors which are at angle of 60 degree mutually from each other.

If you this gives you some idea.

Keep smiling and Happy Webbing
Jamie

encyclo

WebmasterWorld Senior Member encyclo us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3598678 posted 5:51 pm on Mar 15, 2008 (gmt 0)

> Access Keys

That's a really useful tool, thanks for the suggestion!

At the risk of repeating what others have said, you need to be careful of contrast, conflicting colors (think about red/green colorblindness which is very common), and make sure the design and color scheme doesn't overshadow the most important aspect - the content of the page itself.

MarkFilipak

5+ Year Member



 
Msg#: 3598678 posted 10:23 pm on Mar 16, 2008 (gmt 0)

From [w3.org...]
Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

The rage [sic] for color brightness difference is 125. The range for color difference is 500.

Comments:
The first formula is not brightness. It is luminance.
The standard formula for luminance is: luma = 30% red + 59% green + 11% blue. This is a little easier to remember than what the W3C supplies and is accurate to 8 parts in 1000 (i.e., 0.8%).

I have real problems with the second formula. The values for red, green, and blue are absolute but the datatype is not specified. Are they integers? longs? floats? Of course, this has a huge implication when it is stated that "The [minimum] range for color difference is 500". Without any clue regarding the span of color value, the number "500" is meaningless. What is needed is the formula for color vector (using the familiar color wheel). A relative difference in color angle would yield something more meaningful than "500". But the color angle would not, by itself, provide a comprehensive metric.

We have about 4 times the color discrimination in orange as we do in blue -- we can 'see' a difference in two orange hues that are separated by a color angle of only about one-quarter of the minimum angle at which we can 'see' a difference between two blue hues.

So, a weighted color angle is what's needed. That's what the Munsell color system is all about.

To the Munsell color space, we must factor in the various flavors of color blindness (actually, hue discrimination deficit).

In the final determination, an algorithmic determination of readability must compare two points in a modified, 3-dimensional Munsell color space -- modified to account for hue discrimination deficit. Until the engineers at the W3C start talking to people outside their group, and until they incorporate well known principles worked out by the television industry 70 years ago, this issue will remain subjective and is not to be taken seriously. In other words, if you use the W3C recommendations, your mileage may vary.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3598678 posted 3:00 pm on Mar 17, 2008 (gmt 0)

Oh my. so there IS at least one other person out there who knows what the Munsell color system is. :-)

I think the key word here is recommendation. In our ever widening search for quick answers to complex problems, color theory is far too deep for the average user. These recommendations outline a foundation that will keep most developers out of trouble, if they listen.

Example, I threw a URL at the Access Keys site - the contrast is recommended at 500. The links came in at 460. Recommendation noted, but close enough. :-) If it can get those Web 2.0 guys and gals to stop putting 70% gray type on a 10% color background, it will be doing well.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved