Sunday, April 1. 2007Crimes Against Web Usability 2
I'm very interested in applying scientific rigour to usability analysis, and also to web design. It irritates me when designers talk about a color being “not deep enough” or “too warm” as I can’t take that and see a way to fix it. I’m complaining about designers, I just don’t understand their language. I like formulas though. They’re very easy to apply, and you can see how to tweak the inputs to get the right result. For example, there are two checks you have to do for colour contrast. Poor contrast results in people not being able to read the text, and thats a crime against web usability.  The above contrast is used heavily by one of Ireland’s self proclaimed leading web design agencies. It doesn’t take much science to realise that is illegible. Good contrast has two criteria, a significant difference in brightness, and a significant difference in color. Both are these are easily quantifiable, and this post shows both how to measure a contrast, and why the above color scheme is criminal. Difference in BrightnessForeground and background colours should have a sufficient difference in brightness enabling you to focus on one leaving the other in the background. To calculate the brightness of a colour use the following formula... ( (Red × 299) + (Green × 587) + (Blue × 114) ) ÷1000 The difference in brightness of the two colours should be greater than 125. Ensuring a sufficient difference in brightness alone isn't sufficient. For example a bright blue on a dark blue doesn’t work well despite passing the above criteria. You might think this is ok, but you wouldn't read a page of it. Difference in ColourThe other variable is the difference between the colors, and you can calculate it using this formula … (Max(r1,r2) - Min(r1, r2)) + Where the 2 colors you’re validating are represented as (r1,g1,b1) and (r2,g2,b2). If the output of the above formula is not above 400, then you shouldn't use the colour combination. The W3C recommends a difference of above 500 to guarantee legibility on all monitors. So if we look at that criminal example from earlier, we can methodically show that it is a bad combination with poor contrast. The colors used are a light grey (224,225,226) on white (255,255,255). This results in a brightness difference of only 30 when it should be above 125, and a color difference of 90 when it should be above 400. There are cases when you can break these guidelines, but you should be aware that you are doing so rather than blindly screaming “I am a creative, no one can constrain my art ”. For example, you can get away with the above color scheme for a heading, so long as you’re using a large enough font. See this sample page It’s common practice on the web to use very light footers, as if the information there is background material. This is a weird trend. Everything on a web page should be easy to read. If it’s not worthy of the visitors attention, then it’s not worth having there. No one cares if your page validates, or what year you designed it. Update: Another shocker for atrocious contrast comes from Type directors Club, who make use of white on super bright green. It is painful. Brightness of 21 (should be 125+) combined with color difference of 126 (should be 500+) make for an troublesome read. Trackbacks
Trackback specific URI for this entry
No Trackbacks
Comments
Display comments as
(Linear | Threaded)
Your seriously posting an article about readability with white font on black background? my eyes are already hurting...
Try switching to ClearType in windows, it should make the page much more legible, especially if you're using a high resolution.
Or click the bit "Dark on Light" Button in the top right of the interface.
Yeah, I seriously am.
If your eyes hurt, then there is probably something wrong with them. If you can't handle it, change the page style (A dark on light version is supplied), or switch to print view. Or better yet, post a comment asking a silly question : In all seriousness though, I'll probably move to a light on dark at some stage. It is funny how Apple can get away with the color scheme and no one complains. (apple.com/macbookpro) -- Des
I have to disagree. I like light on dark. Having a variance is really nice - most apps are dark on light, so looking at this webpage or working on some code (my text editor is light on dark also) is a nice break for my eyes. Using the [Command]+[Ctrl]+[Option]+[8] option on my Mac really helps when it's late at night after hours of coding/browsing too.
Yeah Paul,
As I said in the article which you probably "skimmed briefly" if at all, you can use low contrast with a large font size. I even did up an example to clarify this point.
Ah yes,
having had a look at this: http://www.minds.nuim.ie/~provost/images/des2.jpg I can see where I was going wrong.
Yes, you can use low contrast with a large font size and yes, you can change the page style (A dark on light version is supplied) and yes, I also like light on dark, but the fact is that white font on dark bg is harder to read, I'm not the first who said this, right?
Zork,
There was research done in 1996 that showed that comprehension was 18% better for dark text on light backgrounds. That is the most recent research I can find on the matter. You're not the first to say it, that's for sure. But to be fair I do get some email from people saying they like a darker background. I'll be providing a javascript style switcher shortly which you can use to keep with the ultra bright web as we know it.
Was that research done with paper or with screens? Paper only reflects light (and is thus by definition low-contrast), while screens actually emit light (and tend to have higher contrasts).
Personally, I think white background with black text makes a lot of sense for paper, but for screens, having a dark background with brighter text may actually be better (for quite some time, I used to program on a text editor with dark-blue background and medium grey text). The important thing is not to overdo it. If you have dark backgrounds, you should probably go with medium grey text, not bright grey or even white text. You linked to Apple's MacBook page in another comment. That page has smaller text, and it appears the text is darker, too, which makes for less contrast, which makes it somewhat easier to read than your page here. Although I do think that the bold, brighter titles ("A 2.16GHz or 2.33GHz Intel Core 2 Duo...") on Apple's page still have too much contrast.
In fairness to all those saying that Des is using a white font, he's not.
He's using what looks to be a light grey font.
I find the "type here" text to be perfectly readable. But then, I'm using solaris 11, which has all sorts of stuff that appple will eventually rob.
Well, one of crimes is usage of fixed width columns which takes about 1/3 - 1/2 of screen for content.
Hate this, especially when working on widescreens
Fair enough PiRX, but as a counterpoint pretty much all the literature says that a line length of approximately 60-80 characters (11 words) is optimal for online text.
(http://psychology.wichita.edu/optimalweb/text.htm) Less lateral movement of your eyes while reading increases comprehension. If it was easy to knock this into a liquid layout that works every I would do so, but that said, I'll still try to keep line length to something easily. I do take your point though, and thanks for reading PiRX.
Thanks for explaining how to calculate brightness. We took your formulas and coded them.
http://www.cedarcreeksoftware.com/brightness-calculator.html Do you have any background on where the constants in the formula come from?
Hi Joe,
The original formula was created for the YIQ colour space. Wikipedia shows how you can convert between YIQ and RGB using matrix multiplication. http://en.wikipedia.org/wiki/YIQ http://www.w3.org/TR/AERT#color-contrast Regards, Des
Hi Des,
Interesting post and discussion! I also really like the idea of being able to scientifically verify statements about elements of usability like those you mention above.. I just came across a paper (via the Etre blog) published by Austin State University which claims (based on psychological study) that green on yellow is best for readability. http://hubel.sfasu.edu/research/AHNCUR.html Despite the fact that it was published 10 years ago, I wonder how those colours would stand up to your scientific analysis? Regards, Clodagh
Hiya Clodagh,
Thanks for dropping by. I was sent a similar report on April 1st , and I presumed it was a joke! As for Green on Yellow, it's interesting. The study does indeed find those results. And the colour scheme (#006600 on #FFFFCC) passes the above criteria. Brightness Differnce (189) is well above 125, and colour difference (612) is well above 400. The only problem I see with these studies is that they are rarely updated despite advances in both font rendering, and monitors. All the main work on web legibility and contrast was done when even professors were using 15" CRT monitors that had poor colour performance. Also the results just seem weird! In order, the most legible combos were... 1) Italicised TnR in Green on Yellow 2) Plain Courier New in Green on Yellow 3) Plain Arial Black on White 4) Italicised Courier new , in Yellow on Black. I was surprised to see Courier New in there at all, given the that experiment required recognising individual words in a paragraph of text. I would have thought a monospaced font would be worst. I'm kinda hoping we don't see an uptake of Green on Yellow Times New Roman Italicised headers, whether its legible or not.
As an update, I've done up a sample page of the above results...
http://www.destraynor.com/contrast2.html Maybe it's just me, but #3 is just screaming "READ ME" , while the rest are a little busy.
Not sure if this was mentioned, but I'd be fairly sure the low contrast in that example was on purpose and that the links weren't for humans, but for search engines.
Generally though, I think relying on absolutes like the ones given here is frivolous. In design, everything is about context. Lowering contrast on some text can be a means to highlight other text that's more important. Contrast is merely one tool that you have when designing. Professional designers use their knowledge of contrast and readability to inform their design process and meet the goals of a project.
Well as I said in the article...
"There are cases when you can break these guidelines, but you should be aware that you are doing so rather than blindly screaming “I am a creative, no one can constrain my art ”. For example, you can get away with the above color scheme for a heading, so long as you’re using a large enough font." As for deliberately hiding content so that Google sees it but not humans 1) Isn't that a bad idea? 2) Why not set display:none; instead.
Indeed you did, I was merely emphasising the point in case it got lost in all the talk of readability studies.
Yea, the SEO stuff is a bit dodgey, I think you can get away with light text, using display: none; can get you banned from Google though if used in that way (as far as I know)
Excellent essay. It is very useful for me. Thank you very much http://www.tourhag.com/iyinet-webmaster-forumu-2008-seo-yarismasi/
|
About:Switch to Dark on Light!
This website is the online diary of me, Des Traynor, a User Experience Researcher in Dublin, Ireland. I work with Contrast. I usually write on 5 topics: I update about 3-4 times per month. Be sure to subscribe so you don't miss this good stuff. If this is your first time here, check out the archives.My official homepage provides more information about who I am, and what I research. You can contact me at destraynor [at] gmail [dot] com Quicksearch |
{document.getElementById(%22switcher%22).style.display=%22none%22;document.body.style.background=%22#fcfcfc%22;document.body.style.color=%22#333%22;document.getElementById(%22blogbanner%22).src=%22http://www.destraynor.com/serendipity/templates/destraynor/header-alt.png%22;function%20changeSizeColor(tag,size,%20color){var%20elements%20=%20document.getElementsByTagName(tag);for%20(var%20i=0;i<elements.length;i++){elements[i].style.fontSize=size;elements[i].style.color=color;}}var%20all%20=%20document.getElementsByTagName(%22*%22);for(var%20i=0;i<all.length;i++){all[i].style.background%20=%20%22white%22;all[i].style.color%20=%20%22#444%22;}changeSizeColor(%22h1%22,%2232px%22,%22#333%22);changeSizeColor(%22h2%22,%2222px%22,%22#222%22);changeSizeColor(%22h3%22,%2220px%22,%22#111%22);changeSizeColor(%22p%22,%2216px%22,%22#444%22);changeSizeColor(%22a%22,%22%22,%22#cc0000%22);var%20paragraphs%20=%20document.getElementsByTagName(%22p%22);for(var%20i=0;i<paragraphs.length;i++){paragraphs[i].style.lineHeight=%22150%%22;paragraphs[i].style.fontFamily=%22Arial,Helvetica,Verdana,sans-serif%22;}})()){kind=link}