Comments on: Focus On Typography, Part 1: Contrast

By: Anonymous

Anonymous — Fri, 12 Jun 2009 18:46:00 +0000

Good article but I notice that cream was used on grey as an example of good contrast. The contrast of that cream and grey is only about 4.4:1 which fails the w3c accessibility guidelines.
The guidelines specify that even large type requires a contrast of 5:1 but should preferably be a lot higher.
I find a good way to visually test contrast is to actually look at a greyscale version of the graphic to see if you can still read the text. there are also a lot of tools out there to test color contrast, my favorite being the Contrast Analyzer in the WAT (web accessibility toolbar) by the Web Accessibilty Tools Consortium.

By: Matt

Matt — Fri, 12 Jun 2009 18:31:16 +0000

Just a note I see that cream color on the gray was used as an example of good contrast but in reality it fails the w3c contrast ratio for all but very large type.
The contrast is around 4.4:1 whereas 5:1 is required to meet the w3c standards.
http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18

Good article though.

By: alexc

alexc — Fri, 22 May 2009 09:50:01 +0000

@pixeline

There is no way you can call that site a rip-off. I can list you 20 great sites that use a similar layout, and that’s the only correlation I can see between them – the general layout. Not even specific layout since the navigation, elements and flow are completely different.

If deaxon has a patent on displaying your work examples to look like a bunch of photos or cards (which I assume is what you are crying about) then you need to send out about a million emails and tell half the web designers doing it in their portfolios to stop doing it.

I sick and tired of these knee-jerk accusations when two websites have vaguely similar layouts, it’s like saying Porches are all Ferrari ripoffs because they both have 4 wheels and headlights.

Get a grip, man.

By: David

David — Wed, 20 May 2009 18:35:23 +0000

I think it is ironic that the color scheme on this page has poor contrast. Light grey text on a white background is very difficult to read for old eyes.

Please fix.!

By: jennyrusks

jennyrusks — Tue, 19 May 2009 19:32:49 +0000

Hi Peach, thanks for the link. You’re absolutely right about our sensitivity. One of the guidelines for designing for accessibility and ensuring people with colour blindness can still read your text, is to go for good contrast and if red, green or blue is being used as a font colour for emphasis, another cue should be used, such as an underline or bold attribute.

By: agentolivia

agentolivia — Tue, 19 May 2009 18:05:32 +0000

Good stuff. Perhaps it goes without saying in this crowd, but contrast is also important from an accessibility standpoint, i.e. making sure the site is readable to persons with color blindness. I’m sure there are other tools out there, but I try to remember to check my sites using Vischeck, which can check URLs and uploaded images for readability for persons with different forms of color blindness. (Link: http://www.vischeck.com/vischeck/vischeckURL.php)

By: peach

peach — Tue, 19 May 2009 17:38:05 +0000

Sometimes I notice that different hues have completely different legibility while maintaining the same saturation and luminance. I did some research and apparently we are not equally sensitive to all colors: http://www.yorku.ca/eye/photopik.htm

Thought it was pretty interesting

By: pixeline

pixeline — Tue, 19 May 2009 14:33:56 +0000

Lee Munroe’s website is a bad rip off of http://www.deaxon.com.
You might want to remove it.