Focus On Typography, Part 1: Contrast

typeThere’s a lot more to typography that just picking a font. It is the ability to choose an arrangement of type that is legible and attractive. In this series, I’m taking a look at four fundamentals that can help you maximize the readability and improve the look of your website. They are;

  1. Contrast
  2. Hierarchy
  3. Space
  4. Size

Today, let’s look at contrast.

When we talk about contrast in typography, it can mean several things.
• The contrast between large and small type.
• The contrast between different typefaces, for example a script font used for a heading and a sans-serif font used for body copy.
• The contrast between the font colour and the background it appears on.

In a nutshell, contrast is an important factor in how easy it is to read text. You want to avoid making your web visitors squint, or feel the need to put on sunglasses when they visit your site and you can do that by choosing suitable foreground and background colours.

Let’s look at a very simple example of good contrast. Black text on a white background. It’s very easy to read.

image0022

Reversing that out, with white text on black background.

image0041

Again, easy to read. However, things would be a little dull on the web if EVERYONE used black and white. Dark coloured text with an off-white background colour, or vice versa, still provides excellent contrast while bringing a bit of colour harmony to your site. Here are some examples of contrast between text colour and background colour that work well.

image0061

Obviously this is only a small list, but the key point to remember is you want to avoid making it difficult for readers. Always ensure that there is sufficient contrast between text and its background.

image008

The above are examples of contrast from the wrong side of the tracks – they’re bad! As you can see, some of these colour schemes actually hurt your eyes and should definitely be avoided if you want to keep your readers. The top three are also nearly impossible to read.

Let’s take a look at some working examples of good contrast. I’ve picked out 5 sites that have a colour scheme which uses good contrast, none of which are black and white.

ArtDesign

image010

Sans Ink

image012

Mr Vector

image014

Blue Bonnet Cafe
image016

Lee Munroe

image018

Tomorrow we’ll take a look at how hierarchy can affect typography. In the meantime, have you come across any nice or unusual colour contrast on a web site that you’d like to share?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.pixeline.be pixeline

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

  • http://www.clearwind.nl peach

    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

  • agentolivia

    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)

  • http://www.laughingliondesign.net jennyrusks

    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.

  • David

    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.!

  • alexc

    @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.

  • Matt

    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.

  • Anonymous

    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.