{"id":23946301,"date":"2025-10-16T12:46:33","date_gmt":"2025-10-16T10:46:33","guid":{"rendered":"https:\/\/www.demomentsomtres.com\/2025\/10\/blog-per-que-enllacos-blaus\/"},"modified":"2025-11-19T08:46:50","modified_gmt":"2025-11-19T07:46:50","slug":"blog-per-que-enllacos-blaus","status":"publish","type":"post","link":"https:\/\/www.demomentsomtres.com\/es\/2025\/10\/blog-per-que-enllacos-blaus\/","title":{"rendered":"El primer color de los enlaces: \u00bfpor qu\u00e9 son azules \u201cpor defecto\u201d?"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cGrass is green and hyperlinks are blue.\u201d \u2014 Elise Blanchard<\/p>\n<\/blockquote>\n\n<p>Si alguna vez te has preguntado por qu\u00e9 en los sitios web los enlaces aparecen en azul por defecto sin que nadie les diga expl\u00edcitamente \u201cponme azul\u201d, aqu\u00ed tienes una historia sorprendente de evoluci\u00f3n tecnol\u00f3gica, investigaci\u00f3n sobre percepci\u00f3n y convenciones sociales. <strong>No es un capricho est\u00e9tico ni una simple coincidencia: es el resultado de una combinaci\u00f3n de azar, estudios de usabilidad, herencias del pasado digital y, en definitiva, \u201cmemoria muscular\u201d cultural de los usuarios web.<\/strong> Todo ello ha convertido el azul en el color de los enlaces, hasta el punto de que nos parece invisible de tan normalizado que est\u00e1.<\/p>\n\n<h2 class=\"wp-block-heading\">Los antecedentes: la investigaci\u00f3n sobre enlaces antes de la WWW<\/h2>\n\n<p>Antes de que la World Wide Web fuera omnipresente, ya exist\u00edan sistemas de hipertexto que exploraban c\u00f3mo indicar enlaces dentro de los textos. En el campo de la Interacci\u00f3n Persona-Ordenador, el laboratorio de Ben Shneiderman en la Universidad de Maryland investig\u00f3 durante los a\u00f1os ochenta diversas formas de destacar enlaces integrados en el texto. Se probaron distintos colores y formatos (subrayados, negritas, etc.) para ver cu\u00e1les interfer\u00edan menos en la lectura y, al mismo tiempo, atra\u00edan la atenci\u00f3n del usuario de forma intuitiva.   <strong>De aquellos experimentos surgi\u00f3 una soluci\u00f3n ganadora: utilizar un azul claro por defecto en los enlaces seleccionables.<\/strong> No era por est\u00e9tica, sino por pragmatismo.<\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cEl ressaltat en vermell feia els enlla\u00e7os m\u00e9s visibles, per\u00f2 redu\u00efa la capacitat de llegir i retenir el contingut\u2026 el blau era visible sobre fons blanc i negre i no interferia en la retenci\u00f3\u201d. \u2014 Ben Shneiderman <\/p>\n<\/blockquote>\n\n<p>Estos estudios se materializaron en proyectos concretos como el sistema HyperTIES (1983), un entorno de hipertexto comercial donde <strong>los enlaces ya aparec\u00edan con texto resaltado en azul claro sobre fondo oscuro.<\/strong> De hecho, HyperTIES se considera la primera implementaci\u00f3n de un hiperv\u00ednculo de color azul, tras incorporar los resultados de la investigaci\u00f3n de Maryland. As\u00ed pues, mucho antes de que \u201cnavegar por la web\u201d fuera parte de la vida cotidiana, la idea de usar el azul para indicar enlaces clicables ya se estaba gestando en los laboratorios. El azul de los enlaces no naci\u00f3 de un capricho visual, sino de pruebas emp\u00edricas de usabilidad previas a la era de la web moderna.   <\/p>\n\n<h2 class=\"wp-block-heading\">Mosaico y la consolidaci\u00f3n del azul como norma<\/h2>\n\n<p>A pesar de estos antecedentes en sistemas de hipertexto, <strong>el momento decisivo para establecer el azul como est\u00e1ndar lleg\u00f3 con el navegador Mosaic en 1993.<\/strong> Creado por Marc Andreessen y Eric Bina, fue uno de los primeros navegadores gr\u00e1ficos populares, y en sus versiones iniciales introdujo los enlaces en texto azul subrayado. Antes de eso, otras interfaces hab\u00edan usado diferentes indicadores: en el primer navegador de Tim Berners-Lee (WorldWideWeb, 1991) los enlaces eran negros o subrayados sobre fondo blanco, y en entornos de texto antiguos a menudo se utilizaban subrayados o colores por defecto del sistema (por ejemplo, texto verde sobre negro en el protocolo Gopher).   <strong>Mosaic, sin embargo, rompi\u00f3 moldes al establecer por defecto el color azul para los enlaces no visitados (y p\u00farpura para los visitados), sobre el caracter\u00edstico fondo gris p\u00e1lido de las p\u00e1ginas web de la \u00e9poca.<\/strong><\/p>\n\n<p><strong>\u00bfPor qu\u00e9 Mosaic eligi\u00f3 precisamente el azul? <\/strong><\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cPorque me gusta el azul. Es un color s\u00f3lido y ten\u00eda que elegir alguno\u201d. \u2014 Marc Andreessen <\/p>\n<\/blockquote>\n\n<p>Esta reciente confesi\u00f3n \u2014medio en broma\u2014 resalta el elemento de azar o gusto personal en la decisi\u00f3n. Con todo, tambi\u00e9n hab\u00eda motivos pr\u00e1cticos y contextuales importantes: a principios de los 90, los monitores en color se estaban popularizando y un azul oscuro tirando a \u201croyal blue\u201d ofrec\u00eda muy buen contraste sobre fondos claros sin resultar estridente. Adem\u00e1s, la <g id=\"gid_2\">elecci\u00f3n del azul encajaba con cierta herencia de interfaz<\/g>: sistemas operativos como Windows hab\u00edan empezado a usar tonos de azul en elementos seleccionados (por ejemplo, la barra de selecci\u00f3n de texto o los fondos de men\u00fas), lo que aportaba familiaridad a los usuarios. Por tanto, podemos especular que los dise\u00f1adores de Mosaic se inspiraron en las tendencias de dise\u00f1o de interfaz del momento.   <\/p>\n\n<p>Sea como sea, una vez Mosaic adopt\u00f3 el azul subrayado, los navegadores posteriores siguieron el mismo camino. <strong>Netscape Navigator (1994) <\/strong>hered\u00f3 esta convenci\u00f3n de Mosaic, e <strong>Internet Explorer (1995)<\/strong>, basado en parte en el c\u00f3digo licenciado de Mosaic, tambi\u00e9n la mantuvo. As\u00ed, en pocos a\u00f1os, <strong>millones de internautas de la d\u00e9cada de los 90 asimilaron que enlace = texto azul subrayado<\/strong>. Lo que hab\u00eda comenzado como una decisi\u00f3n de un equipo de desarrolladores se convirti\u00f3 en una norma de facto de la Web.  <\/p>\n\n<p>Cabe destacar que esta \u201cnorma\u201d no estaba escrita en ning\u00fan manual oficial de la web. De hecho, Sir Tim Berners-Lee (el inventor de la web) es citado a menudo como quien \u201chizo los enlaces azules\u201d, posiblemente porque en alg\u00fan momento acept\u00f3 esta convenci\u00f3n sin oponerse. La realidad hist\u00f3rica es que el color azul triunf\u00f3 por popularidad m\u00e1s que por imposici\u00f3n: era una soluci\u00f3n pr\u00e1ctica, probada, y se hab\u00eda extendido gracias a Mosaic.  <\/p>\n\n<h2 class=\"wp-block-heading\">Percepci\u00f3n, legibilidad y factores humanos<\/h2>\n\n<p>Elegir un color visible es solo la primera parte del reto; la otra parte es asegurar que ese destacado no perjudique la legibilidad ni la experiencia de usuario en general. Durante a\u00f1os, algunos expertos pusieron en duda si el azul era la mejor opci\u00f3n desde un punto de vista estrictamente fisiol\u00f3gico. Un argumento cl\u00e1sico (mencionado por el gur\u00fa de usabilidad Jakob Nielsen) es que <strong>solo ~2% de los conos de la retina humana son sensibles al azul<\/strong>, lo que podr\u00eda hacer que el texto azul sea menos n\u00edtido o un \u201cmal dise\u00f1o\u201d en t\u00e9rminos de utilidad pura.  <\/p>\n\n<p>No obstante, <strong>la pr\u00e1ctica y los estudios emp\u00edricos modernos desmintieron esos temores<\/strong>. Experimentos con eye-tracking (seguimiento de los movimientos oculares) <strong>han demostrado que los enlaces en azul subrayado no provocan diferencias significativas en la forma en que leemos un texto respecto al texto negro normal.<\/strong> Durante la primera lectura (first pass), el hecho de que una palabra est\u00e9 resaltada en azul no hace que la saltemos ni que entorpezca la velocidad lectora. Ahora bien, el mismo estudio observ\u00f3 que, en total, <strong>los lectores dedicaban un poco m\u00e1s de tiempo a releer las palabras resaltadas<\/strong> (es decir, volv\u00edan atr\u00e1s para mirarlas un poco m\u00e1s).    <\/p>\n\n<p>Pero eso no es necesariamente malo: significa que los hiperenlaces atraen la atenci\u00f3n en una segunda pasada, lo que puede favorecer la retenci\u00f3n de esa informaci\u00f3n. En resumen, <strong>el azul es una decisi\u00f3n de dise\u00f1o casi perfecta<\/strong>: no interfiere en la primera lectura, pero resalta lo suficiente como para que el cerebro identifique que ah\u00ed hay algo especial que merece atenci\u00f3n. <\/p>\n\n<p><strong>Otra ventaja del azul, ya insinuada antes, es su robustez frente a los problemas de visi\u00f3n del color.<\/strong> En palabras del veterano dise\u00f1ador Jeffrey Zeldman, fue una \u201cbuena suerte\u201d que el azul resultara ser un color acertado: los rojos y verdes son los colores m\u00e1s problem\u00e1ticos para el daltonismo. <strong>Casi nadie tiene deficiencia con el azul<\/strong>. \u201cFue pura suerte que el color por defecto de los hiperv\u00ednculos sea azul y subrayado\u201d. Es decir, por azar o por ensayo y error, se eligi\u00f3 un color universalmente reconocible.   <\/p>\n\n<p>Muchos tipos de daltonismo afectan la percepci\u00f3n de los rojos y verdes, pero es extremadamente raro tener deficiencias en el azul. Esto hace que el azul por defecto sea una elecci\u00f3n segura en entornos donde no se puede personalizar mucho la paleta o cuando se busca una soluci\u00f3n universal. Adem\u00e1s, <g id=\"gid_0\">la convenci\u00f3n de subrayar los enlaces ofrece un refuerzo adicional para la accesibilidad<\/g>: incluso si alguien no distingue bien el color, el subrayado constante le indica que eso es clicable. Es interesante notar que el subrayado ya se hab\u00eda utilizado en contextos como Windows 1.0 (1985) para indicar texto clicable, y a\u00fan hoy sigue siendo un recurso de accesibilidad recomendado.    <strong>En definitiva, el azul subrayado resiste muy bien el paso del tiempo porque combina contraste, familiaridad y redundancia visual para diferentes tipos de usuarios.<\/strong><\/p>\n\n<h2 class=\"wp-block-heading\">Memoria cultural: el h\u00e1bito de hacer clic en el texto azul<\/h2>\n\n<p>Despu\u00e9s de d\u00e9cadas viendo enlaces azules, <strong>todos hemos desarrollado una especie de reflejo condicionado: si vemos un texto azul subrayado, asumimos autom\u00e1ticamente que podemos hacer clic en \u00e9l.<\/strong> Es como un idioma visual universal de internet.<br\/>Esta inercia cultural \u2014ese \u201cm\u00fasculo cultural\u201d que hemos entrenado sin darnos cuenta\u2014 tiene consecuencias poderosas en el dise\u00f1o UX.<br\/>Por ejemplo, cuando ves un texto negro normal dentro de un p\u00e1rrafo, no piensas que pueda ser un enlace (aunque a veces lo sea). En cambio, si ves un fragmento en azul y subrayado, casi no hace falta pensar: sabes que eso es un hiperv\u00ednculo y te viene instintivamente pasar el cursor para hacer clic.    <\/p>\n\n<p>Un caso famoso que ilustra la fuerza de este h\u00e1bito es <strong>el experimento que Google realiz\u00f3 en 2016, cuando decidi\u00f3 probar a mostrar los enlaces de los resultados de b\u00fasqueda en color negro en lugar del azul tradicional.<\/strong> La reacci\u00f3n de los usuarios (y de la prensa tecnol\u00f3gica) fue inmediata y contundente: aquello no \u201cparec\u00eda\u201d Google; mucha gente encontraba la interfaz extra\u00f1a, menos usable, e incluso se hablaba de \u201ccaos\u201d y \u201cdisrupci\u00f3n\u201d en la red. En otras palabras,   <strong>cambiar el azul a negro en los enlaces provoc\u00f3 rechazo porque romp\u00eda una costumbre arraigada. Google finalmente dio marcha atr\u00e1s en aquel test, posiblemente confirmando que, si algo tan b\u00e1sico funciona y est\u00e1 integrado en la mente del usuario, es mejor no tocarlo. <\/strong><\/p>\n\n<p>Curiosamente, en el extremo contrario, Google tambi\u00e9n experiment\u00f3 a fondo con qu\u00e9 tono de azul era el \u00f3ptimo, hasta el punto de llegar a probar 41 tonalidades de azul diferentes para determinar cu\u00e1l generaba m\u00e1s interacci\u00f3n en los enlaces patrocinados. \u00a1Nunca subestimes el poder de un buen azul!  <\/p>\n\n<p><strong>Esta memoria cultural del azul es tan potente que incluso los dise\u00f1adores de nuevas aplicaciones<\/strong>, que tienen total libertad para elegir colores de acuerdo con la identidad de marca, <strong>a menudo mantienen el azul para los enlaces o elementos clicables importantes<\/strong>. Saben que juegan sobre seguro. Al fin y al cabo, si el usuario ya espera que algo funcione de una determinada manera, <strong>seguir la convenci\u00f3n mejora la usabilidad<\/strong>. Un estudio de 2019 mostr\u00f3 que los usuarios encontraban m\u00e1s r\u00e1pidamente una palabra objetivo en una p\u00e1gina web cuando esa palabra era azul y subrayada, en comparaci\u00f3n con si era negra y subrayada. Es decir, <strong>nuestro cerebro detecta antes lo que parece un enlace<\/strong>, porque lo hemos estado \u201centrenando\u201d durante a\u00f1os.    <\/p>\n\n<p>Podemos considerar este fen\u00f3meno como un caso de <strong>\u201cdise\u00f1o invisible\u201d: cuando un elemento de dise\u00f1o funciona tan bien y est\u00e1 tan asumido por los usuarios, se vuelve invisible, pasa desapercibido<\/strong>. Como dec\u00eda el gur\u00fa Don Norman, <strong>\u201ccuando todo funciona, el dise\u00f1o desaparece\u201d. <\/strong>El color azul de los enlaces es una pieza de dise\u00f1o invisible porque ya no pensamos en \u00e9l conscientemente, simplemente lo usamos. Solo cuando nos lo cambian (como ocurri\u00f3 en aquel experimento de Google) nos damos cuenta de cu\u00e1nto lo echamos de menos. Tambi\u00e9n influye la <strong>capacidad de adaptaci\u00f3n humana<\/strong>: nos hemos adaptado tanto a esta convenci\u00f3n que un cambio nos desconcierta. Los usuarios nos adaptamos a las formas de hacer cotidianas, y los problemas se vuelven invisibles por repetici\u00f3n, no por resoluci\u00f3n. En el caso que nos ocupa, <strong>el azul ya no se percibe como una decisi\u00f3n de dise\u00f1o, sino como una propiedad intr\u00ednseca de los enlaces, del mismo modo que nadie se pregunta por qu\u00e9 el texto normal es negro est\u00e1ndar, tampoco cuestionamos el azul de los links.<\/strong>    <\/p>\n\n<h2 class=\"wp-block-heading\">Alternativas y \u201cjugar con fuego\u201d: \u00bfqu\u00e9 pasa si no usamos azul?<\/h2>\n\n<p>Hoy en d\u00eda, evidentemente, no existe ninguna ley que obligue a usar azul para los enlaces. Los dise\u00f1adores web tienen todo un arco\u00edris de colores para elegir, y muchas marcas optan por aplicar su color corporativo por coherencia de marca. Es habitual encontrar sitios web con enlaces rojos, naranjas, verdes o de cualquier color imaginable.   <strong>Ahora bien, esta libertad viene con responsabilidades: es necesario garantizar que el color elegido ofrezca suficiente contraste y se perciba claramente como un enlace. Si rompemos la convenci\u00f3n del azul, debemos asegurarnos de construir una nueva convenci\u00f3n igual de clara dentro de nuestro entorno. <\/strong> Esto implica, por ejemplo, mantener el subrayado u otros indicadores visuales (como un cambio de tono al pasar el rat\u00f3n, un peque\u00f1o icono de flecha, etc.) que dejen claro que ese texto es clicable. Tambi\u00e9n debe cuidarse la accesibilidad: un color poco com\u00fan puede ser problem\u00e1tico para usuarios con daltonismo o con pantallas en blanco y negro, etc., si no se verifica adecuadamente.  <strong>Como indica la norma, debe haber suficiente contraste (relaci\u00f3n 4.5:1 respecto al fondo) para el texto enlazado que no est\u00e9 subrayado.<\/strong><\/p>\n\n<p>En los c\u00edrculos de dise\u00f1o, de vez en cuando surge el debate de \u201c\u00bfdebemos dejar el azul porque es demasiado aburrido o demasiado anticuado?\u201d. Es una tentaci\u00f3n comprensible de querer innovar.  <strong>Pero muchos expertos advierten que cambiar el color de los enlaces sin un motivo de peso es \u201cjugar con fuego\u201d en t\u00e9rminos de usabilidad, especialmente si tienes un p\u00fablico masivo o con poca experiencia.<\/strong> \u00bfPor qu\u00e9? Pues porque te a<strong>rriesgas a hacer menos evidentes las funcionalidades b\u00e1sicas de tu sitio.<\/strong> Imagina a un usuario poco acostumbrado a la web que entra en tu p\u00e1gina y no encuentra nada en azul ni subrayado: \u00bfc\u00f3mo sabr\u00e1 d\u00f3nde puede hacer clic? Quiz\u00e1 lo deduzca por el contexto o pasando el rat\u00f3n, pero le costar\u00e1 m\u00e1s, y eso es fricci\u00f3n a\u00f1adida. <strong>Un estudio del Nielsen Norman Group concluye: \u201clos tonos de azul dan la se\u00f1al m\u00e1s fuerte de ser enlaces, pero otros colores tambi\u00e9n pueden funcionar casi igual de bien, siempre que proporciones pistas redundantes\u201d.<\/strong>    <strong>Es decir, se puede innovar, pero hay que hacerlo con cuidado. Y en ning\u00fan caso uses el azul para textos que no sean enlaces \u2014eso s\u00ed que ser\u00eda una receta para la confusi\u00f3n. <\/strong>ya que los usuarios lo interpretar\u00edan como clicable cuando no lo es.<\/p>\n\n<p>En resumen, <strong>el color azul por defecto en los hiperv\u00ednculos es hijo de la pr\u00e1ctica y la ciencia<\/strong>: surgi\u00f3 de experimentos de usabilidad, se difundi\u00f3 gracias a un navegador pionero, arraig\u00f3 en la cultura digital y ha demostrado ser una elecci\u00f3n acertada desde m\u00faltiples puntos de vista (percepci\u00f3n, accesibilidad, habituaci\u00f3n del usuario). \u00bfPodr\u00edamos haber acabado con enlaces rojos o verdes? Quiz\u00e1s s\u00ed, si la historia hubiera sido otra.   <strong>Pero el destino tecnol\u00f3gico-cultural quiso que fueran azules. Y ahora ya forma parte del ADN de la web. As\u00ed que la pr\u00f3xima vez que hagas clic en un trozo de texto azul y subrayado, recuerda: detr\u00e1s de ese color hay una peque\u00f1a historia de evoluci\u00f3n y convenciones compartidas. Y funciona tan bien que casi nadie se detiene a pensarlo.   <\/strong>. Si eso no es un dise\u00f1o bien resuelto, \u00bfentonces qu\u00e9 lo es? <\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cGrass is green and hyperlinks are blue.\u201d \u2014 Elise Blanchard Si alguna vez te has preguntado por qu\u00e9 en los sitios web los enlaces aparecen en azul por defecto sin que nadie les diga expl\u00edcitamente \u201cponme azul\u201d, aqu\u00ed tienes una historia sorprendente de evoluci\u00f3n tecnol\u00f3gica, investigaci\u00f3n sobre percepci\u00f3n y convenciones sociales. No es un capricho [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":23946298,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[796],"tags":[],"class_list":["post-23946301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-comunicacion-marqueting"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/23946301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/comments?post=23946301"}],"version-history":[{"count":2,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/23946301\/revisions"}],"predecessor-version":[{"id":25814707,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/23946301\/revisions\/25814707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/media\/23946298"}],"wp:attachment":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/media?parent=23946301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/categories?post=23946301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/tags?post=23946301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}