What is a call-to-action?

A call-to-action is the fundamental reason that you have a website in the first place. In web marketing, it’s defined as something, either a design element or some piece of content, that compels a visitor to take some specific action that you can measure to determine whether your website is working or not.

Every type of website you can think of has a call-to-action built into it, although of course some websites are better at emphasizing it than others. Calls-to-action provide focus for your website and if done right, give direction to your visitors for what you ultimately want them to do. Examples of a call-to-action include:

• Make an online donation
• Request an appointment
• Purchase a product
• Fill out a request form
• Register for an event or program

What makes a call-to-action effective?

Unfortunately there are no easy answers to that question, and there are plenty of people out there who ponder that question every day. While every website and every situation is different, there are some general guidelines you can follow when making your calls-to-action, both from the content and the design perspectives.

Also keep in mind that you should continually test whether your calls-to-action work or not. There are some free tools out there that will give you a good start at this, especially from Google. Their analytics tool will tell you what people are looking at on your website, while their website optimizer can help you test different combinations of calls-to-action in order to see what works better.

Writing calls-to-action

Using the right words appropriate to your website will drive people to take the action; using the wrong words can distract them, at best, or cause them to leave your website, at worst. With that in mind, here are some tips for writing effective calls-to-action:

• Lay the groundwork – Before someone is willing to follow one of your calls-to-action, they first have to recognize a need that requires them doing so. Telling your visitors the benefits of taking that action will help give them the motivation to actually do so.
• Use action-oriented words – Using an active voice encourages people to follow your calls-to-action, and also helps people scanning your website quickly identify what your call-to-action is about. This is also one of the reasons you should avoid using “click here” in your link text.
• Have one on every page – There should always be at least one call-to-action within the content on every page of your website – no page should be a dead-end. Ending your content with a call-to-action tells visitors what the next step is and keeps them moving on your website.
• Limit the number and keep them distinct – Having too many calls-to-action on a website can be confusing for your visitors. Limit yourself to only a few, and keep them distinct so visitors know what the primary call-to-action is, as well as what you want them to do first from the choices.
• Keep your forms short and clear – Unless someone has a compelling interest, many people see a long form asking for unnecessary information and won’t fill it out. Follow some of my other tips for writing clear instructions if your main call-to-action is a form.

You can also look through a previous post that I’ve written about improving your titles and sub-headers for some tips that are just as applicable to writing effective calls-to-action.

Designing calls-to-action

Web designers can have a lot of influence over how effective calls-to-action are. Following general usability and design guidelines help make the website as effective as possible. Here are some tips for how to do that:

• Put it above the fold – You want your main call-to-action to be visible wherever people go throughout your website – almost like your logo. The right side of your website’s header is a natural location to do that; any other lesser calls-to-action can go in sidebars, above the fold as well.
• Use images for emphasis – Images or icons get people’s attention because they get noticed by your eyes before content on a page does. Buttons also do the same thing and are great to use because they stand out against text AND imply action by their very nature.
• Choose contrasting colors – If you’re using a button as your primary call-to-action mechanism, use a color that contrasts with your main colors for maximum effect. Just don’t choose a color that contrasts so much that it becomes too hard to ignore when reading the content around it.
• Consider homepage placement – We all know how important your homepage is, which is why you need to make it as usable as possible for your visitors. Your main call-to-action should be prominently placed on it where people will really see it.
• Use some white space – The more white space around your call-to-action, the more people’s eyes will naturally be drawn to it. Crowding your call-to-action in with surrounding content will decrease its effectiveness as it gets lost in the overall noise of the page.
• Make it bigger – Size isn’t everything when it comes to your call-to-action, but making it bigger definitely makes it more likely that it will get noticed. Just don’t make it so big that it totally overwhelms the rest of the content on your website – find the right balance.

Thoughts?

Creating effective calls-to-action are a HUGE topic and business for a lot of people, so I hope that this gave some good, introductory guidelines for making your calls-to-action more effective.

Have you had any particular success working with calls-to-action on your website or on a website you’ve done for a client? Leave a comment below to share your thoughts and experiences!

There are many people who fall into the category of lower literacy when it comes to websites. Some researchers estimate that as much as 50% of the U.S. population can be defined as having a lower literacy, while 30% of total online users can be said to have the same.

What’s discussed below is definitely something worth considering and applying to your website, especially if you think that a significant proportion of your visitors fall into the lower literacy category.

Higher literacy vs. lower literacy

The most important thing that I can emphasize up front is that when I use the term “lower literacy”, I’m not talking about people who are illiterate or unintelligent. Quite the opposite in fact.  People who have a lower literacy are able to read – they just struggle with it to some degree depending on the particular medium in question. In this case, I’m talking about lower literacy as it pertains to websites.

In general there are some common characteristics of people who have a lower literacy:

• They have trouble scanning text
• They need to go through content word-by-word
• They’ll often find themselves re-reading long, unfamiliar words

People who are otherwise highly literate and intelligent might actually have a lower literacy when it comes to websites. Older people in their 50s, 60s, etc. are a perfect example of this. Anyone who has sat and watched how their parents use a website knows exactly what I’m talking about – some of those characteristics describe them perfectly.

Higher literacy is just the opposite. People who are highly literate, especially on the web, are able to look at a website quickly, scan it for what they’re looking for, and interpret what’s on the website and what the website has to offer them.

If you think this describes you perfectly, you’re not alone – there’s a significant gap in web literacy levels between older and younger generations. Younger people have been using websites for a greater percentage of their lives than older generations have, so they’re that much more familiar with them. Add in the fact that older generations tend to be more “afraid” of computers than younger generations are – such as clicking the wrong link, filling out a form, etc. – and you begin to account for that generational gap.

Lower literacy on the web

So how does lower literacy manifest itself when people use websites? Here are some common habits that lower literacy website visitors display:

• Reading the navigation – Lower literacy visitors tend to read through all of your navigation links first, and then choose the option that best meets what they’re looking for.
• Narrowing the field of view – Lower literacy visitors will read through content line-by-line, giving them a particular narrow focus that they might find hard to zoom out from.
• Skipping over information – If something becomes too complicated, then lower literacy users are more likely to completely skip over it, potentially missing something important.
• Accepting as “good enough” – Digging deeper requires a lot of reading (which can be challenging and time consuming), so lower literacy users skip, usually looking for links.
• Avoiding search tools – Lower literacy users might have difficulty spelling the search terms, and then when they see the results, have difficulty processing out-of-context content.

How to design for lower literacy users

How can you improve your website’s usability for lower literacy users in order to make it work for a broad audience? Here are some suggestions:

• Prioritize your content – Place the most important content at the very top of the page, where readers who might otherwise give up after a few lines will see, and keep any other important information above the fold. This especially applies to your call-to-action.
• Avoid confusing navigation links – The links in your main navigation(s) should be written so that they’re as intuitively as possible. There’s no need to be creative and write “Who We Are” when writing “About Us” will do just as good a job instead.
• Improve your in-content navigation – Follow some of the basic recommendations to improve your page titles and headers, and you’ll not only break up the content for higher literacy users, but keep lower literacy users from getting frustrated.
• Avoid distractions – Design elements like Flash banners can serve a useful purpose on your homepage, but on internal pages, avoid anything that moves or might otherwise be a distraction. These really get in the way when you’re trying to concentrate, which lower literacy users need to do.
• Use a consistent page design – Unless there’s some compelling reason otherwise, every page on your website should have the same general feel to it, and should include all of the major navigational elements. Consistency is the goal – something that lower literacy users struggle without.
• Make effective links – There are things that both designers and writers can do to make links more effective. Follow some of these recommendations – such as using icons on particular types of links, or making the links scannable – to help lower literacy users navigate your website easier.
• Simplify form instructions – Forms give many people trouble, so you can imagine the trepidation with which lower literacy users fill them out – especially if giving away personal information is involved. Keep your instructions clear to avoid unnecessary confusion.

Do some of these tips sound familiar? If so, it’s because many of them are also general usability guidelines that you should be following anyways when creating your website. If you’ve already tried to incorporate many of them into your website and think that it’s as user-friendly as possible, then lower literacy visitors shouldn’t have much of a problem using it.

Thoughts?

Is lower literacy something you should be concerned with if you have a website? Or do you think it’s dependent solely on who the particular audience for that website is – no different than gender, profession, interest, etc? Share your thoughts with everyone by leaving a comment below!

Why do website homepages have usability concerns that are different from other pages on your website? It’s because of their purpose. They can’t just display lots of text – that’s the job of your internal pages. Homepages have to present a snapshot of a lot of information at once, and they have to do it in a way that both entices new visitors to explore your website further, and makes it easy for returning visitors to find what they’re looking for.

Presenting that much information isn’t easy, and it becomes even more difficult to do when different groups within a business or organization start wanting real estate on it. Tough decisions need to be made when it comes to a homepage’s content, but if you couch your discussions in the content usability terms below, they might become easier to make.

With all of this in mind, here are some tips and considerations you can follow when planning the content on your homepage or if you want to improve the usability of your existing homepage content.

4 important questions to answer

Visitors returning to your website will already know what your business/organization is about and what you do, but new visitors won’t know that information. This is one of the main purposes that a homepage serves, so make sure to answer these 4 questions somewhere that your visitors will have about your website somewhere on yours:

• Who are you? - Visitors might want to see details about who you are. For small businesses, it helps them make a connection with the business owner, and for larger organizations or corporations, it can help support recruiting, PR, etc. Either way, it helps in establishing credibility with the visitor.
• What is it you do? – Use a tagline to convey your purpose, and put it near the top of your homepage where people can see it right away. Just don’t write it so that’s vague and full of marketing-speak – keep it real and tell your visitors what they’re gaining by visiting your website.
• What can I find here? – Your homepage provides a starting point for where the visitors can browse to elsewhere on the website. There should be clear links to the most popular areas of your website; for example, if it’s your blog or news updates, include links to that content.
• What action do you want me to take? – Your primary call-to-action needs to be displayed prominently and written in a way that encourages visitors to take that action. If your call-to-action is either hidden or poorly communicated on it, most people won’t actually do what you want them to do.

Incorporating this information in a way that new visitors can easily find it but returning visitors can avoid it if they want to isn’t easy. If you write your homepage’s content clearly and concisely, and design the homepage so that things are easy to find but easy to avoid as well, you should be fine.

4 ideas for more usable content

While your website’s homepage needs to be designed so that visitors can find what they’re looking for quickly, easily, and intuitively, when it comes to content, you want to strike a balance between providing information on the homepage itself and drawing people further into your website. Here are some ways to accomplish that:

• Emphasize keywords in your link text – Visitors scan the homepage of your website, so you want to make sure that your links are written in a way that attracts their attention and emphasizes the keywords that they’re looking for. As always, avoid using “click here” in your link text.
• Use images for emphasis – People notice images before they do the text around an image, so using them can be great visual indicators of what the content or links around the image are about. The key is finding an image that intuitively communicates what that content is.
• Keep it to a few screens – Don’t overwhelm visitors with lots of content on your homepage – ideally, the homepage should be 1 to 3 (at most) screens in length, with the most strategic links above the fold. If you do find yourself with a ton of information, it’s time to make decide what really belongs there.
• Use content less and links more – Every inch of a homepage is valuable territory, and large chunks of text eat up prime real estate. Great homepages strike a balance between the amount of written content on them (with less being more) and links to the content elsewhere on the website.

Thoughts?

What are some tips that you have for writing better homepage content or for improving the usability of your homepage content? Do you think focusing on the content of your homepage alone will make the homepage more usable, or is it more a function of design? Share your thoughts with everyone by leaving a comment below!

For the Content Writer

• The first link is the most important one – The first link in your blog post, article, or piece of content will generally gain the most attention and have the highest click-through rates because that’s what people see first. So when you’re writing content, if you make the first link the one that is of the most interest to your audience, you’re increasing the chances that they’ll click on it.
• Don’t link to everything – Links are used to either emphasize something relevant to the point you’re writing about, or to get the reader to take a particular action. Linking every other word will make both more difficult because your links will become less noticeable. Make sure that your sentences have no more than 1 link in them and paragraphs have no more than 5, and you should be fine.
• Don’t depend on links to help your content make sense – People are either too busy to click on every single link you provide, or maybe they’re reading your article in a format where they can’t click on the links: print, offline, or mobile. My point is that as the writer, you need to make sure that the reader can understand your content without having to click on the links.
• Don’t hide your the URLs of links - People are used to being able to know where a link will take them when they hover over it – either by seeing it in their web browser’s status bar, or by reading the TITLE attribute (if you’ve written one). Either way though, you should avoid doing anything that hides the ultimate destination where they’ll be taken to once they click on the link.
• Make links scannable - This is something that I mentioned in last week’s post about why you should avoid using “click here” in your link text. Your link text should be written so that when someone is scanning through your content, they can quickly identify what the link is and where it will take them to. Using “click here” as the link text won’t do that.

For the Web Designer

• Links should look like links – I covered this topic exclusively in a separate post about how text links should be styled, but the gist of that post is simple. Text links should be underlined and in a color that stands out from the rest of your content. People expect them to look that way, and not styling them according to these conventions will make them less usable and noticeable.
• Use icons sparingly – Using icons on your links can help give your visitors a sense of what will happen when they click on the link, but going overboard with them can be a bad thing. My rule of thumb is that the only time you should use icons is if clicking on the link engages a software application other than your web browser – email, Adobe Reader, Microsoft Word, etc.
• Skip any gadgets that alter link behavior – You can find several applications that try to provide a more interactive user experience by giving people a preview of the website that clicking on the link will take them to. While good in theory, it can get annoying very quickly when used all over your website, so skip the gadgets and use your TITLE attribute instead.
• Make the links easy to click – Horizontal lists (“A | B | C | D | …” or “1 | 2 | 3 | 4 | …”) and vertical lists are often used to help users navigate through content. Either way though, make sure that the clickable area around each link is large enough so that people can easily use it; adding in some extra padding or margins in your CSS should do the trick.

Thoughts?

What do you think about link usability – do you have any tips that you do differently? Share with everyone by leaving a comment below!

#1 – It’s not informative

It’s an established fact that most people don’t really read the content of a website – they scan it. This applies to almost all written content on the web, and people tend to do it for a number of reasons, such as:

• They are too busy to read something fully
• They are looking for a specific piece of information, and once they find it they want to move on
• There’s a lot of information out there that is competing for their attention
• They might have other issues that make it harder for them to read content online, such as screen resolution, screen glare, tiny font sizes, contrast, etc.

When someone writes content for a website, they have to keep in mind that it’s probably not going to get read except by those who have an inherent interest in doing so.

Most people are going to scan it instead, and when they do, certain things will jump out at them – links being one of them. Of course, that will depend on whether the web designer styled the links properly by making them underlined and a different color from the surrounding text.

Yes, people scanning content will still see your link even if it says “click here”. But using “click here” as the link text doesn’t take that next step of telling them where the link is going to as they scan over it quickly.

The bottom line is that people like to – and want to – know where a link from your website is going to lead them. Using the words “click here” just doesn’t do that for them, and here’s a good example:

• Bad - If you want to learn more about this, click here to read this article from the New York Times
• Good - Learn more topic about this by reading this article on the New York Times

The second one tells people at a quick glance not only that there is a link, but that it’s to an article on the New York Times website. What does “click here” tell you? Only that a link is there for them to click on.

#2 – It’s not action-oriented

Most websites want people to take some action as a result when they are visiting it. People respond to action words, so those who write content for a website will want to keep that in mind by writing link text that encourages visitors to take the desired action. Here’s an example:

• Bad – Enjoy what you see? Click here to subscribe to our blog for free updates!
• Good – Enjoy what you see? Subscribe to our blog for free updates!

Notice the difference? The second one has the desired action contained within the actual link text, which will be much more obvious when someone is scanning the content quickly. Using “click here” doesn’t convey that desired action – again, it only tells them that a link is there for them to click.

#3 – It’s not SEO-friendly

Search engines such as Google use the strength of your links in their algorithm when they determine your placement in search engine results. While the number of links (both internal and external) on your website is important, how those links are worded can be just as important. Here’s an example:

• Bad – Click here to read more web design articles by Addicott Web
• Good – Read more web design articles by Addicott Web

The second one is the much-more friendly link. When you use “click here” as your link text, all that you’re doing is letting the search engines know that your content contains a link. If you want to also help them estimate how relevant that link is though, start using keywords in the link text instead.

#4 – It’s not modern

During the early days of the Internet, people defended the use of “click here” on the grounds that if it weren’t used, most people wouldn’t know what to do when they came across a link. Content writers came up with it as a solution that gave users the hint of what action they were supposed to take – literally, click here.

Needless to say, that’s drastically changed as more and more people have become familiar with websites in recent years. If you continue to use “click here” in your content, you can give your visitors bad impressions that you don’t want them to have, such as:

• That you don’t respect their intelligence enough to know what a link is
• That your website or the content on it hasn’t been updated in years

You always want to make a positive impression of who you are through your website, and most people nowadays think that websites that still use “click here” are just plain old-fashioned. I would venture to guess that that is definitely not the impression you want to convey about your business or organization.

Thoughts?

Do you still use the phrase “click here” when you’re writing links? Do you have clients or people you work with who still use it and don’t understand why they shouldn’t? Share your thoughts on this topic by leaving a comment using the form below!

What I’d like to talk about are the characteristics and general rules about how and when to use each attribute. But first, let me give you a little background on just what these attributes are.

ALT Attribute

“ALT” simply standards for “alternative”, and ALT attributes are intended to be descriptions that can be seen instead of images, either before the image loads or if it does not load at all.

The ALT attribute is an important element to the accessibility community. It began as a way for people who are blind and use screen readers (or people who use text-only web browsers) to know when there was an image on the page they were reading.

From an SEO perspective, ALT attributes may or may not benefit your website – there is still no conclusive school of thought on the subject. Most people will agree though that tThey are just another opportunity for you to put code on your page that the search engines will read, and should be taken advantage of as one of the basic steps to make your website SEO-friendly.

That being said though, don’t abuse the ALT attribute for SEO purposes only. Keep in mind some of these tips for how to write them:

• Make them as specific and descriptive as possible without being too lengthy
• If an image contains text, the ALT attribute should replicate the text in full
• Avoid being vague or writing text that isn’t related to the image or context of the content around it
• Don’t use the image’s file name as the ALT attribute

TITLE Attribute

The TITLE attribute can be used with almost all HTML elements on your website. While the ALT attribute emerged from the accessibility world, the TITLE attribute emerged from the usability standpoint.

There are two main roles that TITLE attributes can have:

• Descriptive – Use the TITLE attribute on such things as form fields to let your visitors know what the intended purpose of an element on your website is.
• Advisory – Use TITLE attributes on text or image links to let visitors know where they are being taken to when they click on the link.

You’ll know when something has a TITLE attribute specified because it will appear as a tool-tip when you hover over the link.

When it comes to links, the most important thing to keep in mind is that visitors to a website don’t like to be surprised about where a link will take them. They want to know where they’re going so that they can choose whether to follow that link or not. But you don’t necessarily need a TITLE attribute on every text link on your website. Only use them if the actual text of the link, or the surrounding context of it, is somewhat vague about where the visitor will be sent to if they click on it.

As with ALT attributes, there is still no agreement on whether they help you in SEO. Most web designers do agree though that they should be taken used as another one of the basic steps to make your website SEO-friendly. Just keep in mind that even if they are SEO-friendly, that doesn’t mean they should be abused. Specifically, you shouldn’t:

• Write the TITLE text with only the search engines in mind
• Use them to duplicate content elsewhere on the page
• Stuff them full of keywords that make them completely unhelpful

Here’s a simple way to understand how to write your TITLE attributes: write them so that they are descriptive enough to help your human users, and that should be enough to give you some SEO benefit as a result.

Images that are links

There is always some confusion about which attributes to use when an image is a link. Should you use an ALT attribute, a TITLE attribute, both, or neither, and if so, what should the text of those attributes be?

My answer to those questions is that it all depends on what the actual image is:

• If it contains a lot text – If the image contains text directing people to do something, then you should use both attributes – ALT text for the image and a TITLE attribute for the link. The text of both should be what the image says to do. For a good example, look at how I used these attributes on the “Enjoy this article” button at the bottom of this post.
• If it has only a few words of text – In this instance, your attributes will need to be a little more descriptive because the image itself isn’t. For example, if you have a nicely styled “Contact Us” button (as I do on the home page of this website), you need to be a bit more creative in how you write both attributes.
• If it doesn’t have any text – This is where you need to be the most creative, because the image itself doesn’t give you any guidance. In general, if you try to be as descriptive and action-oriented as possible, while perhaps incorporating one or two of your keywords, you should be golden.

Think before using

In general, you should use both elements when working on a website, but you need to be careful not to overuse them when it’s not necessary to have them. Good web designers know how to use these attributes, but great designers know when to use them – and that’s a big difference.

What are your thoughts on these using the ALT and TITLE attributes on websites? If you’re a web designer, do you use them in your designs? Do you think that the benefits are worth it, either in terms of the search engines, or from your users’ point of view? Share your thoughts with everyone by filling out the comment form below!

Yes, you read that correctly.

Barack Obama ran for office using arguably the most technologically-committed campaign ever. The new look of the White House website is no surprise when you keep that in mind – although I must say that I actually was a bit surprised to hear about it. Considering everything else that is being talked about this inauguration day, honestly, who was even thinking about the White House website?

Thoughts on the new design

The new look of the White House website picks up where his campaign and transition websites left off. In fact, if you go to Change.gov now, there is a note saying that the “transition has ended and the new administration has begun. Please join President Barack Obama at Whitehouse.gov” – so you do get the sense of continuity from one phase of his election and presidency to the next.

Macon Phillips, the Director of New Media for the White House and a contributor to the White House blog, writes that the new website is “just the beginning of the new administration’s efforts to expand and deepen the online engagement” that many Americans used to help play a role in the election.

I think what I’m most impressed with the most is how Obama’s calls for transparency and communication in government were carried over to the website. What those two things translate most readily into in web design terms is what I talk about all the time – a commitment to site usability.

What’s done well

What are some features on the new website that make it very usable and that I really like?

• Intuitive navigation – The top navigational bar has only a few simple choices, and the drop-downs that appear when you hover over a link provide links to all sorts of information about his agenda, the administration, the history of the White House, the government, and how to stay informed. They’re simple to use and look great – what more could you ask form.
• E-mail updates – This is a standard feature on many websites, but this is downright genius the way it’s incorporates here – not to mention groundbreaking. But it comes as now surprise to see the administration use this, considering Obama’s use of other technologies during his campaign, such as text messaging.
• Functional footer – This is also a commonly found design element nowadays, but again, it’s use here really fits well with the openness and accessibility that the website and administration are both trying to convey. It makes it even easier for people to find the information that they’re looking if they don’t want to use the drop-down menus at the top – again, a hallmark of usability.

Of course, the snazzy Web 2.0 design really does wonders in tying eveything together, and the web designer in me can’t help but wonder if it’s running on WordPress!

What could be fixed

I know I’m probably being a bit too nit-picky here, but there are a few small touches that I would have done differently:

• Styling the text links – The text links are the same color as the text, and aren’t underlined either, so it’s hard to tell what is a link and what isn’t. I would have done this a bit differently, since styling them properly helps with both usability and accessibility – something I detailed in another post I wrote on the subject.
• Page title tags – The page titles on pages throughout the website are very basic: “Contact Us” is all it says for the “Contact Us” page, for example. I’m sure that the White House website doesn’t have search engine optimization forefront on their mind, but it wouldn’t hurt to include some more information in them. People who use tabbed browsers would be appreciative of that!
• Breadcrumbs – Once you get into the sub-pages on the website, there is a well-styled breadcrumb bar that appears at the top of the footer area. I just wish that they would have done the same at the top of the page where it would be more visible.
• Form fields – Eye-tracking studies have shown that it’s best to put the labels on top of input fields on website forms, but the Contact Form on the website has them reversed. I would switch this up and it will look a lot better.

It’s a great start

Overall though, this is a great website that I’m very impressed with. I’m curious to see how the website grows and changes over time as more content is posted to it – pending legislation and executive orders, for example – and new features come online – such as the RSS feeds, which aren’t quite ready yet.

From a marketing angle, I think it very accurately reflects the message that the new administration wishes to convey about itself. And as I’ve written elsewhere, if the design of a website is able to help convey the right message about an organization, then that truly a great website.

Early web browsers used to have default styles for text links, which were usually blue and underlined. That’s why you most often see links with those characteristics, so it’s no surprise that this is how people expect text links to look like.

With the advent of CSS a few years ago, web designers began to assert greater control over how those links appeared. That’s been both a good and a bad thing, because with the greater control also came greater variation in how text links were styled.

With that in mind, here are some things to take into consideration when determining how you’re going to style text links on your website.

Contrast Against the Page Background

• On a lighter background (white, light grey, etc.), use either medium to darker shades of blue or red. Those options generally give the most contrast against the light background.
• On a darker background (such as black, dark blue, etc.), use very, very light shades of yellows, greens, oranges, blues, grays, or white.
• Try to stay away from light reds, pinks, etc., since those can be too jarring to the eye in contrast to the background color.

In either case though, the specific choice depends on the color scheme that the designer is working with, so we need to use our judgment about what we think looks and works the best to make the links stand out.

Contrast Against the Text

Most text on websites is either black (on a white background) or white (on a black background). So if your links are already underlined and are a different color than the main text, you’ve done the job right.

But when you’re picking the color of your links, please please PLEASE choose a color with enough contrast so that there is a noticeable color difference between the text and the link!

Using black text? Then coloring your links in navy blue is not going to cut it. At most “normal” font sizes on a website (around 12 pixels in height), the human eye can’t tell the difference between those two colors without straining – for example, can you tell this is a link? How about this instead? And at even smaller font sizes, forget about it.

Links Should. Be. Underlined.

A more recent trend in websites is to not underline text links. A lot of people feel that doing so gives a website a cleaner, more professional appearance. I agree with that result, but I disagree with the concept of not underlining text links.

Links should be underlined because when a text link is in the middle of a chunk of text (or as a headline), even if colored differently it isn’t always plainly obvious what is the link and what isn’t.

Think of people who are colorblind. They could look at a website and not be able to tell the links apart from the text if the links aren’t underlined. So from an accessibility perspective, underlining your links is a good thing.

And, when taken in combination with coloring your links the right way, it takes away any doubt the user might have about what is a link and what isn’t.

There Are Always Exceptions

Keep in mind that as with any particular element in web design, too much of a good thing can sometimes be a bad thing.

Yes, underlining and coloring links appropriately are the right things to do from both a usability and accessibility perspective. But I don’t go crazy having every link underlined on one of my websites if doing so means sacrificing the overall look and feel of the website as a whole.

For example, on the websites I design I usually have the text links underlined, but I don’t underline the main navigational links. When it’s obvious that the word is a link, as in the case of a link in a main navigational area, there’s generally not a need to have it appear underlined.

As a designer, my job is to create websites that are not only usable and accessible, but that look great as well. I have to take all of these factors into account and use my judgment when deciding how to style text links.

But, as long as I keep in mind usability and accessibility principles when making a decision, it’s guaranteed that the overall website will be that much more effective and successful.