020: Contrast Is Your Friend

Part 5 of our 10-part series, 10 Things Every Developer Should Know About Design

Ok, so the principle is simple. When you’ve got something that really needs to stand out, up the contrast from the bg element. But it’s not the extremes that people have a problem with, it’s the “gray” areas (literally).

Now the W3C has come up with a formula to determine the difference and brightness between your colors:

Color brightness is determined by the following formula: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Color difference is determined by the following formula: (max (Red 1, Red 2) - min (Red 1, Red 2)) + (max (Green 1, Green 2) - min (Green 1, Green 2)) + (max (Blue 1, Blue 2) - min (Blue 1, Blue 2))

And if you’re like me… that just went right over your head. Fortunately there are a lot of great tools out there to help:

AND NOW ON TO THE CONTROVERSY: Body text, should it be dark on light or light on dark? I’d love your feedback on this… is light text on a dark background hard for you to read? Is dark text on a light background better?

Join us Monday as we consider the question: Is Bigger Better?

  • posted on 24 October 2008
  • by Jesse

InterAction:

26 October 20081. Stephen Graham:

I think that the ambient lighting has an effect on whether lighter or darker is better for me. In my two offices, one has fluorescent overhead lighting, the other is natural lighting from a window behind me. Under the fluorescent lighting I prefer light on dark. In my office with the window at my back I prefer dark on light as the dark background shows much more glare. If the end user is limited to a specific environment I think it would be good to design with consideration to the ambient lighting.

27 October 20082. Jeremy Killian:

I'm going to have ask that you never sing that song again. :)

27 October 20083. Dan Wolfgang:

Dark on light, light on dark: obviously this mostly goes back to the history we have with reading: books, newspapers, etc are almost all printed with dark on light. IMO, this makes dark text more readable just because of what I have been trained to accept.

The trick is this: more contrast is not necessarily better. Newspapers are not black text on white paper, they're dark grey text on light grey paper. Books are dark grey text on off-white paper. Similarly, this site is white and light grey text on a dark grey background. Black on white and white on black is jarring and harder to read.

Contrast, color, our perception, and the human eye and brain is an awesome topic. A great discussion of this can be found in the book Real World Color Management.

28 October 20084. Jeremy:

Not to mention the font itself. Some fonts are so thin that their edges are much more fuzzy when they are presented as white on a dark background, where the same font would be easily legible when rendered at black on white. Also, consider the difference of a machine font like Courier versus a thin sans-serif font.

YourThoughts?