A not so flattering distinction, but issue was not as bad as it sounds: We were featured on Websites that Suck

SO, it was not the most flattering distinction, being featured on Websites that Suck  yesterday.

But the good news is that we got a fairly flattering review, in terms of what we do and our mission. The author, Vincent Flanders, even recommended that nonprofits should join us, if they do not yet use us for their software needs.

Having said that, Websitesthatsuck.com is about web design, and even though we just launched our new home page, we didn't escape the critical eye of Mr. Flanders.  His main criticism was the grey that we used for the font. He thinks we were not totally spot-on with our accessibility efforts and that we should have gone with basic black. 

We want to know what you think about his article, and about the new site. What are your thoughts and feedback?

Susan Tenby

Online Community Director, TechSoup Labs

SL avatar: Glitteractica Cookie

Skype/AIM/Yahoo: suzboop

Twitter: suzboop

There is a HUGE difference between the new TechSoup home page and Green Mountain Mall - http://www.greenmtmall.com/, despite the accessibility issues.  Unfair assessment.

The only bad thing he had to say about it was contrast between #666666 and the white background.  The "rule" of the W3C isn't the hard and fast rule for everyone.  I know people who thumb their nose at the W3C basically because they can talk about all the standards they want, but for some reason, HTML is still different between browsers and OSs.  Because the people giving us software don't care about W3C standards either.

It looks great on my screen.  The contrast rules are probably considering backgrounds other than white.  Its a general rule to follow, using the simplest math possible (and I'd like to point out here that the algorithm is run off another site, not the W3C site itself).  Personally, I really don't like the design of web pages that suck, either.  It looks rather bush-league to me.

Do a find a replace in the .CSS files and see how it looks at #555555 and #000000.  It might be a valid point, but I'm fine with it.

I have to agree with Mr. Flanders.  While the new website is a marked improvement over the old one, lighter text is flattering only to those with the keener eyes to appreciate it.  As a designer myself, I never go lighter than #333 for any body copy on a web site.  TechSoup is a fantastic service for so many but this is the potential to do a disservice to some.

It was a good plug for TS. And obviously to get that kind of attention  because of a relatively minor problem in text color means it's an important web site.

I will say, that I do I agree with Flanders on the text color issue. I also do not care for gray text on white background because I find it hard to read. I prefer the higher contrast myself.

Sasha

Hello all, I am the visual designer and am working with TechSoup.org.

We are definitely concerned about usability issues for anyone. Although we wish it wasn't this way, we are happy for the feedback. Grey is part of the new TechSoup color palette and I very much did not want to use black text, even if it is "in" as Flanders says. TechSoup wanted the site to be light and airy and with so many calls to action in such a small space, black text, or even just very dark text, would not have allowed that. #666666 is a grey that has been around a long time and I have seen successfully used on many sites and have used myself, though I completely understand different site communities have different technology, different designers and users have different tastes. We care about yours.

But now I'm here, and having said all that behind the whys, we are looking to darken the grey as soon as possible to help those who have issues in readability. So don't worry, we are hearing you, I am hearing you.

TechSoup is a non profit and we work with limited resources and generous people.  As there is such a diverse variety of computers, browsers, monitors and people out there we hope to work with the community to address these things as TS.org grows. Please keep us posted with all your feedback about the site. I will personally try to address any usability issues in the design that I can. :) Thank you for your support!

am I the only one that thinks "D'oh!" when I read Flanders!?  lol

Interesting.  Just read Flanders' review of Techsoup.

I can certainly understand his point about making text more legible to read.  And of course you want to make sure your site accomodates your audience well.  But I don't agree with his take on the #666666 grey as an alternative to using strictly black (#000000) color for text.  I think this is an exaggeration -- it's really not that big a deal.  I've used #666666 grey often as text color on sites and never got a complaint.  Like Jen pointed out, I think this particular shade of grey works just fine on sites, in general.

The real issue here is -- who is your target audience?  And knowing who they are, of course you want to cater to their needs in the best possible way.  So, for example, if your site provides information to seniors about community programs and the like, then you need to keep the specific needs of this audience in mind when designing your site.  In this particular example, common sense dictates that you should make your content easy to read for older people.  Easy to read both in terms of font size and font color.  So here you have a stronger case against using using grey #666666 text, opting instead for black #000000.

Key questions to keep in mind again: Who is our audience? Who are we primarily targeting our information to?

By answering these questions you'll formulate a profile of your "typical" user.  And this in turn will help inform your web design decisions so that you can accommodate your audience in the best possible manner.  You can also learn a lot more about your visitors by putting up short surveys for them to complete on your site.  In the survey itself you would ask both specific questions (Yes/No, rating scales, etc.) and open-ended questions to get the feedback you really need to make meaningful site improvements.  Possible survey questions include the following:

1. Please share any general or specific comments about your experience using our site. (This is open-ended question allowing for valuable user feedback)
2. How would you rate the general design of our site?
   (rating scale: 0=Poor to 5=Excellent)
   A user's rating of "Poor" could then prompt an appropriate follow-up question:
3. What would you change about the site?

And so on... The more information you collect from your audience, the better you'll understand them.  Armed with this data, you'll be able to optimize the look and feel of your site accordingly to give your visitors an excellent user experience.

In the case of TechSoup, I personally don't have a problem with the #666666 grey because for me the text is dark enough to be able to read without a problem.  But the needs of TechSoup's wider audience base needs to be considered here.  Sometimes you just need to go ahead and launch a new design and wait to see what kind of feedback it generates from your visitors.  As long as you've kept your target audience in mind when preparing your site for them, any of the design specifics can always be tweaked and improved upon later on based on their feedback.

Personally, for me, I would think that the smaller font size would pose more of an issue to some TechSoup readers than the actual (almost insignificant) difference in color between the black and grey text.  I'm not suggesting that it is an issue.  All I'm saying is that a discussion about font size carries more weight than one about some trivial font color variation.  So I'd probably look at that aspect first before worrying about the color issue.  I have no problem with either aspect, but hey that's just me!

Yann

I, personally, do not care for the grey. It casts a "dirty" look to the page in my opinion.

Granted, I have had over a dozen eye surgeries, and am blind in my right eye. I acknowlege that I see things differently than most people.

What I have done for customers in the past, is place a button on the page for a "high contrast" version of the website. Here is how it works....

As the programmer, you establish the colors of your website as variables in your code. If a surfer hits the "high contrast" button, a script sets those variables to a certain set of colors. If the "high contrast" button is NOT clicked, the default colors are utilized. This puts the decision in the hands of the visitor. Obviously, cookies can be used to store the visitor's preferences as well.

Want more choices? Come up with several color themes and let the end user choose from a drop down list and change the colors at will. Give it a try. It is easier than you might think!

tclaremont,

I think a high contrast option/button is a great suggestion! We have an above average amount of bandwidth and technical limitations because of backend information systems integrating years of information and talking to eachother. Think sharepoint and a few other systems. Things that normally would be very easy to do on the front end are more challenging then normal. But I will see what I can do to have this implemented and we will also darken the grey in the meantime.

Thanks so much for your input. :)

As a member of the user experience team for the redesign of TechSoup.org, I thought it might be interesting to conduct a quick usability test of our homepage with a senior that hadn't used our site before and has a diagnosed sight issue of stigmatism, my Mom :), then compare her input to that of Mr. Fletcher.

Here's a summary:

1. What does this organization do?

A: Provides a learning center and discounted products

2. How would you search for products?

A: Over on the right under Products

3. Where is the learning center?

A: Under Getting started.

4a. What pulls your eye in the most on this page?

A: The girl with the globe

4b. Can you read me what it says?

A: Yes. She read through the spotlight content in the middle until the end of the bolded line of text. Then she put her glasses on
(so far, the test had been conducted without her reading glasses) to continue through the rest of the content.

5. How many products are for sale?

Over 600.

6. How would you login?

A: {Pointed to the link in the ordered list at the top of the page}

7a. Would you change the color to black to be more readable?

A: No. I want this to be more than reading a newspaper, more than reading a book, it's the internet.

7b. Are you sure?

A: Yes. Reading would be monotonous. Grey is restful on the eyes.

I understand the reflex to paint the text black - I think it works well in our palette as an accent color. I also agree that our current choice of grey may not have enough contrast to meet the needs of some with vision impairments. As a person with a vision impairment myself (I am blind in my left eye), I welcomed Jen's choice of text color change as stark contrast (such as our old design) can cause me blurred vision and limit my time in front of a monitor.

Obviously, this is all anecdotal input as neither my Mom or I are members of TechSoup's target audience. However, it illustrates that accessibility and usability are complex issues, and difficult at times to determine when a design works. This is why we are committed to user testing of our work with our audience, and listening to you, our community, during this redesign process.

I invite you to check out our new feedback tool we rolled out with our redesign (see the 'Feedback' tab on the right of the HomePage), and look forward to hearing from more of you on this issue.

Colleen Nagle
User Experience Team
TechSoupGlobal
 twitter: subamerica

Personally, the color of the text doesn't bother me either way.  I will say that I have sharp eyesight so I am not limited as some of the other posters.  I have seen far worse for contrast issues. ( Think yellow on a white background.)   In those cases, I highlight the text that I want to read to make it easier on the eyes. 

Just as an FYI... I posted this on My Facebook page and there were also several comments by people who thought the gray text was difficult to read.  This thread has been so helpful and I wanted to thank you allfor taking the time to post your opinions!