Text Colors

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!

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.generationphp.net Xenon_54

    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

  • http://www.generationphp.net Xenon_54

    I forgot: Have nice vacation!

  • http://www.ianjohns.com MadDog31

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

    Ian

  • http://www.domedia.org/ junjun

    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

  • http://www.redcow.ca/ Ray Oliver

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

  • http://www.revmedia.com dhecker

    Euch.. Jakob Nielsen!

  • http://www.generationphp.net Xenon_54

    “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)

  • http://www.sitepoint.com Simon Mackie

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

  • http://www.sitepoint.com AlexW

    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.

  • http://boyohazard.net Octal

    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

  • http://www.AssociatePrograms.com Allan_Gardyne

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

  • http://www.dustindiaz.com polvero

    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 :)

  • Anonymous

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

  • Rizwan

    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!

  • Michael

    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!