-
Website
http://www.gomediazine.com/ -
Original page
http://www.gomediazine.com/design-tip/rule-three-contrast-contrast-contrast/ -
Subscribe
All Comments -
Community
-
-
Top Commenters
-
Popular Threads
All Comments
Really clear and simple explanation of an important issue.
Keep it up, it's appreciated, even over here in Scotland!
By the way, I hope that your Indians beat the Sox like they beat my Yankees!
Also, keep up the good work on the Vector Packs! Cant wait til set 8 comes out!
Great information, and I love the joke !
Currently it is purple, yellow and red, yuk!
"Contrast is the value difference between the colors on your design."
It's also worth mentioning that contrast can be applied to font styles, element sizes, textures, etc. and not just colors.
Am I the only one to notice the irony here?
Practise what you preach.
Just one thing - while you're at it, why not give the text on this site some more darkness? Right now, it seems washed out, and is horrible.
Another way to quickly switch to greyscale in photoshop is to add an Hue/saturation adjustment layer above your layers and show/hide it as you need to test. just slide the saturation down and it should be in greyscale if i'm not mistaken.
Ps just a thought, the comment boxes don't stand out much and it's a little tricky just to guess where they are!
Good write-up though.
Much easier.
Good tutorial, thanks!
Heck... I didn't even read them. Stupid website.
Hehe.
Where was this advice when "Wired" got off the ground? Lime-green text on fluorescent orange... ugh!
Why not black (or a much darker gray) for the body text?
I would urge you guys to consider using a font that gives more contrast between the text of your website and the background. The font seems to light for the background it sits on, not enough contrast.
However, I must point out that the contrast of the text on this page with the background is poor. The light taupe on white background is a bit difficult to read and certainly does not stand out.
I am pretty proud of the following design for the use of primary colors and light backgrounds. I did it in Paint which is not so easy Adobe.
Design For Real People.
http://flickr.com/photos/graealex/1542130749/
I think you should have added something about Accessible design - to use the "right" values of colors and contrast so people with sight disabilities or color blind people will be able to see your page.
I agree that understanding contrast in terms of light value is extremely important. Not only for legibility but also to make important elements pop from the page. But you can accomplish the same goal by creating contrast in saturation or scale.
I also think we should be careful about how we think of contrast. In many situations, high contrast is beneficial, but its not a universal rule. There are times when low contrast can be beneficial.
The Author simply uses a graphic and some illegible low contrast text to hint at his 'availability' via the none too subtle reference to e-Harmony.
Compounds the inanity further with a somewhat inexpert reference to PhotoShop techniques!
Not only would I not take design advice from this bozo, I wouldnt even take WATER from him if I were on FIRE!
It may be a by-product of the monitors we're on - we have rather pricey monitors with strong contrast settings, so this copy looks perfectly clear to everyone in our office. But we admit, this is NOT an example of optimal contrast.
But it looks cool. And sometimes designers will intentionally make their designs look cool and sacrifice some legibility for style. It's all part of the subversive culture that Go Media is knee-deep in. For instance: grunge. Why would anyone distress their letter and make them all grungy? That obviously makes them harder to read! Why? Because it adds style and communicates: "We're subversive, we're cool." This is also true of graffiti. It is text, but it's often times so stylized that you can't read it. Once again, this is a scenario where the graffiti artists are choosing style over clarity.
Now, I don't mean to suggest that the color choices on our blog were made in order to make it hard for anyone to read. Of course not. But it is a border-line choice we made. And it's very possible that it is hard to read on some monitors. So, we're sorry.
One other thing I would like to clarify is the E-harmony spot at the end of the article: This is NOT an ad! We did not get paid for using E-harmony as an example. And YES, I AM an E-Harmony member. I'm a nerdy designer in search of love. Sue me. Or send me your picture! I like long walks on the beach and cuddling in front of a fire place.
How about you do text a little closer to black there buddy so I don’t have to get so close to the screen to see it.
NEAT
| | | | | | | | |
Great use of examples.
Couldn't the designers of the examples you highlight use the same exact argument as you? "Well the 'Cleveland Rocks' sign looked good in our office. Its your problem."
It is more than a little irresponsible and you should know better.
Fail.
You know, we are all on Dell monitors over here. Perhaps Dell monitors have more contrast than everyone else's.
As for monitors, maybe you do have your contrast turned up. But if you really do want to be professional then you buy a proper monitor, and most importantly *calibrate* it with external hardware so you get an accurate view.
"It may be a by-product of the monitors we’re on - we have rather pricey monitors with strong contrast settings, so this copy looks perfectly clear to everyone in our office. But we admit, this is NOT an example of optimal contrast"
"You know, we are all on Dell monitors over here."
I don't know if I would classify Dell monitors as pricey. You didn't really have to make that statement either, that made you look snobbish. Maybe, you have a problem of admitting that you made a bad design choice without giving an excuse. FYI, I have a Dell Ultrasharp and it hurts my eyes to read this article so I didn't.
Here is something for you to consider also:
http://flickr.com/photos/graealex/1542130749/
The right portion is what is on the site now, left is the modified version of it. Enjoy.
The flickr photo definitely shows what more contrast does to that particular section in the sidebar, but by increasing the contrast to what shows in the "improved" version, wouldn't that draw attention away from the articles or the intended focus of the page?
I mean, not everything has to be black and white. And certainly rules are made to be broken. This post is simply an exercise in the often overlooked element of contrast. Some people here act like contrast never existed until this article was written.
And the Dell monitor's that Go Media uses are $600 a piece and in fact have less contrast than my $600 LG Monitor I have at home. That's not snobbish, it's just what it costs to have a widescreen LCD monitor.
Anyway, it doesn't matter what I say here, because apparently nobody can read it! Hah, oh the irony.
THANKS! I really needed this article and it was a nice read, writen and visually very good to understand! I have NO idea what als those people above me are talking about because I can read it always, on my laptop, on my very old pc(just checked), and on all the computers on school(which can't be that expensive I still live in the Netherlands) so they are talking *$#@*!%$#
But what I think is Ironicly(spelling?) that most of your articles get like under 10 comments maybe a little more then 20 sometimes but, this one already has 99!! So I think there are 2 reasons, a lot of people only like to reply when they see something weird and want to kick you in the face but only start doing this when someone else starts OR some retard rival of your company thought it would be a nice idea to post things like 80 times! But in my opinion your site is very easy to read(not to high contrast, like black on white) and you guys just rock!
"Foreground:#909085 Background:#F9F8EC
"Fail (The contrast ratio is: 2.98)
"Text or diagrams and their background must have a luminosity contrast ratio of at least 5:1 for level 2 conformance to guideline 1.4,and text or diagrams and their background must have a luminosity contrast ratio of at least 10:1 for level 3 conformance to guideline 1.4."
This program (CCA) doesn't care about the quality of the monitor used, just whether there's enough contrast.
This topic should be part of all web design training. I'm sure it's not the norm, but at the last big corporation I worked for (in-house), the higher the level of employee, the less informed decisions they were able to make about web design or development.
I think the difference in perspectives here is coming from a different definition of design. You believe that design = making it look good, I believe that design = making it work for people.Usability and content and user experience are all part of good design, and you need feedback to do that well.
Irony.
very helpful hints.
Great points though, thanks ;)
And no, we aren't changing the contrast on the site, because the majority of our readers have never complained. It's only the bandwagon comments such as yourself that complain because everyone else on this post is.
Remember, don't cater to the 10% - cater to the 90%.
Consider me part of the exceptional 10% that actually gives a damn.
I for one must say that I stand by our level of contrast on this blog. I can read it fine and I think it looks great!
But please keep the feedback coming!
By setting a bad example, by practicing bad design, you and all the other users of light text on light background drive away a helluva lot more users and viewers than you can ever know. For the most part, when trying to read text like this, I have to increase the font size drastically, which makes me never want to return to the site.
You know that light on light is whack because none of the properly designed commercial sites that I depend upon for a living ever exhibit this annoying impediment to readability and usability: PayPal, eBay, Amazon, Gemm, Discogs, none of these sights that are serious about generating revenue would be stupid enough to alienate potential users and thus income.
I have declining vision (I'm 54) AND floaters, and I'm grateful that I have a forum to tell you why your design sucks...in practice.
The only reason I have any desire to return to this site and read any more comments is because I'm hoping some programming geeks will maybe create a Firefox plug-in that increases the contrast and readability of poorly displayed text like this.
BTW, this web "designer" says "It looks cool".
Nope, sorry. It looks ugly:
Functional is beautiful.
Easily readable = cool.
Pretty but useless = NOT cool.
(Sorry, one more thing... I'm not a designer, but common sense tells me that a competent webmaster would check the appearance and rendering of pages on numerous DIFFERENT displays, operating systems and browsers.)
agree totally to your point and I myself try to play around with contrast with the help of colors and white space - works for me
but a trick I use in photoshop to check my value is create a Black and White adjustment layer at the top of my layer stack, put all the sliders at 50% and that gives me a pretty accurate idea of what my values are and keeps me from having to flatten, desaturate and undo those steps. plus i can keep it there and turn it off and on as i like.
just chiming in.
You have a very cool blog here… I loved the content very much and It inspires the readers who has that great desire to lead a better and happier life.
Now the text is #51514B instead of #909085.
I guess Bill no longer stands by his contrast. :)
Thank you for taking the time to track the font color of our proof lab. :)
I like knowing that Go Media is so important in people's lives that they're keeping track of these little details.
Good job!
Great article!
Nice, simple read but concise and informative simultaneously.
did you know when you grayscale a color image in photoshop, it isnt necessarily a good basis for showing how we view the contrast when it is in color?
the reason for it is, if you take a warm color like red, warm colors have a tendency to pop out. yellows/oranges/reds etc.
cool colors recede.
but when you grayscale that data, unless you compensate, you lose that intensity. i dont know why... thats why theres plugins you can specifically buy to convert color photos into grayscale/b&W.
all they really do is boost the white in the warm colors so when the image is grayscaled, it does not lose its intensity.
i learned this from making base white for tshirt printing screens.
lighter colors need almost a thick white underbase so they dont get dulled once they hit a dark shirt. and while making base i noticed this... i suppose phenomenon.
try it out. its neat.
take a screen of blocks of bright red/yellow/orange and take some light blues/greens etc. once you grayscale, they will all muddy down to a midtone grey.
BLABLHABLAH. i thought about making a tut on the concept, but i think in general, its not tremendously useful.
:D