Design insights & tutorials.

Become a Master Designer: Rule Three: Contrast, Contrast, Contrast

Part Three of Seven Easy Principles to Becoming a Master Designer.

Read Rule 1 and Rule 2

contrast in your design


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.

insufficient contrast

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:

proper contrast in your design

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.

good and bad contrast

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:

set watermarks at 15 opacity

set watermarks at 15 opacity

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:

good contrast in a design

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!

About the Author, William Beachy

I grew up in Cleveland Hts. Ohio and was drawing constantly. As a child I took art classes at the Cleveland Institute of Art and eventually became known as the "class artist." I graduated from The Ohio State University's department of Industrial Design. I have always tried to blend my passion for illustration with Graphic Design. Go Media was the culmination of my interests for both business and art. I'm trying to build a company that is equally considerate of our designers AND our clients.
Discover More by William Beachy

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • michael_c

    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!

  • michael_c

    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!

  • Georgie

    I love all your tutorials!! They help me out on a daily basis! Keep ‘em comin’!! :)

  • Georgie

    I love all your tutorials!! They help me out on a daily basis! Keep ‘em comin’!! :)

  • Felix

    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!

  • http://www.fearlexworld.com fearlex

    Here in US too, i follow every tutorial and this one was awesome. Thanks for that, hoping be here for the drawing one !!! :D

  • http://www.fearlexworld.com fearlex

    Here in US too, i follow every tutorial and this one was awesome. Thanks for that, hoping be here for the drawing one !!! :D

  • Felix

    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!

  • http://panorazzi.com/colorfool wooncherk

    Now I think I understand more about color… Thanks…

  • http://panorazzi.com/colorfool wooncherk

    Now I think I understand more about color… Thanks…

  • http://www.freshome.com Michael @ Freshome

    Awesome post !

    Great information, and I love the joke !

  • http://www.freshome.com Michael @ Freshome

    Awesome post !

    Great information, and I love the joke !

  • http://www.avangelistdesign.com Andy Parker

    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!

  • http://www.avangelistdesign.com Andy Parker

    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!

  • Pingback: Metagg

  • Mark

    Oh the irony. Try running this site through a colour contrast analyser. It fails on multiple levels.

    Practise what you preach.

  • Jesse burcsik

    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!

  • http://www.pat-burt.com Patrick Burt

    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.

  • http://www.pat-burt.com Patrick Burt

    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.

  • John

    Did you make the copy on this page soft to the point of being unreadable to be ironic?

  • J Random User

    Light grey text on a white background.

    Am I the only one to notice the irony here?

  • J Random User

    Light grey text on a white background.

    Am I the only one to notice the irony here?

  • Pingback: Support this story on Stirrdup

  • Hannes

    I find it somewhat ironic that you preach high-contrast yet publish in light-gray-on-white text. My eyes are hurting now, thanks.

  • http://www.skyrocketlabs.com/blog/ freddy

    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.

  • Hannes

    I find it somewhat ironic that you preach high-contrast yet publish in light-gray-on-white text. My eyes are hurting now, thanks.

  • http://www.skyrocketlabs.com/blog/ freddy

    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.

  • Jason Wilson

    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.

  • Jason Wilson

    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.

  • http://www.techzilo.com/ Sumesh

    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.

  • sue

    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.

  • http://www.techzilo.com/ Sumesh

    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.

  • sue

    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.

  • Ascii King

    In addition to design is usability. For example, I was unable to find any links to the previous two articles in this series.

  • Ascii King

    In addition to design is usability. For example, I was unable to find any links to the previous two articles in this series.

  • drebes

    How about increasing the contrast between the light grey font and the background, then? Your page is hardly readable in some LCDs.

  • drebes

    How about increasing the contrast between the light grey font and the background, then? Your page is hardly readable in some LCDs.

  • http://www.geologyjoe.blogspot.com GeologyJoe

    Interesting that you do a piece on contrast, but yet your text is light gray on white.

  • http://www.geologyjoe.blogspot.com GeologyJoe

    Interesting that you do a piece on contrast, but yet your text is light gray on white.

  • asdf

    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

  • asdf

    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

  • Kris Bailey

    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.

  • Kris Bailey

    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.

  • http://www.carl-topham.com Carl T

    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!

  • http://www.carl-topham.com Carl T

    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!

  • http://www.east3rd.com east3rd

    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.

  • http://www.east3rd.com east3rd

    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.

  • http://www.opticdistraction.com Justin

    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.

  • Zachary Berry

    Speaking of contrast… your site has gray text on white – it’s a little hard to read.

  • http://www.opticdistraction.com Justin

    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.

  • Zachary Berry

    Speaking of contrast… your site has gray text on white – it’s a little hard to read.

  • Justin

    Honestly I find it really ironic that this comes from a site with light gray text on an off-white background. :P

    Good write-up though.

  • Justin

    Honestly I find it really ironic that this comes from a site with light gray text on an off-white background. :P

    Good write-up though.

  • http://www.snapspans.com/ curt

    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.

  • http://www.ataxia.net/ Tape

    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.

  • http://www.ataxia.net/ Tape

    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.

  • Pingback: Design top DIGG news » Why is contrast so important in web design

  • erik

    you write a great article about how important contrast is, then you use a light grey font on a white background.

  • erik

    you write a great article about how important contrast is, then you use a light grey font on a white background.

  • Henk

    Teaching others about contrast while the font on the page is so light it’s almost unreadable? :)

  • Henk

    Teaching others about contrast while the font on the page is so light it’s almost unreadable? :)

  • kL

    Oh, irony! Text on this page is too light for me to read comfortably.

  • kL

    Oh, irony! Text on this page is too light for me to read comfortably.

  • Mats

    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!

  • Mats

    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!

  • Pingback: Why is contrast so important in web design « Computers Zone

  • Kersh

    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.

  • Kersh

    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.

  • MeeToo

    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.

  • MeeToo

    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.

  • Greg Leber

    Like the comment says on DIGG, “…this from a website where all the text is light gray.”

    Hehe.

  • Greg Leber

    Like the comment says on DIGG, “…this from a website where all the text is light gray.”

    Hehe.

  • Pingback: » Why Contrast, Contrast, Contrast is so important in WEB design… Happy Dude: Online mutterings and insights…

  • Pingback: Prime News Blog » Blog Archive » wonder woman naked cartoon Why is contrast so important in web design

  • Dr. Benway

    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.

  • Dr. Benway

    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.

  • web_designer

    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.

  • web_designer

    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.

  • http://www.totaltraining.com Brian Maffitt

    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!

  • http://www.totaltraining.com Brian Maffitt

    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!

  • Ren Hoek

    And yet, this site is composed entirely of light gray on white….my eyes are hurting…

  • Ren Hoek

    And yet, this site is composed entirely of light gray on white….my eyes are hurting…

  • Paul

    What were you doing in e-Harmony?

  • Paul

    What were you doing in e-Harmony?

  • http://python.net/~goodger David Goodger

    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?

  • http://python.net/~goodger David Goodger

    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?

  • Jeremy

    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.

  • Jeremy

    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.

  • Sean

    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)?

  • Sean

    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)?

  • http://northstreetproductions.net Sam Richardson

    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.

  • http://northstreetproductions.net Sam Richardson

    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.

  • W Lindley

    Good article. Unfortunately it’s on a page that displays light-grey text on a white background — BAD Contrast!!!

  • W Lindley

    Good article. Unfortunately it’s on a page that displays light-grey text on a white background — BAD Contrast!!!

  • Alex
  • Alex
  • Matt McNamara

    An article on contrast from a website with light-grey text on a white background? Come on.

  • Matt McNamara

    An article on contrast from a website with light-grey text on a white background? Come on.

  • http://www.niko-bellic.uni.cc Niko Bellic

    Excellent info, the blue on red combination is readily used despite the fact that it’s pretty hard on the eyes.

  • http://www.niko-bellic.uni.cc Niko Bellic

    Excellent info, the blue on red combination is readily used despite the fact that it’s pretty hard on the eyes.

  • Tom B

    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.

  • Tom B

    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.

  • http://www.mistersquirrel.net MrSquirrel

    I find the medium gray text on ivory background of the main text of this article somewhat difficult to read.

  • http://www.mistersquirrel.net MrSquirrel

    I find the medium gray text on ivory background of the main text of this article somewhat difficult to read.

  • Joe

    A bit ironic, given the choice of text colour on this website don’t you think?

  • Joe

    A bit ironic, given the choice of text colour on this website don’t you think?

  • http://borislavborissov.eu/ Борислав Борисов

    Very well written and illustrated article. Great work!

  • http://bborissov.iblogger.org Борислав Борисов

    Very well written and illustrated article. Great work!

  • anon

    LOL… how come the “contrast” on this page ain’t so neat ?

  • anon

    LOL… how come the “contrast” on this page ain’t so neat ?

  • jj

    In Photoshop, nstead of flattening and desaturating, you can Layer>New Adjustment Layer>Hue/Saturation and drag the Saturation layer to the left.

  • Colin Henson

    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.

  • jj

    In Photoshop, nstead of flattening and desaturating, you can Layer>New Adjustment Layer>Hue/Saturation and drag the Saturation layer to the left.

  • Colin Henson

    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.

  • http://www.iconfinder.net Martin Leblanc

    An article about contrast – written with a text in poor contrast. How ironic (and stupid).

  • http://www.iconfinder.net Martin Leblanc

    An article about contrast – written with a text in poor contrast. How ironic (and stupid).

  • steve

    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!

  • steve

    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!

  • mike

    This is clearly a case of “do as I say not as I do.”

  • mike

    This is clearly a case of “do as I say not as I do.”

  • http://www.gomedia.us Bill

    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.

  • http://www.gomedia.us Bill

    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.

  • Mark

    Oh the irony. Try running this site through a colour contrast analyser. It fails on multiple levels.

    Practise what you preach.

  • http://www.myspacegenerators.org Rahen Mckinny

    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.

  • http://www.myspacegenerators.org Rahen Mckinny

    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.

  • http://www.guitarmasta.net Daniel Christopher

    How about getting some contrast in your text so I can actually read it!

  • http://www.guitarmasta.net Daniel Christopher

    How about getting some contrast in your text so I can actually read it!

  • Blade

    Gray as a font choice? Ugh. Oh, the irony of it all!!!!!

  • Blade

    Gray as a font choice? Ugh. Oh, the irony of it all!!!!!

  • Jesse burcsik

    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!

  • John

    Did you make the copy on this page soft to the point of being unreadable to be ironic?

  • http://asterisk.org/ Euthanize Hippies

    | | | | | | | | |

    NEAT

    | | | | | | | | |

  • http://asterisk.org/ Euthanize Hippies

    | | | | | | | | |

    NEAT

    | | | | | | | | |

  • http://asterisk.org/ Euthanize Hippies

    Undo in photoshop? You’re kidding right? Look into that ‘duplicate’ feature ;)

  • http://asterisk.org/ Euthanize Hippies

    Undo in photoshop? You’re kidding right? Look into that ‘duplicate’ feature ;)

  • http://www.snapspans.com/ curt

    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.

  • jared

    nice guide. as a budding designer, any little bit helps. great illustrations :)

  • jared

    nice guide. as a budding designer, any little bit helps. great illustrations :)

  • Nolan

    Go Tribe! nice article too.

  • Nolan

    Go Tribe! nice article too.

  • Kim

    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.

  • Kim

    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.

  • http://www.babblestorm.co.uk David

    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!

  • http://www.babblestorm.co.uk David

    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!

  • http://www.alfredfox.com Website Design

    Great post! Contrast is very important, it can be tricky, but definitely something to take seriously.

    Great use of examples.

  • http://www.alfredfox.com Website Design

    Great post! Contrast is very important, it can be tricky, but definitely something to take seriously.

    Great use of examples.

  • Chris

    @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.

  • Chris

    @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.

  • Parker

    Uhh duh, shithead. This is just common knowledge.

  • Parker

    Uhh duh, shithead. This is just common knowledge.

  • Exnor

    Ironic article – it happens to be written in a light grey font on an off-white background, not much contrast there? ;)

  • Exnor

    Ironic article – it happens to be written in a light grey font on an off-white background, not much contrast there? ;)

  • Jeremy

    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.

  • Lucy

    hmm…practice what you preach. can you make the text on this site darker? it’s hard to read!!

  • Lucy

    hmm…practice what you preach. can you make the text on this site darker? it’s hard to read!!

  • anon

    What is written in this article? I cannot read it because there is no contrast.

    Fail.

  • anon

    What is written in this article? I cannot read it because there is no contrast.

    Fail.

  • jmsmckwn

    wtf!? i cannot read the text as it seems to lighten and darken at will, and has burt my eyes. what a dullard…

  • jmsmckwn

    wtf!? i cannot read the text as it seems to lighten and darken at will, and has burt my eyes. what a dullard…

  • Fred

    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”

  • Fred

    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”

  • http://www.gomedia.us Oliver

    Man, this is funny.

  • http://www.gomedia.us Oliver

    Man, this is funny.

  • http://www.gomedia.us Bill

    Jeremy,

    You know, we are all on Dell monitors over here. Perhaps Dell monitors have more contrast than everyone else’s.

  • http://www.gomedia.us Bill

    Jeremy,

    You know, we are all on Dell monitors over here. Perhaps Dell monitors have more contrast than everyone else’s.

  • Pingback: napyfab:blog» Blog Archive » links for 2007-10-11

  • Andres

    can`t wait for the next one

  • Andres

    can`t wait for the next one

  • jimmy

    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.

  • jimmy

    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.

  • Pingback: pligg.com

  • webpilot

    Nice article, horrible presentation.

  • webpilot

    Nice article, horrible presentation.

  • Key

    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.

  • Key

    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.

  • Jeremy

    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.

  • http://www.gomedia.us Jeff

    @ 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.

  • http://www.gomedia.us Jeff

    @ 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.

  • http://www.resim.org Resim

    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.

  • http://www.resim.org Resim

    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.

  • Pingback: My daily readings 10/12/2007 « Strange Kite

  • Timmy

    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.

  • Timmy

    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.

  • Pingback: test 10/12/2007 « Strange Kite

  • Pingback: links for 2007-10-12 « toonz

  • Pingback: Suadref Studios » Blog Archive » Webdesign Tips

  • guido

    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!

  • guido

    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!

  • http://www.webpagesthatsuck.com Vincent Flanders

    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.

  • http://www.webpagesthatsuck.com Vincent Flanders

    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.

  • http://www.mediamarketers.com Web Design Louisville

    Very good article. I really hate running into a website that leaves my eyes hurting and seeing after images…

  • http://www.mediamarketers.com Web Design Louisville

    Very good article. I really hate running into a website that leaves my eyes hurting and seeing after images…

  • Pingback: Random Linkage » Random Linkage 2007-Oct-14 PM

  • Pingback: Blog at veanndesign.com » Sunday Weekly Roundup #12 - 10/14/2007

  • http://www.swirlweb.com Angel

    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.

  • http://www.swirlweb.com Angel

    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.

  • Smith

    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.

  • Smith

    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.

  • Bob in Toronto

    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.

  • Bob in Toronto

    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.

  • foofan

    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.

  • foofan

    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.

  • Pingback: Why is contrast so important in web design « Dacoto Web Productions Web Design Blog

  • Pingback: Why is contrast so important in web design

  • Keithmo

    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!

  • Keithmo

    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!

  • Pingback: Accessibility Basics: Testing Your Page For Color Blindness - CSS-Tricks

  • Lawndart

    Help!! I’m terrible at drawing!!! could use a good tutorial

  • Lawndart

    Help!! I’m terrible at drawing!!! could use a good tutorial

  • Pingback: GraphicaCs Blog » Blog Archive » Why is contrast so important in web design

  • ricardo

    nice tutorial!
    very helpful hints.

  • ricardo

    nice tutorial!
    very helpful hints.

  • http://frameshoponline.com Sandy

    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.

  • http://frameshoponline.com Sandy

    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.

  • http://www.veckd.com Greg

    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 ;)

  • http://www.veckd.com Greg

    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 ;)

  • Pingback: WallOfScribbles » Designapalooza - Part Five

  • http://antiaol.insanejournal.com/ Marah Marie

    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?”

  • Marah Marie

    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?”

  • http://www.gomedia.us Jeff

    @ 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%.

  • http://www.gomedia.us Jeff

    @ 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%.

  • Pingback: Anewlis | Portfolio » Blog Archive » The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007

  • http://antiaol.livejournal.com/ Marah Marie

    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.

  • http://antiaol.livejournal.com/ Marah Marie

    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.

  • http://www.gomedia.us Bill

    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!

  • http://www.gomedia.us Bill

    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!

  • Pingback: The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007 « arcagility

  • Pingback: 2007年最热门的50篇关于网页设计的博客日志å’

  • Pingback: Life Style – HTML и CSS, доступность и юзабилити » »

  • http://discogs.com/user/vinylot Jay Aich

    “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.)

  • http://discogs.com/user/vinylot Jay Aich

    “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.)

  • http://www.reviewsaurus.com/blogging-stuff/13-fashion-color-trends-of-2008-to-make-blog-designs-rock/ Rajat Bhadani

    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

  • http://www.reviewsaurus.com/blogging-stuff/13-fashion-color-trends-of-2008-to-make-blog-designs-rock/ Rajat Bhadani

    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

  • Jorge

    excelente, fuentes, color y ahora contraste muy bien todo clarisimo.

  • Jorge

    excelente, fuentes, color y ahora contraste muy bien todo clarisimo.

  • http://www.digitalskraps.com David Sparks

    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.

  • http://www.digitalskraps.com David Sparks

    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.

  • Webdesignhub

    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.

  • Webdesignhub

    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.

  • Pingback: Readerslab » The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007

  • Pingback: 50 artículos im-pre-scin-di-bles para el diseñador web | Blog en Serio

  • Zeus

    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. :)

  • Zeus

    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. :)

  • http://www.gomedia.us Bill

    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!

  • http://www.gomedia.us Bill

    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!

  • http://actafoo.com Jesse Burcsik

    Yay… hehe, it was funny to google myself and find this comment string again. We showed them good.

    Great article!

  • http://actafoo.com Jesse Burcsik

    Yay… hehe, it was funny to google myself and find this comment string again. We showed them good.

    Great article!

  • http://www.hypeelite.com Erika

    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.

  • http://www.hypeelite.com Erika

    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.

  • phalkunz

    Can’t wait to read the next article of this series.

  • phalkunz

    Can’t wait to read the next article of this series.

  • http://ooyes.net website design

    Ironic article – it happens to be written in a light grey font on an off-white background, not much contrast there?

  • http://ooyes.net website design

    Ironic article – it happens to be written in a light grey font on an off-white background, not much contrast there?

  • http://www.m360ltd.co.uk/ design nottingham

    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.

  • http://www.m360ltd.co.uk/ design nottingham

    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.

  • http://www.eporia.com/ Free Website Analysis

    Excellent examples of good design. Definitely clear, fun, and to the point.

  • http://www.eporia.com/ Free Website Analysis

    Excellent examples of good design. Definitely clear, fun, and to the point.

  • Muchora

    Gray on of white. Come on guys. The contrast here is not so bad. Nice article, nice exanples, lots of bad students

  • Muchora

    Gray on of white. Come on guys. The contrast here is not so bad. Nice article, nice exanples, lots of bad students

  • Daquan

    Wow, lovely tutorials. I read all three and it’s great…

    Nice, simple read but concise and informative simultaneously.

  • Daquan

    Wow, lovely tutorials. I read all three and it’s great…

    Nice, simple read but concise and informative simultaneously.

  • seo master

    thanks the post

  • seo master

    thanks the post

  • Pingback: Become a Master Designer: Rule Five: Add depth to your designs. | GoMediaZine

  • Pingback: Why is contrast so important in web design | WhiteSandsDigital.com

  • http://tworze.com Tadek

    Wspanialy artykul, kontrast jest podstawowa zasada wplywajaca na czytelnosc stron WWW.

  • http://tworze.com Tadek

    Wspanialy artykul, kontrast jest podstawowa zasada wplywajaca na czytelnosc stron WWW.

  • http://www.website1service.com Matt

    The contrast can be improved as well in photoshop with : Image>Adjustments>curve

  • http://www.website1service.com Matt

    The contrast can be improved as well in photoshop with : Image>Adjustments>curve

  • http://jimiyo.com jimiyo

    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.

  • http://jimiyo.com jimiyo

    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.

  • tripleM

    this tutorial is great help .. thanks for the advice .. keep the good the work up
    :D

  • tripleM

    this tutorial is great help .. thanks for the advice .. keep the good the work up
    :D

  • Web Design

    Nicely put together, thanks for the explanation.

  • Web Design

    Nicely put together, thanks for the explanation.

  • Pingback: 2007年50个最受欢迎的设计贴 - Design Thinking

  • http://www.roomfurniturechina.com bedroom furniture

    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.

  • http://www.nextgen-design.co.uk/ web design leeds

    all the colours of the world!.. thanks for this.

  • http://interiordesignarchive.com/ Sandra

    The contrast composition is very important specially when we working for the website, we can loose the visitor when they see bad contrast with the web page. Nice quick lessons Bill, thanks.

  • http://www.branditsolutions.com/ it managed services

    Good take on contrast. One doesn't really had to have a good eye, you just have to picture yourself as the visitor.

  • burlesque performer

    great explanation and put together sweetly!.. cheers

  • burlesque performer

    great explanation and put together sweetly!.. cheers

  • http://www.rahulsahu.com/logoid.htm rahul sahu

    Kuler is the coolest one. I love that you can save out the color theme as a swatch library that you can use in any of the Adobe Suite.

  • http://www.rahulsahu.com/logoid.htm rahul sahu

    Kuler is the coolest one. I love that you can save out the color theme as a swatch library that you can use in any of the Adobe Suite.

  • http://new-logo.co.uk/ Matty

    Really like that you added the watermark visuals to visually show the importance of contrast within a design. Most excellent post. Thank you for sharing.

  • bluefiremedia

    Excellent advice on contrasting colors and Web design. A design that is not easy on the eyes is much more likely to get a bounce that one that is appealing.

  • http://www.webdesigners-hub.com/ Vijendra Mishra

    Nice Post … nice presentation for contrast … really we have to take care of contrast values.

  • http://scribledude.wordpress.com/ Mike

    Always a great rule to live by. Thanks for the further information and tips.

  • http://www.dtelepathy.com/blog/telepathy/3-basic-ways-to-grab-a-users-attention/ Rick

    Great article. I think it's fine to have gray text on white. It makes black stand out more. Elements like the publishing date may not be that important, so why make it black?

  • Anders Bagnegaard Kristensen

    Nice post, i like the tutorial
    '
    http://www.Pumacode.dk

  • Dan

    Excellent job..
    dizi izle

  • http://peninggi-badan.com Bill Andreas

    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.tinggi badan

  • Supra Shoes UK

    GHD Hair Straighteners are on hot sale in our GHD Hair Straightener online store. Now we know that all the GHD from GHD Australia are of free sihpping and no sale tax. But you should keep an eye on the series like GHD MK4, GHD IV Styler, GHD Purple,, GHD Envy, GHD Dark and GHD Red when buy from the GHD Hair Australia online store as some GHD Iron are provided with fake. Therefore, Fake GHD should be complained if you already have one.
    Now most of the GHD Hair Australia products from GHD Australia shops are likely to offer you the top quality GHD Hair Straightener, like the best seller GHD MK4 and GHD Iron. Other GHD Irons like GHD Purple, GHD Envy, GHD Serenity, GHD Pink, GHD Dark and GHD Red. Just buy your favourite GHD for the coming christmas. Hope you could do happy shopping of GHD Hair Straighteners from an Authentic GHD store.
    Cheap Supra Shoes is another very sutitable product for the coming season as the Supra Shoes would always leave you a feeling of comfort and a sense of dynamic and fashion. Now all the Supra Shoes UK could provide you a variety of Discount Supra Shoes and Cheap Supra Footwear. They also guarantee all the Supra Footwear sold are of top quality and reliable after sales service.What’s more, Supra Footwear UK have followed other brand shoes by providing disount for group shopping to allow more customers to share the perfect Supra Trainers and Supra Skate Shoes. As we know the Cheap Supra Trainers from Supra UK mainly face to the young generation who shows an increasing desire to pursue fashion and dynamic.I would like to suggest Supra Skytop,Supra Muska Skytop, Supra TK Society, Supra Vaider and Supra Skytop II if you want to Buy Supra Shoes now. Furthermore, I want to point out that all Supra Shoes Sale are of free shipping and no sale tax!

  • http://skforussia.ru Evgeniy

    This is really great info thank you, this is just what I need

  • mealy

    yea it has really helped me alot……….thank you

  • dizi izle

    a very interesting study

    • Hbbca

      rawwwww raw rawww raw raw raw rawwwwwwwwwraw!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • http://www.parcadunyasi.net parça kontör

    Now I think I understand more about color… Thanks…
    Flag

  • http://www.facebook.com/people/Saman-Sinaei/1717711626 Saman Sinaei

    I am at least searching for good articles two or three hours a day. but without any doubt I can say this series 7 rules is best written one I have ever seen. It is not only a good tutorial but also an inspiration for whom want to deliver great tutorials and articles to the web.

  • http://pulse.yahoo.com/_NLA6D7QZR263JOCJUCXHDF7GPI Anadestek

    Avrupa da birçok ülke stres ve depresyon durumlarında bitki ekstrelerinden üretilmiş olan ve hiçbir yan etkisi bulunmayan Rlxon Anti Stres Formula’yı sentetik anti depresanlara alternatif ürün olarak kullanımını onaylamıştır.

    Rlxon’un içeriğindeki bitki ekstreleri, beyinde SEROTONİN miktarını ve etkisini arttırır.

  • http://twitter.com/politrad Politrad

    Good article. I usually like to use darker text on lighter backgrounds. The best advice is that of merging everything and desaturate to see the balance of contrast. Great!

  • studio design

    Marvelous
    post!!

     

    You have
    done well, you have done a tremendous job keep it up. We are also developing
    and designing websites, we would like to give our expertise in web designing
    and developing. We are in the habit of developing and implementing suggestions.
    Autson works with innovative ideas to bring in new variations. Thanks for
    sharing valuable info.

  • http://www.domain2host.in Domain Registration

    Nice blog. I will keep visiting this blog very often.

  • http://www.domain2host.in Domain Registration

    Nice blog. I will keep visiting this blog very often.

  • http://www.webdizajn.ws/ Web Dizajn

     This
    is great. I love the integration of all these techniques, and the fact
    that you were able to keep it so simple. Good stuff. The final ‘LEAVE’
    looks really good.

    Thanks for this tut.

  • http://www.facebook.com/laraberch Lara Berch

    where are the other four promised parts? :-))

  • Mike

    Good piece, however you don’t “practice what you preach”! Your text is in pale grey and therefore very poor contrast. The number of persons out there with macular degredation and other eye problems is increasing rapidly and straining to read pale grey text just makes one click off!

  • Mats Svensson

    You shouldn’t preach to others about contrast, with a site like this.