Color Alone

Are you using color alone to convey information? I was. I prefer my links with text-decoration: none. So, how can you tell if something is a link? By color alone! Uh oh. Yes, I just changed the css on this blog to include border-bottom: 1px dotted gray for links.

But I’ll admit, I paused before making this change. Why? Because, I really find that underlined links make the page look too cluttered. Look at CNN for example. After sleeping on this issue I decided on this philosophy:

  • I will underline links when they are found in context
  • I may or may not underline links when they are found in obvious navigation bars

Joe Clark has an excellent discussion on the topic of underlining links in Chapter 9 of Building Accessible Websites.

And I’m sure that cute little dotted line will grow on me. So, how ’bout you? Do you underline your links? If not, will you consider adding the underline to make your pages more accessible?

P.S. Ahhhh, the joys of being able to make this change on my site without having to ask anyone’s opinion. Now, let’s see how long it takes me to get this change on my employer’s site.

8 comments

  1. I go back and forth on this all the time. I really prefer links without the underline– they ‘re hard for me to read when they’re underlined. A dotted underline is OK, but doesn’t IE Pc make a mess of them? This is why I have been shying away from them on my professional sites.

    My current favorite thing to do is to make them bold and a contrasting color, but this doesn’t always work well, either.

  2. BTW, I’m talking in generalities, not about your site in particular. They are very subtle here and I didn’t notice the change til you pointed it out. :)

  3. A,

    The dotted line on IE PC isn’t as cute…but it will do for me.

    I thought about the bold and contrasting color route as well…but if I’m using the test of “print your page out in black and white”…then the contrasting color vanishes. And I refuse to just use bold for links.

    Honestly, this issue makes me long for a browser that makes it extremely easy to identify links (no matter how we style them).

  4. Yes, I agree about bold only not working. Are you printing to simulate a visual impairment? Because I tend to turn the underlines back on in the print stylesheet to avoid that problem when folks print out a page. But yes, I don’t love the text weight solution– bold text has inherent meaning other than “hyperlink” as well.

  5. A, yes, I’m printing to simulate a visual impairment. I currently don’t have a print stylesheet.

    Jon, technically “text weight” is enough if you consistently use “text weight” to indicate links on your site. I still struggle with saving text weight just for links. There are times when I want to emphasize something and it isn’t a link. I also wonder how intuitive text weight is. I have no doubt that underline means link.

    Looking at hicksdesign, I think it would be obvious that text weight means “link”…but look at Jeremy is right! Tiger underwhelms, except for …” Dashboard isn’t a link.

    Lord knows I don’t want to cramp the creativity of amazing designers. But I did want to bring up this “point to ponder” and see what bright new ideas might emerge.

  6. You weren’t using color alone. When you listen to your page with a screen reader it says “link …” and HPR raises its voice (actually pitch). In WCAG 2.0 favorite terminology, linkness (or linkhood) can be “programmatically determined.” And when I move my mouse over the text I get the … “hand”. So there you have it – in the very first comment on any blog ever.

  7. Jim, what an honor for oz to have your first blog post! I agree, I wasn’t using color alone if you are listening in a screenreader, but if you are colorblind and can’t distinguish the color (and are just using a regular old browser)…I feel like I was using color alone.

    Interesting story. The guy in the office next to me is color blind. He was going thru a timed training excercise and didn’t finish on time. Why? He had missed 5 pages of important information from a link that was “invisible” to him. The link was in the middle of a paragraph and was not bold and was not underlined.

    When he approached me with the problem…I kept trying to think of a way to avoid underlines. But in the end, I believed, resistence was futile! And indeed, the underline had value. Such a cute little dotted line, don’t you think???

Comments are closed.