Website design, text readability, & contrast — some interesting links

I ran across a site the other day called Web Pages That Suck. I started browsing & it has a lot of really good stuff — both humorous, but also very useful.

While reading through the 20 worst websites of 2011, I came across an extended rant discussion about contrast on web sites.

If you are building a web site & you want it to be readable, you need to look into contrast. (And if your website isn’t readable, probably no one will use it.)

One of the quickest guidelines I found is “view your site in monochrome”. If you put it in monochrome & it’s blah, with no visual landmarks or differentiation between sections, then you have a problem no matter how great your color scheme, layout or content is. (I’ve already read “view it in monochrome” in design tips for lots of other things, from drawing to jewelry design to photography.)

A really good — and very pointed — website about the need for contrast is Contrast Rebellion. And honestly, the graphics layout & design by themselves are really fun to look at. (I couldn’t the slideshows to work, but it’s such a minor part it doesn’t really detract from my enjoyment of the site.)

Web Designer Depot has a nice article on contrast in general, not just text & color, but size, placement, layout, etc.

It turns out the Worldwide Web Consortium (W3C) has developed a standard for Web Content Accessibility Guidelines (WCAG), and contrast within a website is part of that standard. Some of the other sites I visited note that as people get older, their eyesight deteriorates, so a site that is no problems for someone who is 20 might cause big problems for someone who is 60.

While there’s a little bit of math at the WCAG contrast page I linked above, there’s quite a bit at the Wikipedia Visual Contrast page. I’m adding the link for that just so I can reference it later — I’m pretty good at math but I think it’ll be a long time before I get so concerned about contrast I start looking at those equations.

And A List Apart (one of my favorite sites to browse through anyway) had a really good March 2010 article titled “Contrast Is King”.

Some sites that are more tools-to-use-right-now (and yes, most of these were taken from the articles I just linked to, but part of the reason for this post is so I can go back & easily find this information for myself later):

Colors on the web lets you input the hexadecimal codes for two colors & tells you right away if they meet the recommended web design standards for contrast.

Check My Colours will let you type in a website address & it will test entire page for you. Thoroughly. Very thoroughly. Out of curiosity, I typed in the address for this little blog (which uses one of the premade WordPress.com premade themes) and in about 5 seconds, it told me it had tested 1185 elements and found 385 failures. Wow.

Color Scheme Designer helps you design color schemes, and will also show you the color schemes in monochrome & how the color schemes would be seen by people with different types of color blindness. In a post in October of last year I had a link to another color scheme design site, kuler. kuler has a bit more regarding ways to look at color schemes artistically — do they set a mood, are they cool or warm, etc? But I think I like Color Scheme Designer more, especially with the options to check monochrome contrast & see what colors look like to someone who is colorblind.

Speaking of colorblind, Colblindor is a blog all about color blindness (of which there are many types, and more men than women are colorblind, I didn’t know that before). There’s even a page on Colblindor that lets you upload an image then run it through different filters to see how it would look for various types of colorblindness.

And lastly, while I was digging around, I also found Linotype.com, a site with tons and tons of fonts. F0r all the talk about color & contrast, choosing a readable font is just as important too.

One thought on “Website design, text readability, & contrast — some interesting links

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s