May 2012

User Experience #5: Contrast

by Steve Wortham
Contrast is one of the more important concepts in design. And it can affect the user experience in a profound way. I mean, this text is a little hard to read, isn't it?  I would say that this is much more pleasant.

In fact, in the above examples, there's a good chance that those with red-green color blindness will not see the statement, "this text is a little hard to read" at all.

So you have to be especially careful with contrast when text is involved.  Fortunately we have some contrast guidelines from the W3C.  As a rule of thumb I think it's wise to try to at least meet their "AA" standards explained in section 1.4.3.  The intent of the AA standards is to "provide enough contrast between text and its background so that it can be read by people with moderately low vision."  That means a contrast ratio of 4.5:1 for small text and 3:1 for large text.

There's a nice tool from snook.ca called the Colour Contrast Check.  And I'd recommend checking your own website's colors to make sure you're meeting the AA standards.