Part Three of Seven Easy Principles to Becoming a Master Designer.
Good contrast in your design goes hand-in-hand with your color selections. Contrast is the value difference between the colors on your design. Value is how bright or dark the color (ink) is. Ever see a blank white canvas and as a joke someone says: “Hey – it’s a white cow in a snow storm!” This is an example of no contrast. White on white is no contrast – you can’t see anything.
Elementary right? I mean what kind of stupid tutorial is this? I’m explaining that the piece I’m designing needs to be visible?? This is a retarded concept for a tutorial right?
Wrong.
Because unfortunately, I see lots of problems with designer’s contrast all the time. Not only that, but contrast, when used properly can be an important tool.
Here is one big mistake I see frequently: Designers use color difference to produce contrast instead of value difference. For instance… a medium value blue sitting on top of a medium value red produces some contrast. You CAN see the difference between the two. But when you have two colors together of the same value – it produces what is known as “vibrating.” You’ll notice that at the line where the blue and red meet your eye seems to oscillate back and forth between the two. It almost feels like the text is pulsing.
If your goal is to produce something really vibrant - you can use this technique. But it’s hard on the eyes and most people will find it annoying. Here is another example of the same design using different colors that have more contrast:
This second one is obviously much easier on the eyes.
A quick way to evaluate your design to see if there is sufficient contrast is to convert the entire thing to grey scale momentarily and see if the design still looks clear and easy to read. In Illustrator you do this by selecting your design, and select: Edit>Edit Colors>Convert to Grayscale. In Photoshop you’ll need to flatten your work then you can select: Image>Adjustments>Desaturate. This will convert it to Grayscale.
In either case, you’ll want to undo this action once you’ve had a chance to see how your design looks put to this test.
Here is a sample of the same design –one with good contrast, one with bad contrast. And just under each one is how they both look in grayscale.
You can clearly see how much easier it is to read the text in the design on the left, particularly when it’s converted to grayscale. The design on the right uses less contrast and more color difference to define the shapes.
One question I get all the time is: “what opacity setting should I use for a background water mark?” I think a good watermark background should be between 10%-15% opaque. Once again – this is all about maintaining contrast in your design. If the background is light – then the watermark should obviously also be fairly light and vice versa. Here is an example of a good and bad watermark:
The last little thing I want to note about contrast is how it can be used as a tool. If, for instance, you have a need to direct your audience’s attention to something specific on your design – you can accomplish it with contrast! You might keep the entire design relatively light and then make the one spot you want your audience to focus on dark. Here is an example of a well designed landing page:
This is a page on E-Harmony’s tour section of their website. While they want to give people a “tour,” what they REALLY want to do is get people to actually sign-up. So, when you look at this page - what is the biggest darkest thing on the page? It’s a non-clickable picture of a girl and the “Get Started Now” button. Obviously they want you to click on the “Get Started Now” button. Look at how much bigger and darker the “Get Started Now” button is compared to the “Next Step” button. The Next Step button is what someone on the tour SHOULD be pushing to continue the tour - but how tempting is that Get Started Now button? And why? Why does it jump off the page at you? Simple - CONTRAST!
This concludes a fairly basic but fundamentally critical lesson in design. Thanks for taking the time to read this. Four more basics to go. After that I promise I’ll teach you how to draw!
October 10th, 2007 at 1:05 pm
Once again a nice tutorial/lesson Bill.
Really clear and simple explanation of an important issue.
Keep it up, it’s appreciated, even over here in Scotland!
October 10th, 2007 at 6:33 pm
I love all your tutorials!! They help me out on a daily basis! Keep ‘em comin’!!
October 10th, 2007 at 7:38 pm
I definitely find that if I design in black and white first then I can achieve the contrast that I want when I decide on my colors. I think that contrast is something that is overlooked in design. Contrast is something that every artist should master, no matter if your medium is a canvas or Illustrator/Photoshop.
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!
October 10th, 2007 at 11:23 pm
Here in US too, i follow every tutorial and this one was awesome. Thanks for that, hoping be here for the drawing one !!!
October 11th, 2007 at 1:03 am
Now I think I understand more about color… Thanks…
October 11th, 2007 at 3:24 am
Awesome post !
Great information, and I love the joke !
October 11th, 2007 at 4:46 am
I often find a lot of people I work with struggling with this exact concept, I am desperately trying to persuade a large company to change their emailer to subtler tones.
Currently it is purple, yellow and red, yuk!
October 11th, 2007 at 7:24 am
Good article.
“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.
October 11th, 2007 at 7:25 am
Light grey text on a white background.
Am I the only one to notice the irony here?
October 11th, 2007 at 7:26 am
I find it somewhat ironic that you preach high-contrast yet publish in light-gray-on-white text. My eyes are hurting now, thanks.
October 11th, 2007 at 7:26 am
Nice article. It’s too bad so many “professional” designers out there forget this basic rule. So much time is spent making the content SEO-friendly and dynamic, yet it gets lost in translation when colour contrast is off or non-existent.
October 11th, 2007 at 7:27 am
Oh the irony. Try running this site through a colour contrast analyser. It fails on multiple levels.
Practise what you preach.
October 11th, 2007 at 7:28 am
While I like your article, the fact that it was presented in horrible contrast, light grey on white, made it a bear to read and made it come off as a bit hypocritical.
October 11th, 2007 at 7:38 am
Found via digg…
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.
October 11th, 2007 at 7:38 am
the contrast of your text makes it nearly unreadable. [it is too damn faint.] i couldn’t see the textboxes for this reply, i had to move my mouse around until it changed to an i-bar.
October 11th, 2007 at 7:39 am
In addition to design is usability. For example, I was unable to find any links to the previous two articles in this series.
October 11th, 2007 at 7:41 am
How about increasing the contrast between the light grey font and the background, then? Your page is hardly readable in some LCDs.
October 11th, 2007 at 7:43 am
Interesting that you do a piece on contrast, but yet your text is light gray on white.
October 11th, 2007 at 7:49 am
It’s kind of ridiculous how a site with a tutorial on contrast in the context of web design fails the W3C’s color contrast algorithm. The background color is #fdfdf8, and the foreground color is #909085. See whether that works for yourself: http://juicystudio.com/services/colourcontrast.php
October 11th, 2007 at 7:59 am
Great points on contrast, but aparently your designer needs to read it becauase the text on your page is barely readable for someone with even the slightest sight problem. 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.
October 11th, 2007 at 8:03 am
Really nice informative article.
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!
October 11th, 2007 at 8:05 am
Nice article, but my suggestion is to practice what you preach. You’ve got gray text on a tan background– not too good for readability.
October 11th, 2007 at 8:07 am
Really good article with a lot of good points. But, I find it ironic that in an article about good contrast you use such light text on a white background. For me at least, it’s pretty difficult to read.
October 11th, 2007 at 8:07 am
Speaking of contrast… your site has gray text on white - it’s a little hard to read.
October 11th, 2007 at 8:09 am
Honestly I find it really ironic that this comes from a site with light gray text on an off-white background.
Good write-up though.
October 11th, 2007 at 8:10 am
I find it quite amusing that you have an article about contrast in design when the text of the article is marginally readable because of the low contrast. I bet it’s actually unreadable on a CRT.
October 11th, 2007 at 8:14 am
you write a great article about how important contrast is, then you use a light grey font on a white background.
October 11th, 2007 at 8:16 am
Teaching others about contrast while the font on the page is so light it’s almost unreadable?
October 11th, 2007 at 8:17 am
Oh, irony! Text on this page is too light for me to read comfortably.
October 11th, 2007 at 8:18 am
In Photoshop you can make a black/white adjustment layer and just click it on or off to check your contrast. No need to flatten and desaturate.
Much easier.
Good tutorial, thanks!
October 11th, 2007 at 8:19 am
For a site posting an essay on good contrast I think you should take some advice and change your main copy color from #909085 to at least a #666666. It;s just hard on the eyes, because there’s not enough CONTRAST!
October 11th, 2007 at 8:22 am
Nice article. Practice a little of what you preach. Light gray text on white background is not very good contrast. It ended up making your excellent article very painful to read.
October 11th, 2007 at 8:24 am
Practice what you preach, I have a hard time reading the almost-white text on a white background.
Heck… I didn’t even read them. Stupid website.
October 11th, 2007 at 8:24 am
Did you make the copy on this page soft to the point of being unreadable to be ironic?
October 11th, 2007 at 8:28 am
Like the comment says on DIGG, “…this from a website where all the text is light gray.”
Hehe.
October 11th, 2007 at 8:46 am
I whole heartedly agree on the importance of contrast in design. However, I do have to point out the irony of this article in that the body copy is very difficult to read given the lack of contrast between the light gray copy on the white background.
October 11th, 2007 at 8:47 am
I refuse to accept advice regarding web page contrast from an individual who uses gray text on an off-white background. This tactic is overused, has poor visual contrast and is a damn ironic choice for an article such as this. You fail. Go back to design school.
October 11th, 2007 at 8:52 am
The only thing I would change in your advice is, you don’t have to flatten a photoshop file to desaturate it (dangerous!). Instead you can add an adjustment layer for “black & white”, which is a) non-destructive, and b) you can easily turn it on and off to check your design as you go along.
Where was this advice when “Wired” got off the ground? Lime-green text on fluorescent orange… ugh!
October 11th, 2007 at 8:57 am
And yet, this site is composed entirely of light gray on white….my eyes are hurting…
October 11th, 2007 at 8:59 am
What were you doing in e-Harmony?
October 11th, 2007 at 9:01 am
I agree that contrast is important. But why do so many web pages (this one included) put their text in such a low contrast gray on an off-white background? I find it very hard to read.
Why not black (or a much darker gray) for the body text?
October 11th, 2007 at 9:02 am
I give the article two thumbs up… great info for all web designers.
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.
October 11th, 2007 at 9:04 am
Anyone else find it ironic that this site is talking about the importance of contrast when it is lacking in that department (light grey text on a white background)?
October 11th, 2007 at 9:09 am
I fully agree. Contrast is a very under used and recognized in design.
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.
October 11th, 2007 at 9:09 am
The difference between the two Josh Wink ads was very clear. I am going to look at grayscale comparisons in the future.
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.
October 11th, 2007 at 9:30 am
Good article. Unfortunately it’s on a page that displays light-grey text on a white background — BAD Contrast!!!
October 11th, 2007 at 9:34 am
Nice try.
http://flickr.com/photos/graealex/1542130749/
October 11th, 2007 at 9:39 am
An article on contrast from a website with light-grey text on a white background? Come on.
October 11th, 2007 at 9:40 am
Excellent info, the blue on red combination is readily used despite the fact that it’s pretty hard on the eyes.
October 11th, 2007 at 9:48 am
Nice article.
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.
October 11th, 2007 at 9:53 am
I find the medium gray text on ivory background of the main text of this article somewhat difficult to read.
October 11th, 2007 at 10:16 am
A bit ironic, given the choice of text colour on this website don’t you think?
October 11th, 2007 at 10:17 am
Very well written and illustrated article. Great work!
October 11th, 2007 at 10:18 am
LOL… how come the “contrast” on this page ain’t so neat ?
October 11th, 2007 at 10:45 am
In Photoshop, nstead of flattening and desaturating, you can Layer>New Adjustment Layer>Hue/Saturation and drag the Saturation layer to the left.
October 11th, 2007 at 10:45 am
This is good basic information but I think its a very one dimensional explanation of contrast. Contrast is the difference in elements or how different elements are. Its not limited to light value. You can have contrast in hue, saturation, scale and shape or form as well as light value.
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.
October 11th, 2007 at 10:49 am
An article about contrast - written with a text in poor contrast. How ironic (and stupid).
October 11th, 2007 at 10:51 am
This is neither an article nor a tutorial.
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!
October 11th, 2007 at 10:57 am
This is clearly a case of “do as I say not as I do.”
October 11th, 2007 at 11:04 am
Ok OK OK!!! Message received loud and clear! Yes… we are using a grey text on an off-white background. It’s not great contrast.
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.
October 11th, 2007 at 11:46 am
Great documentation, thanks.
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.
October 11th, 2007 at 12:04 pm
How about getting some contrast in your text so I can actually read it!
October 11th, 2007 at 12:06 pm
Gray as a font choice? Ugh. Oh, the irony of it all!!!!!
October 11th, 2007 at 12:47 pm
| | | | | | | | |
NEAT
| | | | | | | | |
October 11th, 2007 at 12:49 pm
Undo in photoshop? You’re kidding right? Look into that ‘duplicate’ feature
October 11th, 2007 at 1:27 pm
nice guide. as a budding designer, any little bit helps. great illustrations
October 11th, 2007 at 1:29 pm
Go Tribe! nice article too.
October 11th, 2007 at 1:35 pm
People - please read Bill’s reply above - #66. Everyone is just repeating the same thing over and over without regard to all the other comments. And also, I can read this whole post just fine.
October 11th, 2007 at 1:37 pm
In regards to the colour contrast issue I use sites like colorjack and colourlovers to take most of the thinking out of the colour choosing process!
October 11th, 2007 at 1:38 pm
Great post! Contrast is very important, it can be tricky, but definitely something to take seriously.
Great use of examples.
October 11th, 2007 at 2:43 pm
@Bill (post #66)
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.
October 11th, 2007 at 2:54 pm
Uhh duh, shithead. This is just common knowledge.
October 11th, 2007 at 2:58 pm
Ironic article - it happens to be written in a light grey font on an off-white background, not much contrast there?
October 11th, 2007 at 3:43 pm
hmm…practice what you preach. can you make the text on this site darker? it’s hard to read!!
October 11th, 2007 at 3:47 pm
What is written in this article? I cannot read it because there is no contrast.
Fail.
October 11th, 2007 at 3:55 pm
wtf!? i cannot read the text as it seems to lighten and darken at will, and has burt my eyes. what a dullard…
October 11th, 2007 at 3:59 pm
Better type color and contrast would make your article easier to read and cause less eye strain for readers. A good case of “do what I say, not what I do”
October 11th, 2007 at 4:02 pm
Man, this is funny.
October 11th, 2007 at 4:41 pm
I’m not sure what everyone is complaining about. I’ve got an el cheapo Dell monitor and I can read the text just fine.
October 11th, 2007 at 4:45 pm
Jeremy,
You know, we are all on Dell monitors over here. Perhaps Dell monitors have more contrast than everyone else’s.
October 11th, 2007 at 5:37 pm
can`t wait for the next one
October 11th, 2007 at 5:38 pm
The text is readable, but it’s certainly not “high contrast” and goes against the article.
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.
October 11th, 2007 at 7:43 pm
Nice article, horrible presentation.
October 11th, 2007 at 7:47 pm
Bill,
“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.
October 11th, 2007 at 10:55 pm
@ Key,
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.
October 12th, 2007 at 4:56 am
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.
October 12th, 2007 at 10:43 am
I dont know what everyone else was talking abouti can read this perfectly. I guess thats what you get you guys. For not leaving your computers long enough to have a life, and to keep your eyes from burning out.
October 13th, 2007 at 4:02 am
Bill and Jeff,
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!
October 13th, 2007 at 4:54 pm
As others have noticed, you have a contrast problem. I ran the Colour Contrast Analyser on your background (#f9f8ec) and text (#909085) and the program said:
“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.
October 13th, 2007 at 6:14 pm
Very good article. I really hate running into a website that leaves my eyes hurting and seeing after images…
October 14th, 2007 at 11:42 pm
It’s a wonderful life….
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.
October 16th, 2007 at 5:59 pm
What the…? I can’t believe the irony that I can barely read anything at all on this website, and it’s talking about the importance of contrast! I think you lost a great opportunity to get your point across. Cant read this at all.
October 18th, 2007 at 10:06 pm
Don’t pay any attention to those half blind designers that can’t appreciate the elegance of the grey on white. Use contrast to get attention and get the point across. I find it quite readable and I’m an older fart. Not everything has to smack us upside the head.
October 19th, 2007 at 3:56 pm
Ummm speaking of contrast - maybe pick a text color that’s a little easier to read against your white background. That’s the first thing I noticed about this page.
Irony.
October 22nd, 2007 at 10:30 am
I pay attention to contrast, but I was in a hurry to read this article and honestly it didn’t bother me at all. Depends on your eyes, I guess!
November 21st, 2007 at 12:59 pm
Help!! I’m terrible at drawing!!! could use a good tutorial
December 2nd, 2007 at 7:54 pm
nice tutorial!
very helpful hints.
December 4th, 2007 at 6:21 am
O.K. Everyone! You have all made your point about the light grey text. Honestly, it looks great on our screens. I prefer the contrast as it is less fatiquing on the eyes to read. Great article and please keep’em coming.
December 13th, 2007 at 12:22 am
Great site, and great article. Just sometimes I find that really high contrast (ex: large areas of black mixing with large areas of white) hurt your (well actually my) eyes.
Great points though, thanks
January 4th, 2008 at 12:40 am
Wow, let’s go over this again: you write a tutorial on using contrast but fail to use any yourself. Nearly four months later you haven’t changed a thing about this washed out web page. Do you write these posts and just abandon them? Too funny. What else is on your website (I’ll never know since the lack of contrast is killing me), like, “How to make your website accessible?” Or maybe, “Comments - how to respond to them and keep your visitors coming back?”
January 4th, 2008 at 10:31 am
@ Marah Marie - It looks like you managed to find out how to comment, which is admirable considering how you say you cannot use this website.
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%.
January 10th, 2008 at 12:46 am
Jeff, here’s a fact, look it up: 90% of your visitors will never comment, and most of them on any website you own except for perhaps digg.com, will never return. So get over yourself and fix the freakin’ contrast already. You are “catering” to a demographic that does not even *exist* except in your own head.
Consider me part of the exceptional 10% that actually gives a damn.
January 10th, 2008 at 10:16 am
WELL! I for one am glad to see so many people passionate about design. Who would have ever guessed that a little blog post about contrast (a rather boring subject matter) would create such a stir! Awesome!
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!
January 29th, 2008 at 8:31 am
“Remember, don’t cater to the 10% - cater to the 90%.”
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.)
January 29th, 2008 at 9:08 am
really interesting
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
January 30th, 2008 at 7:06 am
excelente, fuentes, color y ahora contraste muy bien todo clarisimo.
January 31st, 2008 at 9:16 pm
dont know if this was mentioned in the comments.. I’m a little late getting to this.
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.
February 11th, 2008 at 11:41 pm
Great post Bill,
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.
March 18th, 2008 at 12:56 pm
Hey, did anyone notice that they finally changed the contrast on the site?
Now the text is #51514B instead of #909085.
I guess Bill no longer stands by his contrast.
March 18th, 2008 at 1:12 pm
Zeus,
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!
March 21st, 2008 at 8:44 am
Yay… hehe, it was funny to google myself and find this comment string again. We showed them good.
Great article!
April 25th, 2008 at 3:19 pm
I was merely interested in backtracking through the master designer series, and wanted to know the name of the font in the “Cleveland Rocks” picture.. but I must say that I’m surprised by the comments on this site and how rude they are.
April 26th, 2008 at 5:04 am
Can’t wait to read the next article of this series.
May 5th, 2008 at 4:02 am
Ironic article - it happens to be written in a light grey font on an off-white background, not much contrast there?
May 28th, 2008 at 3:39 am
Badly designed websites with garish colours and fonts are a pet hate. Have to disagree with the above poster tho - dark grey font on white background very easy to read.
June 2nd, 2008 at 9:57 pm
Excellent examples of good design. Definitely clear, fun, and to the point.
June 13th, 2008 at 12:01 pm
Gray on of white. Come on guys. The contrast here is not so bad. Nice article, nice exanples, lots of bad students
July 2nd, 2008 at 9:40 pm
Wow, lovely tutorials. I read all three and it’s great…
Nice, simple read but concise and informative simultaneously.
July 8th, 2008 at 6:12 am
thanks the post
September 6th, 2008 at 6:28 am
Wspanialy artykul, kontrast jest podstawowa zasada wplywajaca na czytelnosc stron http://WWW.
September 13th, 2008 at 8:40 pm
The contrast can be improved as well in photoshop with : Image>Adjustments>curve
September 19th, 2008 at 11:54 am
ha… so this is the one eh? people are eager to throw stones.
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.
September 29th, 2008 at 6:09 pm
this tutorial is great help .. thanks for the advice .. keep the good the work up
November 12th, 2008 at 3:49 am
Nicely put together, thanks for the explanation.