User Motivation Determines the Best Color Scheme for Your Website(kaikkonendesign.fi)
kaikkonendesign.fi
User Motivation Determines the Best Color Scheme for Your Website
http://kaikkonendesign.fi/user-motivation-determines-the-best-color-scheme-for-your-website/
49 comments
Because of the historical accident of paper being white and ink being dark. The human eye is somewhat better at reading light-on-dark, but most people aren't used to it.
But there's also the historical accident of early computers primarily using light-on-dark displays (I always found amber-on-black mode less harsh on the eyes than green-on-black, personally—but just don't get me started on white-on-blue, bah!), which we then moved away from in favor of dark on light.
(If I had to guess the reason for that historical accident, I'd think it had to do with "white" not being a particularly uniform color on a lot of older CRTs, but one with varying hue and intensity in different regions.)
I find light on dark hard to read, even in low light. If I'm reading on my phone at night and use light-on-dark, the text looks blurrier to me than if I change it to dark-on-light (where "light" is a shade of gray that isn't harsh in a dark room).
(I wonder if dark ink on white paper took off over white ink/paint/whatever on dark paper because most people found it more readable. Anyone know about the history of paper/inks/paints?)
(If I had to guess the reason for that historical accident, I'd think it had to do with "white" not being a particularly uniform color on a lot of older CRTs, but one with varying hue and intensity in different regions.)
I find light on dark hard to read, even in low light. If I'm reading on my phone at night and use light-on-dark, the text looks blurrier to me than if I change it to dark-on-light (where "light" is a shade of gray that isn't harsh in a dark room).
(I wonder if dark ink on white paper took off over white ink/paint/whatever on dark paper because most people found it more readable. Anyone know about the history of paper/inks/paints?)
>If I had to guess the reason for that historical accident, I'd think it had to do with "white" not being a particularly uniform color on a lot of older CRTs, but one with varying hue and intensity in different regions.
also, the earlier monitors flickered more than later ones, and the flicker was more troublesome when the default/background color was light.
also, the earlier monitors flickered more than later ones, and the flicker was more troublesome when the default/background color was light.
I think it's been overly stated in this thread, but it would appear that the majority of the problems with dark-on-white are the brightness, contrast and luminosity of the designs.
W3C apparently knew this was a problem and had provided an algorithm to measure relative contrast/luminosity, which is good to play around and test with: http://www.w3.org/TR/WCAG20/#contrast-ratiodef
W3C apparently knew this was a problem and had provided an algorithm to measure relative contrast/luminosity, which is good to play around and test with: http://www.w3.org/TR/WCAG20/#contrast-ratiodef
I can read a dark-on-light text at normal size (on a retina display) for an hour without feeling my eyes are hurting, but I literally cannot read light-on-dark text more than 10 minutes and have to bump the font size one or two points...
Is there any experimental evidence to back this up? I don't personally find switching black and white to give me any reading advantage.
I get weird lines after reading light-on-dark for a while.
Author: Search for "pleasuraigh".
Author here, thank's for pointing that out. I just put my blog online yesterday morning, and this was an article that I had written back in the summer in HTML markup. Seems like there were some conversion errors to Markdown that I didn't notice.
Erroneous: Research shows that consumers with a utilitarian motivation find a low-arousal environment more pleasuraigh-arousal one.
Fixed: Research shows that consumers with a utilitarian motivation find a low-arousal environment more pleasurable than a high-arousal one.
Erroneous: Research shows that consumers with a utilitarian motivation find a low-arousal environment more pleasuraigh-arousal one.
Fixed: Research shows that consumers with a utilitarian motivation find a low-arousal environment more pleasurable than a high-arousal one.
Utter bullshit. The original background color of websites was #c0c0c0, the same default color grey used in desktop apps. It was a big to-do, switching that default. The reason most sites are blue is because the human eye is better able to distinguish shades of blue. Also, a significant % of people are red/green colorblind.
> The reason most sites are blue is because the human eye is better able to distinguish shades of blue.
Huh? It's shades of yellow/green that we are best able to distinguish. We're not good at blue.
Huh? It's shades of yellow/green that we are best able to distinguish. We're not good at blue.
Yup. Mind, color is _really_ complicated. The math to calculate color spaces is completely non-obvious, the eye's reactions to colors is subtle, and the brain seems to interpret colors in interesting ways. (I remember at work, we needed to figure out why a thing was getting _more_ red as we shifted it into the blue spectrum... turns out that's why they call it ultraviolet.)
I'll refer to a cool demonstration of this in action: http://news.ycombinator.com/item?id=1891753
It's not scientific, but it's certainly telling.
TL;DR: Green is the color we see well.
I'll refer to a cool demonstration of this in action: http://news.ycombinator.com/item?id=1891753
It's not scientific, but it's certainly telling.
TL;DR: Green is the color we see well.
I don't get the point of your comment, nor how it got to the top of the page.
The article gives an evidence-based assessment of the effect of colors on user engagement according to their mindset.
The default color of Netscape 2 has nothing to do with it.
And your eyes suck at blue: http://nfggames.com/games/ntsc/visual.shtm
The article gives an evidence-based assessment of the effect of colors on user engagement according to their mindset.
The default color of Netscape 2 has nothing to do with it.
And your eyes suck at blue: http://nfggames.com/games/ntsc/visual.shtm
I think blue is also a colour that inspires trust across cultures, which is why blue is so prevalent
> The reason most sites are blue is because the human eye is better able to distinguish shades of blue.
Than what other shades? I thought humans were good at shades of green? Anyway, do you have any sources?
Than what other shades? I thought humans were good at shades of green? Anyway, do you have any sources?
16bit RGB graphics modes allocate an extra bit to the green channel, so I think you're right:
http://en.wikipedia.org/wiki/List_of_monochrome_and_RGB_pale...
http://en.wikipedia.org/wiki/List_of_monochrome_and_RGB_pale...
> Why the Web is White
"And what happens if the Twitter mob finds out..."
"And what happens if the Twitter mob finds out..."
It makes me incredibly sad that people are willing to stare straight ahead at a fucking lightbulb (a.k.a. sites with a white background) and destroy their vision.
I do not think there is actually evidence that white instead of grey backgrounds "destroy" your vision.
There's a lot to discuss here. I personally cannot read through light-on-dark digital designs. After a few lines everything blurs. With dark-on-light on the opposite I can read for hours.
Most probably is due to a non-optimal screen both at home and work-place, but I suffer from the same issue even on 2010 iMacs.
But the most pleasant scheme for me (I mean, my eyes) is light-gray-on-dark-gray.
Most probably is due to a non-optimal screen both at home and work-place, but I suffer from the same issue even on 2010 iMacs.
But the most pleasant scheme for me (I mean, my eyes) is light-gray-on-dark-gray.
It's the contrast between the text/content and the background that affects your comfort though. There was an article about how you should never use black for your text on a white bg[0]. I think the points there are rather salient.
In fact the W3C has a good calculator for colour contrast [1], which I think is a good guide for calculating colour contrast when designing sites
[0]http://ianstormtaylor.com/design-tip-never-use-black/ [1]http://www.w3.org/TR/WCAG20/#contrast-ratiodef
In fact the W3C has a good calculator for colour contrast [1], which I think is a good guide for calculating colour contrast when designing sites
[0]http://ianstormtaylor.com/design-tip-never-use-black/ [1]http://www.w3.org/TR/WCAG20/#contrast-ratiodef
I think there are no points in [0] what so ever to support the claim than one should not use black (#000). The author does not argue at all. All he does is present a photo he has taken which does not have black pixels. What the hell is that supposed to prove?
I should redirect you to the interesting discussion happened on Ian's article here on HN.
About eye stress.. that's another story. Could anyone here point us to a scientific paper out there?
About eye stress.. that's another story. Could anyone here point us to a scientific paper out there?
I agree.
"Why the Web is White"
Because it's designed by people who are not using the websites. It's easier to 'sell'.
Same reason AutoCAD is shown with a white background in publicity, but users switch to a dark background the instant they have to use it professionally.
Same thing with a text editor... Emacs default to white, but the first thing I do with a fresh install is to change it to a dark theme.
Same reason AutoCAD is shown with a white background in publicity, but users switch to a dark background the instant they have to use it professionally.
Same thing with a text editor... Emacs default to white, but the first thing I do with a fresh install is to change it to a dark theme.
It doesn't take a rocket scientist to turn down your brightness.
Also, see my reply to DustinCalim's comment.
Also, see my reply to DustinCalim's comment.
see my post
One must take in consideration the environment of their users.
Try to look at a white screen while being in dark place. It hurts.
Try to look at a white screen while being in dark place. It hurts.
I believe that is more the function of brightness and contrast than colour. I mean, other than really dark colours, any colour with high brightness hurts in a dark environment
I don't agree with Hedonism being the driving force behind dark websites. I prefer dark(and spend all day coding with a dark background) because it's easier on my eyes... The idea behind skeuomorphism in webpages mimicking paper has proven itself when the print industry attempted to carry their print practices over to the web and failed. The internet is still very young; I think what we will find over time as more and more people spend more and more time on computers is a departure from paperesque websites to a more functional design that is dark and physiologically friendly(easy on your eyes).
Interestingly enough, the website in the link looks awesome using the Hacker Vision Chrome extension I use which is designed to do just that - it applies a dark theme to all websites so the bright white backgrounds don't destroy your eyes.
Download Hacker Vision at: https://chrome.google.com/webstore/detail/hacker-vision/fomm...
Interestingly enough, the website in the link looks awesome using the Hacker Vision Chrome extension I use which is designed to do just that - it applies a dark theme to all websites so the bright white backgrounds don't destroy your eyes.
Download Hacker Vision at: https://chrome.google.com/webstore/detail/hacker-vision/fomm...
This seems very unnatural. Step outside on a sunny day and tell me we're not built (as a species) to function optimally in bright light.
I'd even go so far as to say that several hundred thousand years of evolution would back me up. Otherwise, why can't we see perfectly in the dark?
EDIT: typo.
I'd even go so far as to say that several hundred thousand years of evolution would back me up. Otherwise, why can't we see perfectly in the dark?
EDIT: typo.
We aren't equipped to see perfectly in light or dark, we have a range. Everyday is sunny here and people wear sunglasses. I'm not disagreeing with you though - I think the difference is that monitors are backlit and things in nature that create light you tend to not look directly at for 8 hours a day.
It's not so much that most of our field of vision should be light or dark as that we have a bias for light=detail/important, dark=background/unimportant.
This has a slightly perverse effect when a computer monitor is placed in a real environment; looking around my environment (sitting in my cubicle at work) my laptop draws my attention like little else because it's so damn bright.
Maybe websites bias towards light backgrounds because it discourages users from getting up and doing something other than browsing.
This has a slightly perverse effect when a computer monitor is placed in a real environment; looking around my environment (sitting in my cubicle at work) my laptop draws my attention like little else because it's so damn bright.
Maybe websites bias towards light backgrounds because it discourages users from getting up and doing something other than browsing.
I have to wonder if the average user of a light-on-dark color scheme simply has their monitor's brightness turned up too high.
I have my brightness turned down pretty low on every display I own, to the point that even a pure white screen can bearably be looked at. I prefer dark-on-light color schemes because I can turn my monitor's brightness down even lower with them, and I don't have to adjust my eyes or monitor when visiting web sites (most of which are dark-on-light). Why bother fighting the entire web with custom CSS to match your text editor when you can make the defaults comfortable to look at?
I have my brightness turned down pretty low on every display I own, to the point that even a pure white screen can bearably be looked at. I prefer dark-on-light color schemes because I can turn my monitor's brightness down even lower with them, and I don't have to adjust my eyes or monitor when visiting web sites (most of which are dark-on-light). Why bother fighting the entire web with custom CSS to match your text editor when you can make the defaults comfortable to look at?
I didn't know about this extension so thank you! If it does Solarized Dark then I'm sold: I'm not a fan when it is too dark, but it's definitely better than the white backgrounds I often see.
Next step: move away from the big paragraphs in small writing... or maybe it's just that I need glasses :)
Next step: move away from the big paragraphs in small writing... or maybe it's just that I need glasses :)
Works better than other alternatives I've tried!
Thank you so much!
Easy solution for Firefox:
http://superuser.com/a/181293
http://superuser.com/a/181293
Love that extension, thanks!
The fight against "default" white seems analogous to Ian Storm Taylor's recommendation to never use black (http://ianstormtaylor.com/design-tip-never-use-black/). I prefer off white (e.g., #f9fafc) because of the same reason I like text color set at #333 — it looks softer, but still almost imperceptibly different from #fff/#000's traditional "paper and ink" aesthetic.
http://www.colorcodehex.com/f9fafc/
http://www.colorcodehex.com/333333/
http://www.colorcodehex.com/f9fafc/
http://www.colorcodehex.com/333333/
I believe in using a black background for talk slides.
Example: http://new.livestream.com/gigaom/gigaomroadmap/videos/579403...
I would prefer dark gray from an aesthetic perspective. But the reason I choose black is simple:
Often, the LCD projector is not pointed straight at the backdrop or maximized correctly. If your slide background is not black, there is a perceptible margin, and your slide area is shaped like a trapezoid, not a rectangle. Using a black slide background minimizes this margin, and makes it look like your slides correctly fill the backdrop.
Just my two cents. I'm curious if people feel strongly against this approach.
Example: http://new.livestream.com/gigaom/gigaomroadmap/videos/579403...
I would prefer dark gray from an aesthetic perspective. But the reason I choose black is simple:
Often, the LCD projector is not pointed straight at the backdrop or maximized correctly. If your slide background is not black, there is a perceptible margin, and your slide area is shaped like a trapezoid, not a rectangle. Using a black slide background minimizes this margin, and makes it look like your slides correctly fill the backdrop.
Just my two cents. I'm curious if people feel strongly against this approach.
White on black is very hard to see in a brightly lit room. Many programming talks like that color scheme and it just doesn't work with crappy projectors.
I force all sites to display as something like #E0 on #28. I find it far easier on my eyes. I use a Firefox extension that lets me switch back to the original scheme with a shortcut for the few sites that don't function when you override the colours.
I wonder if these color schemes are chosen primarily because it's what's traditional and expected; we don't like to surprise our users/customers as it may induce negative feelings, including a lack of trust. For example, we expect a fashion website to look different to a web app, and when something is discordant with our preconceived notions we trust it less. I think that typically designers intuitively go for a less-surprising aesthetic rather than an atypical one whose aesthetic induces a degree of trust-eroding cognitive dissonance.
The one utilitarian site I can think of that breaks the author's pattern is Wufoo; bold colors, utilitarian purpose. They seem to be quite successful too. Having said that, a single counterexample doesn't diminish the validity of the author's central thesis, but it might just be one notch in the larger key.
The one utilitarian site I can think of that breaks the author's pattern is Wufoo; bold colors, utilitarian purpose. They seem to be quite successful too. Having said that, a single counterexample doesn't diminish the validity of the author's central thesis, but it might just be one notch in the larger key.
I don't disagree that designers choose a less threatening aesthetics that incorporates familiarity. Pandering to the lowest common denominator eventually leads to the most familiar of features - GOOG is just a box and two buttons, for example.
I would also argue that the Formerly-Known-As-MetroUI pattern is also rather utilitarian. It was designed to have a low information density, but highly relevant information - that is to say, show less, but show higher quality information.
Too bad people have constantly misused those great ideas in patterns tho
I would also argue that the Formerly-Known-As-MetroUI pattern is also rather utilitarian. It was designed to have a low information density, but highly relevant information - that is to say, show less, but show higher quality information.
Too bad people have constantly misused those great ideas in patterns tho