January 29, 2013

Why Are Links Blue?

Blue links became one of the web’s most recognizable conventions, although their origin is less obvious than it seems. What began in early hypertext systems and was popularized by Mosaic eventually became a useful lesson in conventions, accessibility, and the value of making interactive text look interactive.

I have wondered several times why links are blue.

Not why some links are blue. Designers can make links whatever color they like, including the fashionable gray that looks almost identical to the surrounding text and turns reading into a small treasure hunt. I mean why blue became the default. For decades, opening a browser and seeing blue, underlined text has communicated one thing immediately: You can click this.

Nobody needs an onboarding tour. No tooltip appears. There is no animated hand pointing at the word. The convention is so deeply established that people recognize links before they have consciously examined the page. That is quite an achievement for a little piece of colored text.

The original story

In January 2013, Jeffrey Zeldman published a short article in A List Apart titled “Why Are Links Blue?”. The explanation was charmingly simple.

Tim Berners-Lee, inventor of the World Wide Web, was credited with making hyperlinks blue, apparently without spending much time thinking about the choice. The decision then turned out to be unexpectedly good for accessibility. Zeldman quoted Joe Clark, author of Building Accessible Websites, who explained that red-green color vision deficiencies are much more common than deficiencies involving blue. As a result, blue can often be distinguished by people who have difficulty separating red from green. It was a good story. The inventor of the web casually selected a color, and through a fortunate accident, the decision worked for almost everyone. Unfortunately, like many tidy stories about technology, it became less tidy when people examined the evidence.

Berners-Lee probably did not choose it

Tim Berners-Lee’s original WorldWideWeb browser did not establish the familiar blue, underlined link convention. Early hypertext systems used several ways to identify interactive text. Some relied on highlighting, boxes, icons, reverse video, or black underlined text. The visual language of links was still being invented.

Mozilla published a detailed investigation in 2021 called “Why Are Hyperlinks Blue?”. That research identified NCSA Mosaic as the browser that popularized blue links on the web in 1993. Mosaic mattered because it helped move the web beyond its academic and technical origins. It displayed text and images together, ran on several popular operating systems, and gave a much larger audience a visual way to explore the web. Its links were blue and underlined. Millions of people learned that blue text was not merely decorative. It was a door.

Once that behavior became familiar, changing it carried a cost. Every browser and website that followed inherited a convention users already understood. This is how many standards are created in practice. Nobody gathers the world’s finest designers in a marble room to identify the perfect color. Somebody makes a choice, the choice spreads, people learn it, and eventually altering it feels like moving the brake pedal in a car because the design team wanted something more distinctive.

The story begins before Mosaic

Mozilla later returned to the subject in “Revisiting Why Hyperlinks Are Blue”. The second investigation traced blue interactive text further back, to research led by Ben Shneiderman and his students at the University of Maryland’s Human-Computer Interaction Laboratory.

Their early hypertext system, HyperTIES, used highlighted text as the link itself. This was an important idea. Instead of placing a separate marker next to an item, the words became interactive. During experiments, Shneiderman’s team explored different colors for these illuminated links. According to his account, red made links more visible but interfered with reading and remembering the surrounding content. Light blue remained visible on dark and light backgrounds without causing the same disruption. That is a more interesting explanation than pure luck.

Blue was not necessarily selected for the web after a grand accessibility study. But blue interactive text had already appeared in earlier systems, and researchers had considered how color affected visibility and reading before Mosaic made the convention famous. Technology rarely has one inventor standing beneath a beam of light. It usually has several people solving related problems, followed by one product that becomes popular enough to receive all the credit.

Blue was a good choice, but not magic

Joe Clark’s original accessibility observation remains useful. The most common forms of color vision deficiency affect the ability to distinguish reds and greens. Blue can therefore provide a clearer difference for many people. But “many” is not “everyone.”

Blue-yellow color vision deficiencies also exist. People with low vision may struggle when the blue has insufficient contrast against the background. A pale blue link on a white page may satisfy the designer’s desire for elegance while remaining nearly invisible to the person trying to use it. There is also a more fundamental problem: color should not carry the entire responsibility for communicating interactivity.

The Web Content Accessibility Guidelines technique for colored links explains that links differentiated only by color need sufficient lightness contrast with the surrounding text and an additional visual change when they receive focus or hover. The W3C also documents removing underlines without providing another visible distinction as a common accessibility failure. In practical terms, blue is helpful. Blue plus an underline is clearer. A dark enough blue, an underline, a visible keyboard focus state, and meaningful link text is clearer still. Accessibility rarely depends on finding one perfect color. It depends on not making one signal do all the work.

Underlines are not a design failure

Designers have spent years removing link underlines because they look untidy. I have done it too. A clean paragraph with subtle link colors can look beautiful in a design review, particularly on the expensive monitor where everybody is sitting close to the screen and already knows which words are links. Real users receive none of those advantages. They scan. They read in poor light. They use old screens. They increase the text size. They arrive without being briefed by the designer. An underline makes interactive text obvious. That is its job. It is not trying to win an award for restraint.

Of course, not every link needs to be blue and underlined. Navigation menus, buttons, cards, and other interface elements may already communicate interactivity through position, shape, spacing, or surrounding context. Links inside paragraphs are different. Without an underline or another persistent visual cue, the reader may have to inspect the text color carefully to discover what can be clicked. That is not minimalism. It is unpaid detective work.

Conventions are part of the interface

The blue link is an example of how conventions reduce the amount of design an interface needs. Every established convention is knowledge the user brings into the product. A logo in the upper-left corner usually returns to the homepage. A magnifying glass usually means search. Underlined blue text usually opens another page or resource. We can break these conventions. Sometimes we should.

But every break introduces a learning cost. The new solution must be better enough to justify asking people to forget something they already know. Designers often underestimate this cost because they spend too much time with their own interface. After several weeks, every custom interaction feels obvious. It is obvious because we attended all the meetings. The user did not.

Using a convention is not lazy design. It is often the opposite. It means accepting that the interface exists for the person trying to use it, not as a demonstration of how many original decisions the team can fit into one page. You can make links orange. You can remove the underline.

You can make them appear only when the mouse moves nearby. You can probably replace them with small animated symbols that reveal themselves after a ceremonial double-click. The browser will allow all of this. The browser has never been the adult in the room.

A fortunate standard

So why are links blue? There is no single, perfect answer.

Tim Berners-Lee does not appear to have selected blue as the standard color for web links. Earlier hypertext researchers, including Ben Shneiderman’s team, experimented with blue interactive text before the web became popular. Mosaic then used blue, underlined links and helped turn that choice into a convention recognized around the world.

Accessibility may not have been the primary reason the web adopted blue, but the color had useful characteristics. More importantly, blue was usually combined with an underline, giving users more than one way to recognize a link. What began as one design choice became shared knowledge. That is the remarkable part.

The web contains different languages, operating systems, browsers, devices, cultures, and levels of technical ability. Yet a small piece of blue, underlined text can still tell almost everyone the same thing. There is somewhere else to go. Click here.