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!
Related posts:
- Making Your Web Colors Visible For All – Five Color Accessibility Tools Jennifer takes a look at four web sites and an...
- 7 Dummy Text Generators: Which Is Your Favorite? Text generators allow you to create filler text for your...
- Create A Painted Text Effect In Illustrator Jennifer shows us how to create a painted text effect...
- Is Text Messaging Marketing the New Advertising Fad? Alyssa explains how SMS marketing may be risky, but it's...
- How to Override Inline CSS Styles Inline CSS can be applied to any HTML element using...
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
July 1st, 2004 at 1:28 pm
I forgot: Have nice vacation!
July 1st, 2004 at 1:37 pm
Nice article/reminder Corrie. Xenon…GREAT LINKS! They will all be bookmarked!
Ian
July 1st, 2004 at 2:53 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
July 1st, 2004 at 3:25 pm
Makes sense, but what about having links appear as bold and un-underlined?
July 1st, 2004 at 3:42 pm
Euch.. Jakob Nielsen!
July 1st, 2004 at 3: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)
July 1st, 2004 at 6:59 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..
July 1st, 2004 at 8:04 pm
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.
July 1st, 2004 at 8:13 pm
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
July 2nd, 2004 at 6:26 am
Thanks for the reminder! I really must change the color of thelinks on my site.
July 3rd, 2004 at 3:56 am
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 :)
July 3rd, 2004 at 6:12 pm
Have a nice vacation! Hope you remember to go to the MFA!
July 4th, 2004 at 3:10 pm
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!
July 12th, 2004 at 7:26 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!
October 9th, 2005 at 5:28 am