YouTube RSS

Why low contrast text is a poor choice

I have a friend who recently changed their Windows Live Messenger font colour to bright green. This is very difficult to read on the default white background, though they don’t see the inherent problem with the colour choice.

So here I will explain why their choice in colour was a poor one, and perhaps help out any web developers or artists who aren’t aware of just how important contrast is for text.

What is Contrast?

Contrast is the difference between two colours. You usually want a high contrast between text and the background colours. Low contrast makes text more difficult to read. Black and white create the highest contrast possible.

Yup, glasses

Yup, glasses. example of high contrast.

The two colours we are looking at here are White #ffffff and Green #00ff00. Here’s some green text!

If we use the World Wide Web Consortium’s Web Content Accessibility Guidelines 2.0 (W3C/WCAG), we see that the minimum sufficient contrast ratio for regular/small text is 4.5:1. White and Green have a contrast ratio of 1.37:1, which falls far below the minimum required standard. Even an improvement to half the minimum standard (2.25:1) would be relatively easily readable (depending on the colour), in my opinion.

Also to note, I chose to use a W3C guideline because it makes no difference whether the text is appearing in a web browser or an instant messaging window, and it is a guideline to which many of you will be familiar.

So, what does this mean?

Well as our text has a low contrast ratio, it is much more difficult to read, harder on the eyes, and more prone to causing headaches. I’m sure we’ve all experienced this at one point or another, usually on a badly made Geocities website or MySpace profile. The problem is also further exacerbated when text is being viewed on a computer monitor or smart-phone, as unlike an ordinary piece of paper you are in fact staring into a rather bright light.

Ow ow ow ow ow

Does she have a headache, or is she listening to the voices?

It’s worth noting that while everybody’s eyes are human and subject to the same tolerances, those tolerances can change slightly from person to person, which may go some way to explaining why my friend doesn’t see a problem with their text. Some people may not find this low contrast issue as bad as others, though I believe most would still be negatively affected. Regardless of how tolerant somebody is to this eye strain however, it is still bad practice to produce a document that puts any strain on the eyes at all.

One last thing…

My friend is using a somewhat bold font that does not come as standard with Windows XP Pro SP3. This provides them and anybody that has this non-standard font a slight advantage over the rest of us, as low contrast text becomes easier to read the larger it is. You should always take into account that most people won’t have a non-standard font installed on their system, and put standard fallback choices into any web page you build.

Peace out.

One Response

  1. Daniel

    Good points, but…:

    Why is your text gray instead of black?

    And why is the text in this comment box an even paler gray (and on a gray background!)?

Leave a Reply to Daniel Cancel reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Home Technology Why low contrast text is a poor choice