Links

Links are an essential part of web interfaces. They create internal and external navigation, help users get information and perform actions. In other UI, such as applications, the role of links is insignificant; clickable areas and buttons are used instead.

Color

The correct link design in web interfaces can determine how quickly users get what they need and whether they get it at all. Link color plays one of the most critical roles in this.

The color of the links can be anything: red, green, or orange, but it's more familiar when it's blue. This is an established pattern, and it has long become natural for many users. The blue color in the text for people will mean a link, and they will not need to spend a long thought before clicking on it.

It all depends on the context and design style, of course. Suppose the red color acts as various accents in the interface design. In that case, it creates appropriate connections for users; in this case, the text's red links will usually be perceived without ambiguity.

When a link is used as a call to action, its contrast and difference from the text are crucial. So it's hardly worth compromising here, and you should always highlight the link with a color different from the text. Even an icon may not help to create a significant emphasis. Color will do its job better.

Purple can be a dangerous color for links, as long as it is still associated with the visited state, although this practice in web design has not been used for a long time. Most sites have the same link color for both visited and unvisited links.

The link doesn't have to be white on a dark background. A good way is to make the link colored, but not as bright as on a light background. The color in this case should be muted and add more white to the tint.

Underlining

Even an underlined link, but made in the same color as the text, gets lost in it. The link is hard to see in the text in the same color, it doesn't look like something clicked at all.

A link with a different color from the text and with an underline is always perceived unambiguously. This is the simplest and most straightforward solution.

Links without an underline, even those with a different color from the text, don't look like the right choice. The purpose of a link is to be clicked. And if it tries to look like plain text, what's the point of making links at all?

In navigation and other elements that explicitly read as a set of menu items, the color of the links is irrelevant, as is the underline.

Call-to-action

When the links are call-to-action, the underline is less important than when the link is in the text.

In call-to-action blocks, the composition, spacing, and placement of the button matter more than the color and underline. Therefore, a link may have less of an indication that it is a link and tends to be a button in its design.

It's the same if the link is typed with all caps, its color and underline are less meaningful. The link remains visible and stands out from its surroundings.

But underlining is better. This way you don't make users think. Even if it takes a fraction of a second, it's still a waste of valuable time. Users should not have to deal with tasks that have nothing to do with them. An underlined link is always immediately perceived as a link in all cases and it requires no effort to understand.

The principle of one link

Links scattered throughout the text cause clutter, reduce focus, and make the text difficult to read. It is good if there is only one link in one paragraph.

If you need more than one link in the text, the best solution may be to put them in a separate block below the text, such as a list.

Feedback

Hover link color is important for pointing indication. It lets users know that the element can be interacted with. It's best to make the hover state a contrasting color and different from the normal link state.

In menu items, it is important to highlight the active state, telling users what section of the interface they are in. If the links are underlined, the task is simple - an active item without an underline and slightly muted gives a clear understanding of its state.

If the links are not underlined in the menu, it is worth highlighting the active item significantly. Usually, only highlighting in color will not help, and it is worth adding a decorative element that will more accurately convey the item's state.

When designers make links for toggle menus, it often breaks the logic of the active item, and no matter what they do, users can not understand which item is active and which is not.

So it is better to use additional tools and show the difference between the states, for example, by changing the shape of the active item.

Again, the underline plays a role and makes it easier for us to understand that the link is clickable even though the shape and color highlight the active item.