Text Colors

By | July 1, 2004 | Web Design Tutorials & Articles

15
  • Print
  • Print

A short but sometimes overlooked aspect of web design (at least on my part): Some people are color-blind. So, underline hyperlinks… just because you CAN set text-decoration to “none” doesn’t mean that you have to! (Links used in obvious navigation menu areas are the exception to this rule.)

Also, since the majority of color-blind people are red-green color-blind, you should DEFINITELY not have un-underlined red hyperlinks.

In a weird kind of inverse relationship, since blue is so often associated with hyperlinks, Jakob Nielsen’s advice is to avoid using blue for non-link text.

…

I probably won’t be posting this next week, because I’ll be on vacation in Boston celebrating my two-year anniversary with my hubby! (Humidity and swan boats, here I come!) Have a fantastic week!

Written By:

Corrie Haffly

Corrie is the lead designer and developer for PixelMill and their in-house brand, jgtemplates. This would-be triathlete has a mathematics degree but wishes she had double-majored in computer science and art instead. Maybe next time...

Website
>> More Posts By Corrie Haffly

 

{ 15 comments }

Michael October 9, 2005 at 5:28 am

Is there a firefox extension that underlines all hyperlinks? There’s a setting in the Preference/General/Fonts and Colors dialog, but in order to override the website’s settings, you need to change the colors as well. I just want to change whether the link is underlined or not. Thanks!

Rizwan July 12, 2004 at 7:26 am

Good approach! I am also towards underlining the links. But if you dont underline it for any specific reason, be sure to use a:hover {text-decoration: underline;} and color it different from others. It should work!

Anonymous July 4, 2004 at 3:10 pm

Have a nice vacation! Hope you remember to go to the MFA!

polvero July 3, 2004 at 6:12 pm

I thought this was a great entry. I have Jakob Nielsen’s “Web Usability” book about 2 years ago (at the full price: but on sale now -> http://www.amazon.com/exec/obidos/tg/detail/-/156205810X/104-0523909-0772710?v=glance )
and I just couldn’t get myself to practice what this guy was preaching, but as the years passed, I’ve come to known that this guy is actually right. I cracked up too when I read the comment @ designbyfire ( http://www.designbyfire.com/000094.html ). It’s a designers nightmare to want to follow usability guidelines. But in the end as we all know, content is king, and we want to be able to let people “useit” as jakob would say.
Good blog entry Corrie :)

Allan_Gardyne July 3, 2004 at 3:56 am

Thanks for the reminder! I really must change the color of thelinks on my site.

Octal July 2, 2004 at 6:26 am

Great links Xenon, thanks.
One of my good friends is red/green colour blind but he only has trouble if those two colours are next to each other, but I also remember my art teacher saying “red and green should never be seen [together]” :)

Thanks for the reminder Corrie

AlexW July 1, 2004 at 8:13 pm

Makes sense, but what about having links appear as bold and un-underlined?

Then you’re asking your users to learn something new (I.E. that what they currently understand about identifying links doesn’t apply here, and there’s a special new way of doing it here) without any discernable benefit to that user. It’s no easier to find the links. There’s just something else they have to remember about this particular site.

Simon Mackie July 1, 2004 at 8:04 pm

This was linked to before on Simon’s blog (I think), but it’s an excelent look at how usability doesn’t have to be Jakob Nielsen style dull..

Xenon_54 July 1, 2004 at 6:59 pm

“Makes sense, but what about having links appear as bold and un-underlined?”

And now, how do you make a part of your text as an emphasis? (bold or strong for XHTML)

dhecker July 1, 2004 at 3:59 pm

Euch.. Jakob Nielsen!

Ray Oliver July 1, 2004 at 3:42 pm

Makes sense, but what about having links appear as bold and un-underlined?

junjun July 1, 2004 at 3:25 pm

Good advice.
Many use red as color for required fields etc on forms, so be careful there as well.

More here:
http://www.iathink.com/2004/01/seeing_red.html

MadDog31 July 1, 2004 at 2:53 pm

Nice article/reminder Corrie. Xenon…GREAT LINKS! They will all be bookmarked!

Ian

Xenon_54 July 1, 2004 at 1:37 pm

I forgot: Have nice vacation!

Xenon_54 July 1, 2004 at 1:28 pm

If you are wondering how do things look to blind-colors people:
http://www.vischeck.com/examples/

You can also check your website with a blind-colors simulator:
http://www.vischeck.com/vischeck/vischeckURL.php

And of course, some colour pickers:
http://www.colormatch.dk/ (Internet Explorer only :/)
And another a little bit more complex:
http://www.madcorp.biz/colormapper/index.php

Comments on this entry are closed.