Loudtalks — internet walkie talkie

Web page readability: Green text on yellow works the best

By Alexey Gavrilov on February 17, 2007

That’s right and classy black on white is way behind according to readability study performed by Alyson L. Hill from Department of Psychology of Stephen F. Austin [State University]. You can actually get this conclusion by simply looking at paper’s webpage — it uses exactly the colors combination, which it found to be the most favorable. Nice touch indeed. While the study itself is quite dated (1997) I don’t suppose people has changed a lot since then so most if not all of results must still be valid. Here are some interesting ones:

- Green on yellow is the best color scheme in the most conditions except for italicized Arial, for which it’s the worst
- Times New Roman on average is much better than Arial
- The combination, which gives the fastest response time is (surprise) italicized green Times New Roman on yellow background

This text is the readability winner

- Black on gray is much faster than black on white

Here are response times results from the paper:

Readability of different fonts and backgrounds combinations

Good to see that plain black Arial on white (as used in this blog) is doing well too. Do you agree?

Few more useful Web Page Readability / Usability Research works from the same lab can be found here.

Share this!
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Technorati
  • Furl
  • Slashdot
  • BlinkList
(categories: Usability)

52 Comments »

  1. Light Grey text on black is the ultimate in readability and non eye strain.

    This Screen as paper metaphor is foolish.

    The reality os someone is shing a light in your face, the less of it the better!

    Comment by Thisislame — March 31, 2007 @ 8:15 pm

  2. “I don’t suppose people has changed a lot since then so most if not all of results must still be valid. Here are some interesting ones:”

    Right… People don’t change in 10 years.

    I bet Green/Yellow has dropped sharply as most and more people get used to black/white text.

    Comment by John — March 31, 2007 @ 9:40 pm

  3. Her university is called Stephen F. Austin [State University] or SFA[SU], not Austin State University. In Texas, Austin usually refers to the capital; Stephen F. Austin was the founder of the Anglo settlements in what was then Mexican territory.

    It’s ironic that I have never heard of her or her research though I teach at the same school.
    Oops!

    Comment by Stephen Bradley — March 31, 2007 @ 9:53 pm

  4. BTW, on my screen, her site’s green is “#006600″ and her “yellow” is “#ffffcc”, both closer to black on white than your example. I especially liked her report page: a very soothing combination of colors - dark green and red, and serifed font.

    Comment by Stephen Bradley — March 31, 2007 @ 10:01 pm

  5. fwiw, my xterms are oldlace on black

    Comment by anon — March 31, 2007 @ 10:08 pm

  6. Is this still true on TFT displays?

    Comment by beza1e1 — April 1, 2007 @ 12:51 am

  7. Stephen, thanks a lot for correction. I fixed the school name and example to match the colors Alyson used for her publication.

    Comment by Alexey Gavrilov — April 1, 2007 @ 2:35 am

  8. to jonh - the second commenter,

    I highly doubt what works best would change over 10 years as u state, as it is not what we are used to but how are eyes/brain re-act to it. Think about it, 10 years ago, how often would people have read green text on a yellow background??? my guess, extremely rarely, yet it still ranked the highest. so there is no reason why black on white should become higher ranked as we grow used to it because clearly it is not about what we are used to.

    you john, are a noob
    cyuzz
    gerald

    Comment by gerald — April 1, 2007 @ 3:10 am

  9. I love how they present a paper on readability on a web page with full screen line lengths! If anything is hard to read, it’s that.

    Comment by ed — April 1, 2007 @ 3:42 am

  10. After staring at a terminal window for hours on end, I’ve found that that yellow text on a very, very, very dark blue background produces less strain than any other combination.

    Comment by Mark — April 1, 2007 @ 3:48 am

  11. First) Black on yellow, always sad to be easier on the eyes apparently was not tested.

    Second) I modified her page from green to yellow and it looks better/easier, IMHO.

    Third) Why so few color combinations? (some reasons given in her section “Stimuli”) Again, black on yellow could be selected. Traffic signs are black on yellow for some reason, you know…

    Fourth) Usage is important. Reaction time is one thing, comfort is another, reading time yet another. E.g., white on blue is very easy on the eyes, but maybe not so for book-long texts.

    Finally, other features would perhaps be more important… like border contrast for instance. Almost no display uses enhanced borders in letters.

    Also definition plays a major role. We see complex shapes and rapid/easy identification requires more than the traditional ~100dpi used in displays. 300 dpi would be a much more comfortable number.

    Comment by Anonymous — April 1, 2007 @ 6:56 am

  12. Sorry, I mean I modified her page from green to BLACK on yellow… it was the beer… ;-)

    Comment by Anonymous — April 1, 2007 @ 6:58 am

  13. i’ve tried so many combinations and a light yellow background for multi-colored code seems to have the least effect on my eyes.

    Comment by christian — April 1, 2007 @ 6:58 am

  14. interesting insight in light of sites like feedmashr.com which are messing with font styles big time.

    Comment by Art — April 1, 2007 @ 7:35 am

  15. There’s a ridiculous small of number of combinations tested - unless we’re to assume that there’s some other factor constraining the gamut.

    I would have like to have seen scoring for the contemptible gray-on-white that web authors have been using as an unreadable poor-man’s antialiasing. Perhaps most of them never read more than a few words at a time. These often seem to be the same sites that tend to make the main navigation text the least readable (ie: light grey on white), and smallest, presumably to allow for more screen real estate of their 800-pixel-wide main webpage for sound-ridden SWF ads…

    Comment by erlkonig — April 1, 2007 @ 10:29 am

  16. The reality os someone is shing a light in your face, the less of it the better!

    That’s true of any book — it reflects light into your eyes. Strain is the result of inadequate contrast, as well as excessive brightness (think reading a book in full sunlight).

    Good books have resolutely been black on white for centuries (or gray on white, if it’s a cheaper book). Obviously a working combination.

    Comment by TJ — April 1, 2007 @ 8:33 pm

  17. I agree with the first commenter. Lightgrey on black is best.

    Comment by Manuel — April 2, 2007 @ 1:51 am

  18. After staring at a terminal window for hours on end, I’ve found that that yellow text on a very, very, very dark blue background produces less strain than any other combination.

    Comment by 工控网 — April 2, 2007 @ 4:34 am

  19. […] [via Metalink] […]

    Pingback by Idea Grapes » 網頁易讀性：黃底綠字效果最佳 — April 2, 2007 @ 9:48 am

  20. […] Groen op Geel leest fijn? In cache […]

    Pingback by » 1 April grappen : Een overzicht 2007 — April 2, 2007 @ 10:02 am

  21. “You can actually get this conclusion by simply looking at paper’s webpage — it uses exactly the colors combination, which it found to be the most favorable. Nice touch indeed”

    well, yeah, that’s a nice touch, but the unstyled raw text isn’t.

    I just can’t see how one can publish a paper about web pages readability and overlook even the basics about typography

    Comment by abu — April 2, 2007 @ 2:47 pm

  22. Thanks for comments, everyone. Personally I think that the optimal combination depends on ambient light conditions. Apparently the experiment in that study was performed in the same conditions of moderately lighted environment. I guess that in more general case the best background would be the one, which closely matches ambient light and the best font color is the one, which provides enough contrast.

    This explains why different people don’t agree on the best scheme — if I work at nights I would more likely prefer dark background, while in office cubicle with white walls one would probably prefer black on white or gray.

    Green is good under normal lighting because it falls in the spectral range in which human eye sensitivity is maximum.

    Paper metaphor doesn’t work very well because paper reflects light, while monitor emits it. White paper always reflects in the spectrum, which closely matches the one of environment, monitor’s white is just white (or whatever you calibrated it to).

    Comment by Alexey Gavrilov — April 2, 2007 @ 2:58 pm

  23. @abu:

    Remember, that it was published in 1997. Ten years ago.

    Comment by Alexey Gavrilov — April 2, 2007 @ 3:00 pm

  24. […] จากเวบนี้ครับ Web page readability: Green text on yellow works the best […]

    Pingback by Jedineko » Web page readability — April 2, 2007 @ 3:45 pm

  25. […] Stumbled accros this post about colour contrast today via Google Blog Search. It explains how to calculate which colour combinations work well on screen. Quite interesting to read and after reading it I decided to calculate my own using one of the formulas, the result of which showing that my brightness is well above the recommended level. Coincidently I also saw this article a few days ago (you might have seen it, it was on Digg) regarding web page readability. What surprised me most is the fact that this breaks from what we learned after hundreds of years of working with print, namely that black text works better on a white background. Just another example of how webdesign differs vastly from print design. Interesting to note however that Italic Times New Roman wins in the reaction response time category. […]

    Pingback by peterpixel writings » Blog Archive » Scientific Approach to Colour Contrast — April 2, 2007 @ 4:24 pm

  26. That green text is horribly jagged, perhaps because of the italics. Anti-aliased text is the readability winner :)

    Comment by Marcm — April 2, 2007 @ 6:17 pm

  27. […] Also meiner Meinung nach schlägt das sich aber gewaltig. Laut einer Studie sollte grüner Text auf gelben Hintergrund am besten Lesbar sein. […]

    Pingback by Schwammerl im Aug? at Punctilio — April 2, 2007 @ 11:22 pm

  28. […] Metalink » Web page readability: Green text on yellow works the best (tags: usability design color) […]

    Pingback by links for 2007-04-02 « toonz — April 3, 2007 @ 3:25 am

  29. […] A web page readability study reveals that the combination which gives the fastest response time is italicized green Times New Roman on yellow background (well not actually bright yellow). More … Entry Filed under: Technology, Design and Usability, Linklog […]

    Pingback by Ashutosh Nilkanth’s Blog » Green text on yellow works the best — April 3, 2007 @ 4:17 am

  30. That is strange because I cannot read it too well. So if it is the best, then why don’t the portable book readers and other portable reading devices use that color scheme? I wonder how it is for eye strain over long periods of time?

    Comment by Whiteboard — April 3, 2007 @ 5:07 am

  31. […] Metalink » Web page readability: Green text on yellow works the best - Green on yellow is the best color scheme in the most conditions except for italicized Arial, for which it’s the worst - Times New Roman on average is much better than Arial - The combination, which gives the fastest response time is (surprise) italici (tags: design ui usability visualization ux webdesign readability color) […]

    Pingback by Andre’s Blog » Blog Archive » links for 2007-04-03 — April 3, 2007 @ 6:34 am

  32. I prefer red text in heavy or bold sans serif font against black. While it won’t win any design awards, I found it the most legible and least fatiguing color scheme.

    Comment by Tagg — April 3, 2007 @ 8:32 am

  33. […] http://www.metalinkltd.com/?p=91 (No Ratings Yet)  Loading … […]

    Pingback by Lunchtime Links » Web page readability: Green text on yellow works the best — April 3, 2007 @ 3:29 pm

  34. looks like plan 9.

    Comment by mennis — April 4, 2007 @ 7:52 am

  35. […] Bizarrely, green text on yellow works the best. […]

    Pingback by the new shelton wet/dry — April 4, 2007 @ 1:59 pm

  36. […] 14 April, 2007 by Rob I was perusing digg this evening, and I came across this article about color choice and on screen readability. According to the study, Times Roman italic in green on a light yellow background (sound familiar?) is the optimal combination from a readability standpoint. Choosing a good color scheme for your site isn’t just necessary to facilitate reading; it’s also important to pick colors that reflect the meaning and intention of your site. […]

    Pingback by one thing new » blog archive » Weekend Web Developer: All About Color — April 15, 2007 @ 8:12 am

  37. […] read more | digg story Posted by seethepost Filed in news […]

    Pingback by Web page readability: Green text on yellow works the best « See the Post — July 11, 2007 @ 12:47 pm

  38. Found this article and I think it should be the first thing that any blog template designer reads. Some of the new blogs that I’ve seen are terrible.

    Comment by Dave — August 8, 2007 @ 5:33 am

  39. […] read more | digg story […]

    Pingback by Web page readability: Green text on yellow works the best « Web Design Tips, News, Tricks, Whatever… — August 16, 2007 @ 7:25 pm

  40. […] read more | digg story […]

    Pingback by Web page readability: Green text on yellow works the best « shirley’s notes — August 30, 2007 @ 6:17 pm

  41. I’m working on installing a new look blog and I found your article. The green on yellow might be most readable but it can end up looking butt ugly.

    Comment by db — October 9, 2007 @ 4:16 am

  42. Thank you foips i will try that green on yellow text, hope itr this t will work.

    Comment by Adam — November 12, 2007 @ 7:09 am

  43. This may be the most readable combination, but is it the most desirable, i.e., does it provide the best experience? I would argue not. It’s quite ugly. This finding needs to be balanced by aesthetic considerations.

    Comment by T. Meehan — November 30, 2007 @ 8:44 pm

  44. […] Web Page Readability - This insightful article covers some of the common mistakes still being made today in regards to text readability on the web, and delivers the secret color combination you may be surprised to hear about. […]

    Pingback by The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007 « arcagility — January 14, 2008 @ 2:57 pm

  45. Fun Fact: Raptors have the highest visual acuity measured (8X human). An eagle can spot a rabbit one-two miles distant [http://ebiomedia.com/gall/eyes/sharp.html]. I wonder how the following parameters affect our vision:
    Contrast: higher is better (not more attractive, but easier to see)
    Brightness: medium is better (surprising-if the background is too bright, the eye is strained generally)
    Sharpness: better edge definition increases recognition
    Font: simple and clear explanation here - http://www.w3schools.com/quality/quality_readability.asp
    Duration: long enough to excite retina cell, but not so long it gets saturated and stops responding. Also see http://en.wikipedia.org/wiki/Saccade.
    Distinction - flowing letters (italics) are harder to read. Also, background images obscure letters.
    Complexity - more pixels devoted to non-letters makes the brain work harder to collect letter pixels, to ’see’ the letters.
    Familiarity - if your brain has seen this pattern before, it processes it faster (use style guides and templates for readability, do something else for innovation).
    Language – rich subject: use plain words, but new sequence, or few will reach the.

    Comment by Alain Trottier — February 13, 2008 @ 5:33 pm

  46. Addition to my earlier post:

    Length of read: how long one spends reading in one sitting matters. What is easier to read after 100 minutes is different from is easier after only 10 minutes: it changes.
    Ambiant light: complex issue. I don’t understand this one.
    Italics: I should have said, “Flowing letters that are too slanted are harder to read.”

    Comment by Alain Trottier — February 13, 2008 @ 5:37 pm

  47. […] Web Page Readability - This insightful article covers some of the common mistakes still being made today in regards to text readability on the web, and delivers the secret color combination you may be surprised to hear about. […]

    Pingback by 2007年最热门的50篇关于网页设计的博客日志和资源 | Blue apps ! — March 12, 2008 @ 2:19 pm

  48. I havn’t done the project yet but I have yet to do it sometime this month. Happy St. Patrick’s Day!

    Comment by Pat Turnbucket — March 18, 2008 @ 3:09 am

  49. Any soft contrast I like :)

    Comment by Roger — March 19, 2008 @ 9:49 pm

  50. […] Web Page Readability - This insightful article covers some of the common mistakes still being made today in regards to text readability on the web, and delivers the secret color combination you may be surprised to hear about. […]

    Pingback by 站在巨人的肩膀上 » The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007 — June 27, 2008 @ 5:35 pm

  51. Some consideration needs to be made for people that are colour blind. Many colour blind people have great trouble reading the text on many webpages.

    Comment by Donna — May 5, 2009 @ 7:27 am

  52. […] Web Page Readability - This insightful article covers some of the common mistakes still being made today in regards to text readability on the web, and delivers the secret color combination you may be surprised to hear about. […]

    Pingback by 101 個必備網頁設計網站 - 免費網站資源, 顏色圖像設計技巧, 網站建設教學 | HKWebDesignBlog.com — May 17, 2009 @ 5:15 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment