Hacker News new | ask | show | jobs
by patel011393 255 days ago
They're blue because computer scientist Ben Schneiderman made them blue using research from 1985:

" In 1985, a group of students at the University of Maryland, mentored by computer science professor Ben Shneiderman , conducted a series of experiments to study the impact of different hyperlink colors on user experience. They were eager to determine which color would be the most effective in terms of visibility and readability.

The experiments revealed interesting findings. While red highlighting made the links more noticeable, it negatively affected users' ability to read and comprehend the surrounding text. On the other hand, blue emerged as the clear winner. It was dark enough to be visible against a white background and light enough to stand out on a black background. Most importantly, it did not interfere with users' retention of the text's context."

Mozille should really do better research before posting histories like this. It's easy to overlook the impact of academic research in tech.

Source:

Barooah, S. (2023, June 09). Why Were Hyperlinks Chosen To Be Blue? Retrieved from https://www.newspointapp.com/english/tech/why-were-hyperlink...

6 comments

The Mozilla article does reference the Hyperties system Ben Schneiderman worked on, linking to https://www.cs.umd.edu/hcil/hyperties/ with the following comment:

" This may be an ancestor of our blue hyperlink we know and love today, but I do not believe that this is the first instance of the blue hyperlink since this color is cyan, and not dark blue."

She clarified that in her subsequent article. It was the result of Ben Shneiderman's and his students' controlled empirical studies, not whimsy or arbitrary "creative" design (which we suffer from so much these days).

Revisiting why hyperlinks are blue:

https://blog.mozilla.org/en/internet-culture/why-are-hyperli...

Simple.

Red is a warning color, also has bad contrast on white background.

Green on white has bad contrast.

Blue has best contrast on both white and black backgrounds, and stands out from black.

Clear winner.

(Virtually everybody who ever made a PowerPoint presentation figured this out)

Side note: agree with all this except

> Red is a warning color

That is definitely the case in western culture, but in places like China, red is a positive color. Always interesting to learn what are universal signifiers (like up for more) and what are culture-specific signifiers!

Deepseek's iPad app has widgets (buttons labelled "Search" and "DeepThink") that are black in the "off" state and blue to indicate the "on" state.
is it why in China drivers run red lights so often? they should really recolor them if what you say is true
> Blue has best contrast on both white and black backgrounds, and stands out from black.

Why would it matter if it has good contrast on two different backgrounds? If you're changing the color of the background, you can also change the color of the link.

It’s nice to be able to change between the two most common background colors without needing to develop a whole theme.

In the days before CSS was commonplace, it would also be very annoying to manage.

There's a rant that can follow this about usability peaking in the late 90s/early 2000s. Back when companies care about usability research over aesthetics. Buttons looked like buttons yadda yadda.
Back in the days where you didn't have to concentrate to grab a window slider, because it was wider than 3 pixels. When the slider itself had more than 1% contrast with the slider bar, and you could easily see how far down the page you were...

But also in the days where some lunatic claimed black-on-gray had more visibility than black-on-white, and every webpage suddenly became, well, like HN.

But I'm old.

I have, in fact, fallen for thinking a page didn't have much in the way of content because the scroll bar was hidden. I did not scroll down because there was no indication that you could scroll. So I did not even try. Why would I?

I'm not that old!

> They're blue because...

There's no causal evidence in what you posted.

Sure, the experiments determined blue would be a good color.

But I don't see any evidence that the developers of Mosaic were aware of the research or used that to inform their choice.

They were blue when I got there and while we discussed how blue was chosen that is the extent of my recollections of the time - that it was discussed but not the rarionale. They were inspired/informed by the range of colors available in CGA, ANSI and early VGA color palettes. You can’t use a color that doesn’t exist on low end hardware.

It would have made sense for Lynx to settle on blue for ergonomic reasons. ANSI blue is a particular shade thats approximated in hyperlink colors.

This is oddly remeniscent of the Rhine Experiments conducted in 1937, where decks of cards with symbols inscribed were presented to a series of subjects to test extra-sensory perception. What Joseph Banks Rhine found as an abstract was that a statistical deviancy exists for programmatic ideation.
What did the internet look like in 1985? I was under the impression that it'd all be terminal based since the world wide web didn't exist. I'm not sure how a hyperlink would function in such an interface.
Check out HyperCard; it had hyperlinks before the Web.
Related - The Computer Chronicles - Hypercard (1987) https://youtu.be/FquNpWdf9vg

Note that hyperlinks in hypercard weren't blue necessarily, but the mouse cursor did change to indicate it was clickable.

It definitely did -- they weren't in color though.

I'm not sure if HyperCard ever had full color support? There was some support for color images in a later version of HyperCard, but did color text ever make it before it was shut down completely?

> It definitely did -- they weren't in color though.

They were invisible. In HyperCard you could make any region of the screen clickable, and run a script when it was clicked. Not unlike the image maps that websites used to use. You would normally include something visual in the clickable region, but you didn't have to.

I believe the mouse cursor would change if you put it inside a clickable region.

Sarah McLachlann released a CD album with unemphasized hotlinks that didn't even change the cursor shape. I quickly went from adoration to pure hatred of her, clicking on every spot on the page to see if it revealed anything more.
What does it mean for a CD to have hotlinks?
Was HyperCard ever used over the Internet? I thought it was just local decks of cards.
Yes, HyperCard was eventually used over the internet, and it was the first way I know of that enabled people (kids even) to create and publish graphical web pages with a wysiwyg editor, including interactive forms and graphical buttons and links.

https://news.ycombinator.com/item?id=34134403

DonHopkins on Dec 26, 2022 | parent | context | favorite | on: The Psychedelic Inspiration for Hypercard (2018)

Speaking about HyperCard, creating web pages, and publishing live interactive HyperCard stacks on the web, I wrote this about LiveCard:

https://news.ycombinator.com/item?id=22283045

DonHopkins on Feb 9, 2020 | parent | context | favorite | on: HyperCard: What Could Have Been (2002)

Check out this mind-blowing thing called "LiveCard" that somebody made by combining HyperCard with MacHTTP/WebStar (a Mac web server by Chuck Shotton that supported integration with other apps via Apple Events)! It was like implementing interactive graphical CGI scripts with HyperCard, without even programming (but also allowing you to script them in HyperTalk, and publish live HyperCard databases and graphics)!

Normal HyperCard stacks would even work without modification. It was far ahead of its time, and inspired me to integrate WebStar with ScriptX to generate static and dynamic HTML web sites and services!

https://news.ycombinator.com/item?id=21783227

>In fact, one of the earliest tools that enabled anyone, even children, to author and publish their own interactive dynamic web applications with graphics, text, and even forms and persistent databases, was actually based on HyperCard and the MacHTTP/WebStar web server on the Mac:

https://news.ycombinator.com/item?id=16226209

>One of the coolest early applications of server side scripting was integrating HyperCard with MacHTTP/WebStar, such that you could publish live interactive HyperCard stacks on the web! Since it was based on good old HyperCard, it was one of the first scriptable web authoring tools that normal people and even children could actually use!

MacHTTP / WebStar from StarNine by Chuck Shotton, and LiveCard HyperCard stack publisher:

CGI and AppleScript:

http://www.drdobbs.com/web-development/cgi-and-applescript/1...

>Cal discusses the Macintosh as an Internet platform, then describes how you can use the AppleScript language for writing CGI applications that run on Macintosh servers.

https://news.ycombinator.com/item?id=7865263

MacHTTP / WebStar from StarNine by Chuck Shotton! He was also VP of Engineering at Quarterdeck, another pioneering company.

https://web.archive.org/web/20110705053055/http://www.astron...

http://infomotions.com/musings/tricks/manuscript/0800-machtt...

http://tidbits.com/article/6292

>It had an AppleScript / OSA API that let you write handlers for responding to web hits in other languages that supported AppleScript.

I used it to integrate ScriptX with the web:

http://www.art.net/~hopkins/Don/lang/scriptx/scriptx-www.htm...

https://medium.com/@donhopkins/1995-apple-world-wide-develop...

The coolest thing somebody did with WebStar was to integrate it with HyperCard so you could actually publish live INTERACTIVE HyperCard stacks on the web, that you could see as images you could click on to follow links, and followed by html form elements corresponding to the text fields, radio buttons, checkboxes, drop down menus, scrolling lists, etc in the HyperCard stack that you could use in the browser to interactive with live HyperCard pages!

That was the earliest easiest way that non-programmers and even kids could both not just create graphical web pages, but publish live interactive apps on the web!

Using HyperCard as a CGI application

https://web.archive.org/web/20060205023024/http://aaa-protei...

https://web.archive.org/web/20021013161709/http://pfhyper.co...

http://www.drdobbs.com/web-development/cgi-and-applescript/1...

https://web.archive.org/web/19990208235151/http://www.royals...

What was it actually ever used for? Saving kid's lives, for one thing:

>Livecard has exceeded all expectations and allows me to serve a stack 8 years in the making and previously confined to individual hospitals running Apples. A whole Childrens Hospital and University Department of Child Health should now swing in behind me and this product will become core curriculum for our medical course. Your product will save lives starting early 1997. Well done.

- Director, Emergency Medicine, Mater Childrens Hospital

----

Also (a historical note about web browsers with editors, not about HyperCard):

NetScape Gold had a built-in WYSIWYG HTML editor window. But it was a unique selling point -- earlier and other versions of browsers didn't support that. Now browsers have official APIs to support WYSIWYG HTML editing via the "contenteditable" attribute, execCommand function, and Selection class, but you have to implement the menus and toolbars of the user interface yourself, and there are a lot of libraries for that.

https://en.wikipedia.org/wiki/Netscape#Netscape_Navigator_(v...

>Netscape also released a Gold version of Navigator 3.0 that incorporated WYSIWYG editing with drag and drop between web editor and email components.[49]

https://en.wikipedia.org/wiki/Netscape_Composer

https://www.ou.edu/class/webstudy/n4/old/N_GOLD_Editor_Windo...

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

https://html.spec.whatwg.org/multipage/interaction.html#attr...

https://w3c.github.io/editing/docs/execCommand/#execcommand%...

https://w3c.github.io/selection-api/#selection-interface