Why Are Hyperlinks Blue? (mozilla.org) 77
Elise Blanchard, writing on Mozilla blog: [...]
What happened in 1993 to suddenly make hyperlinks blue? No one knows, but I have some theories. I often hear that blue was chosen as the hyperlink color for color contrast. Well, even though the W3C wasn't created until 1994, and so the standards for which we judge web accessibility weren't yet defined, if we look at the contrast between black as a text color, and blue as a link color, there is a contrast ratio of 2.3:1, which would not pass as enough color contrast between the blue hyperlink and the black text. Instead, I like to imagine that Cello and Mosaic were both inspired by the same trends happening in user interface design at the time. My theory is that Windows 3.1 had just come out a few months before the beginning of both projects, and this interface was the first to use blue prominently as a selection color, paving the way for blue to be used as a hyperlink color.
Additionally, we know that Mosaic was inspired by ViolaWWW, and kept the same gray background and black text that they used for their interface. Reviewing Mosaic's release notes, we see in release 0.7 black text with underlines appearing as the preferred way of conveying hyperlinks, and we can infer that was still the case until something happened around mid April right before when blue hyperlinks made their appearance in release 0.13. In fact, conveying links as black text with underlines had been the standard since 1985 with Microsoft 1, which some once claimed Microsoft had stolen from Apple's Lisa's look and feel.
I think the real reason why we have blue hyperlinks is simply because color monitors were becoming more popular around this time. Mosaic as a product also became popular, and blue hyperlinks went along for the ride. Mosaic came out during an important time where support for color monitors was shifting; the standard was for hyperlinks to use black text with some sort of underline, hover state or border. Mosaic chose to use blue, and they chose to port their browser for multiple operating systems. This helped Mosaic become the standard browser for internet use, and helped solidify its user interface as the default language for interacting with the web.
What happened in 1993 to suddenly make hyperlinks blue? No one knows, but I have some theories. I often hear that blue was chosen as the hyperlink color for color contrast. Well, even though the W3C wasn't created until 1994, and so the standards for which we judge web accessibility weren't yet defined, if we look at the contrast between black as a text color, and blue as a link color, there is a contrast ratio of 2.3:1, which would not pass as enough color contrast between the blue hyperlink and the black text. Instead, I like to imagine that Cello and Mosaic were both inspired by the same trends happening in user interface design at the time. My theory is that Windows 3.1 had just come out a few months before the beginning of both projects, and this interface was the first to use blue prominently as a selection color, paving the way for blue to be used as a hyperlink color.
Additionally, we know that Mosaic was inspired by ViolaWWW, and kept the same gray background and black text that they used for their interface. Reviewing Mosaic's release notes, we see in release 0.7 black text with underlines appearing as the preferred way of conveying hyperlinks, and we can infer that was still the case until something happened around mid April right before when blue hyperlinks made their appearance in release 0.13. In fact, conveying links as black text with underlines had been the standard since 1985 with Microsoft 1, which some once claimed Microsoft had stolen from Apple's Lisa's look and feel.
I think the real reason why we have blue hyperlinks is simply because color monitors were becoming more popular around this time. Mosaic as a product also became popular, and blue hyperlinks went along for the ride. Mosaic came out during an important time where support for color monitors was shifting; the standard was for hyperlinks to use black text with some sort of underline, hover state or border. Mosaic chose to use blue, and they chose to port their browser for multiple operating systems. This helped Mosaic become the standard browser for internet use, and helped solidify its user interface as the default language for interacting with the web.
Because they are cool (Score:2)
Blue is considered a cool color, and hyperlinks were cool.
Re:Because they are cool (Score:5, Insightful)
TFA implies that blue was a mistake because there isn't enough contrast to make it stand out.
Nonsense. The primary purpose of hypertext is to be readable text. Making links red or magenta, or whatever will make them "stand out" but also make the text less readable.
A typical Wikipedia page has hundreds of links. Most readers click on only a few or none. They are there to read, not to click.
Re: (Score:2)
Yes, that is the reason.
I'writing web-pages since 1994, when XMosaic was the predominant browser.
Re: (Score:3)
Blue has the right amount of contrast. It stands out enough that you notice that this text is different from the other text, but not enough to break text flow.
Re: (Score:2)
I don't really understand the science, but I do find it really hard to see blue writing against both light and dark backgrounds, although my vision is generally OK when wearing varifocals. It is much worse while trying to read the cooking instructions on microwavable dinners (why are they not black-on-white?) than blue writing on a screen - for which
Re: (Score:2)
If you have early stage cataracts - which a high percentage of people over 60 do, then your lenses become yellowed and this affects your ability to see blue.
At the time the hyperlink was invented, none of the people doing that were over 60, and neither did any of them think about people over 60.
Re: (Score:1)
Re: (Score:2)
All that mattered at the time was that links be a contrasting color on the primitive pages of that era. Once chosen, that color became a de facto standard.
Re:Because they are cool (Score:5, Informative)
16 color displays were really common at that time.
Because it was popular to emulate print material. The background was white
For readability that taken out all the high contrast colors, as well as light gray (dark white). Normal text will be black to match print.
Leaving
001 blue
010 green (works but a lot of people are red green colorblind)
011 cyan (even the darker version is hard to see with white)
100 red (often used for error and see green)
101 magenta (often a feminine color)
110 brown (darn ugly)
Blue is really the only color available.
Re: (Score:2)
110 brown (darn ugly)
Racist.
Seriously, though, one does have to wonder if even that much thought went into it after narrowing it down. Maybe there's a universe out there where Slashdot is currently asking how we wound up with those colorblind-unfriendly green hyperlinks because someone liked green more than blue.
FYI (Score:1)
Re: (Score:2)
And Microsoft lifted their design language for Windows 95 from NeXTSTEP.
Re: (Score:1)
And Microsoft lifted their design language for Windows 95 from NeXTSTEP.
And this purports exactly what in relation to the comment author's claim that Windows 1.0 was lifted from Lisa?
Why indeed (Score:5, Funny)
Asks the article with a green hyperlink.
Re: (Score:1)
You know, I composed two rebuttals to this, and they were both wrong. Especially the part where I said "yellow-blue, green" is mostly green.
Creating a fake color charts might make a nice art exhibit now that I think about it. Use red, green, blue, and white spotlights with shaped masking for additive lighting, and shine them on screens where parts of the venn-diagram are actually colored for a subtractive effect. I wonder if I could create one of those where my idea looks to be true. I also wonder if specif
Re: (Score:1)
It's plausible that cyan hues may appear more greenish than blueish to some people even if the display is calibrated for color fidelity.
Here's some decent summery on the general topic https://www.youtube.com/watch?... [youtube.com]
Re: Why indeed (Score:2)
Re: Why indeed (Score:2)
Yes, itâ(TM)s possible, and has been done. Look up Turrell and make a point to visit his work if you have the opportunity.
Re: (Score:1)
Thank ye kindly for making my day more colourful.
That's awesome (Score:2)
> You know, I composed two rebuttals to this, and they were both wrong.
It's awesome that you have the ability to realize that a thought you had was wrong. It seems many people lack that capability.
Some here on Slashdot lack it completely, like a person with no eyes is completely blind. They'll say "product X came out way before product Y" and even as you show them the release announcements of both products, they'll insist the ads and press releases from the companies are wrong.
The other day I sent someth
Re: (Score:2)
There is no maybe involved. The problem is something else.
Re: (Score:2)
and... (Score:2)
Blue is the sky (Score:2)
Green could've worked.
Blue stands out more though.
Re: Blue is the sky (Score:3)
16-colors (Score:5, Insightful)
"if we look at the contrast between black as a text color, and blue as a link color, there is a contrast ratio of 2.3:1"
Or, maybe... we didn't give two shits about modern concepts of color contrast on computers, because, well, they pretty much didn't exist. The platform had to exist on a 16-color display. Yeah, that's it. We ONLY had 16-colors. So why was blue chosen? Well, what about red and purple? They were ALSO chosen, to represent hover state and visited state.
Really, not THAT much thought went into things like is done today. It was as simple as "does this work? sure, let's go with it!", because we didn't have the luxury of having a 24-bit color pallet with 16 MILLION possible colors.
Re: (Score:2)
That is an absolutely plausible explanation; one which I believe. However: You're talking about obsessive nerds here. I spent three hours last week comparing gas stations. One never knows for sure.
Re: (Score:2)
Did you account for whether there'd be puddles where you stand while filling your gas tank?
Re: (Score:2)
Hold over from DOS and early colour graphics. First CGA and then 16 colour EGA. Dark blue was a popular choice for dark text on a white background, probably because like blue ink it gives good contest.
Re: (Score:2)
Re: (Score:2)
Re: 16-colors (Score:2)
DisplayKit.h (Score:2)
It's not easy being blue. (Score:5, Funny)
Why Are Hyperlinks Blue?
'Cause the thrill of being clicked is fleeting and then they're sad ... -- oh, you meant the color.
Easy (Score:5, Funny)
Links are blue due to a phenomenon called Raleigh scattering. This scattering refers to the scattering of bits (of which links are a form) by bits of a much smaller wavelength. Data is scattered by the bits on the internet, and what comes through down to your browser is called diffuse bit radiation, and though only about 1/3rd of bits are scattered, the smallest bits tend to scatter easier. These smaller bits correspond to blue hues, hence why when we look at the link, we see it as blue.
They aren't blue (Score:2)
My four year old (Score:1)
Re: (Score:2)
Legacy Tech creating a Social Standard (Score:3)
Boo! (Score:2)
My hyperlink blues are natural (Score:2)
made by crushed beetles grown organically. They're objectively better than synthetic blue hyperlinks.
Re: (Score:2)
No, they're Smurfs. Gargamel eventually won and is running a captive breeding program so he can get all the blue needed for hyperlinks.
Re: (Score:2)
Re: (Score:2)
They put you in touch with the Earth. Your mind just knows they're the way it's meant to be.
Wrong (Score:5, Interesting)
Using underlines for links is dumb because underline (and bold and italics,etc) already had a standard meaning in text layout. Colors generally didn't (though accountants sometimes used red numbers to indicate negative numbers, thus the term "bleeding red ink"). Blue was likely chosen because it's close enough to black that it would still read well against a while background, but just different enough to be noticeable. That's what people mean when they say it was chosen for contrast; not contrast against black, but contrast against white.
Re: (Score:2)
Blue was likely chosen because it's close enough to black that it would still read well against a while background, but just different enough to be noticeable
Mod up; that was my very first thought as well. Hyperlinks appear within the text, and having it stand out too much from black would make for a poorer reading experience.
Re: (Score:3)
Using underlines for links is dumb because underline (and bold and italics,etc) already had a standard meaning in text layout.
Uh... the underline was the original choice for links [harvard.edu] even before blue was added, and then for about a decade, hyperlinks were blue and underlined and that was that.
I wish they still were (Score:3)
I'm getting tired of searching for things to click on pages done by the new cool kids who don't care.
Re: (Score:2)
There were only 16 colors TOTAL at the time. (Score:2, Interesting)
> there is a contrast ratio of 2.3:1, which would not pass as enough color contrast
There aren't significantly better options. Anything lighter (colors 8-15) wouldn't contrast adequately against the background (which was color 7, light grey; the evil satanic trend towards Blinding White Backgrounds came later). The correct solution would've been to use color 0 (black) as the background, which gives you color 7 as a g
Re: (Score:1)
Re: (Score:2)
This is almost as silly as the claim from TFS that "color monitors were becoming more popular around this time". By 1993 it was pretty hard to buy a PC with less than VGA, and the version of Windows that first supported 256 colors was 2.0, released at the end of 1987.
Actually thankful for blue hyperlinks (Score:3)
Anyway the point is moot now. Everyone is going for "flat" interfaces, and the UI does not want to burdened with trivial things like what is clickable and what is not, and controls that are invisible till a mouse over etc. Anytime now we can expect hyperlinks to be shown with White font on White background.
I'ts obviously (Score:2)
...so they're not green.
Red/Green Colorblind (Score:4, Insightful)
3% of people are color abnormal and 90% of those have red/green discrimination problems.
So rule out reds and greens, choose among the other colors in the 16-color palette and have enough contrast against white.
Was there another choice? Nope.
Re: (Score:2)
No, reds and greens aren't ruled out, person with red-green color blindness sees those differently than black.
Color discrimination issues irrelevant and not the reason for choosing blue.
Idiot (Score:3)
"Well, even though the W3C wasn't created until 1994, and so the standards for which we judge web accessibility weren't yet defined"
When you say "we", you mean "I".
I'm personally able to see contrast without a committee.
"if we look at the contrast between black as a text color, and blue as a link color, there is a contrast ratio of 2.3:1, which would not pass as enough color contrast between the blue hyperlink and the black text"
Well, in fact it's fine. In fact it's good. Because I don't see in greyscale.
The whole piece is garbage. Who is this moron?
Poorly researched article (Score:4, Insightful)
It's a really poorly written article filled with speculation, easily researched untruths, and just plain silliness.
Screenshots are for the wrong things (Windows 2, not Windows 1). WorldWideWeb.app was not created in 1987. Color NeXT were available in 1990. Windows 3.0 and 3.1 had nothing to do with it - their hyperlinks were green. And Gopher was designed to be green on black? No, silly - terminals were commonly green on black.
Seriously, Mozilla?
Because HTML also supports underline tags. (Score:2)
Someone chose blue. It worked. Having blue change to purple for already-visited links made sense. No one else saw fit to make a competing standard. It stuck.
Standard accent colour (Score:4, Insightful)
Blue was the default accent colour, used such things as the selected item in a list, selected text, window title bars, etc in:
- Classic MacOS
- Windows 3.1
- AmigaOS 2.0
- Many programs and environments on X11/Motif
- Many programs on OpenLook
etc..
It was thus the most conventional choice.
It was also neutral, with the other primaries being associated with positive (green) or negative (red) ... and yellow not showing up well on a white or grey background.
Re: (Score:2)
This. Blue is just the natural choice if you go through the list of available colours, which is essentially the primary colours and those between (RGB and YCM). There's little mystery involved. It's just the colour you'd most likely pick if you had to make the choice.
Yeah, sure (Score:2)
A web browser being developed by UIUC's National Center for Supercomputing Applications was isomehow nfluenced by the color choices being made in Windows 3.1.
I'm not buying it.
Now all we need... (Score:2)
Hyperlinks were also underlined... (Score:2)
Mosaic (Score:2)
In Mosaic, you could change the font properties of regular text, hyperlinks, and just about anything else, including fonts and styles for different headings and other styles.
Mnemonic (Score:1)
if ($read = 'RED') { $opposite_of_read = "BLUE" )
Blue is the unread/un-red.
That is all.
Why not just ask the devs? (Score:2)
What's the point of all this speculation and rumination? Just ask the people who wrote NCSA Mosaic. Marc Andreessen is on Twitter. Eric Bina seems to be, also. It's not like this is ancient history that we can only guess at...
Red, yellow and green already have meaning (Score:1)
Why were backgrounds grey? (Score:2)
Mosaic used black text on a grey background, and somewhere along the line, we switched to the default settings being black text on a white background. Des anyone know why this change occurred, and why the background was originally grey?
That's perfectly fine until someone chooses to make their default background-colour "Mosaic Grey" so they can read txt-documents and html-documents without a background-colour in old-skool grey and then realises that someone changed the foreground text-colour but did not both
Doppler effect (Score:2)
The hyperlinks are coming at you so fast they're blue-shifted.
Re: (Score:2)
^^^^ This, a thousand times, this!
Working it out backwards (Score:1)
Links that have been followed are red - because the destination has been (in theory) read
Financial dealing screens are blue / red because as other posters have mentioned, most (not all) can tell the difference between blue and read ... so blue. :)
This has been so since before the internet