Color de los enlaces: por qué #0000FF falla y los 8 colores de enlace que conviene usar
El azul puro es el primer color de enlace que todo el mundo elige y el equivocado junto al texto del cuerpo y en pantallas oscuras. Subráyalo, acláralo en oscuro, muestra los enlaces visitados y conserva el anillo de foco. Incluye ocho códigos.
El color de enlace correcto es un azul algo más suave que además subrayas, no #0000FF a secas. El azul puro es el primer color de enlace que todo el mundo elige, y falla en dos sitios: junto al texto negro del cuerpo y en pantallas oscuras. Aquí tienes las cuatro correcciones y los ocho colores para pasarle a tu desarrollador.
Por qué falla #0000FF
Nadie decide usar #0000FF. Simplemente aparece. Es la palabra clave blue en CSS y el primer azul saturado de cualquier selector de color.
Los propios navegadores traen por defecto algo distinto, #0000EE para un enlace y #551A8B para uno visitado, y subrayan ambos. El subrayado forma parte del trato original. Los diseñadores lo quitan para verse limpios y se quedan con el azul.
Entonces el azul tiene que hacer todo el trabajo solo. El azul puro es muy oscuro. Colócalo dentro de un párrafo de texto casi negro y los dos se leen casi igual para quien tiene dificultad para distinguir colores. En una pantalla oscura es peor: #0000FF se hunde en el fondo.
Un enlace son tres cosas: un color, una línea y un estado.
Corrección 1: subráyalo
Solo color
Subrayado
La regla detrás de esto es WCAG 1.4.1, uso del color.
Un enlace marcado solo por el color tiene que destacar con claridad del texto que lo rodea. El azul puro junto al negro puro no lo hace, y #0F62FE junto a #161616, el color de texto que usamos aquí, sí. Un subrayado elimina el problema por completo, porque el enlace ya no depende del color.
Subraya los enlaces dentro del texto corrido. Las barras de navegación, los botones y las tarjetas son distintos: su posición y su forma ya dicen "se puede pulsar", así que ahí el subrayado es opcional.
Solo color, escala de grises
Subrayado, escala de grises
Corrección 2: acláralo en oscuro
#0000FF en oscuro
#78A9FF en oscuro
No hay color. #0000FF sobre #161616 es demasiado oscuro para leerse a tamaño de cuerpo, y #78A9FF sobre el mismo fondo se lee sin esfuerzo. Los colores saturados que funcionan sobre blanco se vuelven más claros y suaves en oscuro, el mismo movimiento que hacemos con los colores de error.
Mantén dos azules y cámbialos con el tema: #0F62FE en pantallas claras, #78A9FF en las oscuras. El hover da un paso más: #0043CE en claro, #A6C8FF en oscuro.
Corrección 3: muestra por dónde ya se ha pasado
Todos los enlaces parecen nuevos
El visitado se vuelve morado
Nielsen Norman Group lo defiende desde 2004: la gente se pierde y da vueltas en círculos cuando los enlaces visitados y nuevos comparten un solo color. El morado es la convención, y los navegadores lo usan desde el principio. Usa #8A3FFC en pantallas claras y #BE95FF en las oscuras. Cuesta una regla de CSS: a:visited.
Corrección 4: conserva el anillo de foco
outline: none
Anillo de 2px #0F62FE
Los usuarios de teclado, los de pulsadores y cualquiera con la mano del ratón cansada dependen del anillo de foco.
Quitarlo con outline: none sin poner nada en su lugar incumple WCAG 2.4.7, foco visible. Si el anillo por defecto del navegador choca con tu diseño, reemplázalo. No lo borres.
Un anillo de 2px del color del enlace, con un pequeño desplazamiento, es la versión segura. WCAG 2.2 describe la forma más sólida como un perímetro de al menos 2 píxeles CSS.
Los 8 colores de enlace, claro y oscuro
Toca cualquier chip para copiar su código.
| Rol | Claro | Oscuro | Úsalo para |
|---|---|---|---|
| Texto | #161616 | #F4F4F4 | El texto que rodea al enlace |
| Enlace | #0F62FE | #78A9FF | Todos los enlaces en reposo |
| Hover | #0043CE | #A6C8FF | Puntero sobre el enlace |
| Visitado | #8A3FFC | #BE95FF | Enlaces ya abiertos |
Estos son los tokens de enlace de IBM Carbon, leídos de los valores publicados de su tema.
Pásale esto a tu desarrollador
:root {
--color-text: #161616;
--color-link: #0F62FE;
--color-link-hover: #0043CE;
--color-link-visited: #8A3FFC;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #F4F4F4;
--color-link: #78A9FF;
--color-link-hover: #A6C8FF;
--color-link-visited: #BE95FF;
}
}
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
El orden importa: :link, :visited, :hover, :focus, :active es la secuencia clásica, y una regla hover colocada antes de la regla visited nunca gana en un enlace visitado. El selector :focus-visible muestra el anillo para usuarios de teclado y lo omite en los clics de ratón, así que nadie tiene motivo para quitarlo.
Los números detrás de "fácil de leer"
| Par | Contraste |
|---|---|
| #0000FF sobre blanco | 8,6 a 1, pasa, y aun así está demasiado cerca del texto negro |
| #0000FF sobre #161616 | 2,1 a 1, falla |
| #0F62FE sobre blanco | 5,0 a 1 |
| #0043CE sobre blanco | 7,8 a 1 |
| #8A3FFC sobre blanco | 5,0 a 1 |
| #78A9FF sobre #161616 | 7,7 a 1 |
| #A6C8FF sobre #161616 | 10,6 a 1 |
| #BE95FF sobre #161616 | 7,7 a 1 |
La primera fila es la razón por la que un verificador no basta. El azul puro sobre blanco pasa por el número. Falla la prueba real, que es si un enlace se ve distinto del texto negro que tiene al lado.
FAQ
¿De qué color deben ser los enlaces?
Un azul medio como #0F62FE sobre fondos claros y un azul más claro como #78A9FF sobre los oscuros, con subrayado en el texto del cuerpo.
¿Es #0000FF un buen color de enlace?
No por sí solo. Se lee bien sobre blanco, pero está demasiado cerca del texto negro para quienes no distinguen el azul, y sobre fondos oscuros casi desaparece.
¿Deben subrayarse los enlaces?
Sí, dentro de los párrafos. WCAG 1.4.1 dice que el color solo no puede marcar un enlace a menos que destaque con claridad del texto que lo rodea, y un subrayado elimina esa dependencia.
¿De qué color deben ser los enlaces visitados?
Morado. Los navegadores usan por defecto #551A8B, y sistemas de diseño como IBM Carbon usan #8A3FFC en pantallas claras y #BE95FF en las oscuras.
¿Qué color de enlace funciona en modo oscuro?
Un azul más claro. #78A9FF se lee fácilmente sobre #161616, donde #0000FF es demasiado oscuro para leerse a tamaño de cuerpo.
¿Puedo quitar el contorno de foco en los enlaces?
Solo si lo reemplazas por otro indicador visible. Quitarlo sin poner nada en su lugar incumple WCAG 2.4.7, foco visible.
Fuentes
- HTML Living Standard, Rendering: la hoja de estilos por defecto fija
:linken #0000EE,:visiteden #551A8B y subraya los enlaces. #0000FF es el color con nombrebluede CSS. - IBM Carbon color tokens, leídos de @carbon/themes 11.40.0: link-primary #0F62FE, hover #0043CE, visited #8A3FFC en el tema blanco; #78A9FF, #A6C8FF, #BE95FF en el tema g100.
- WCAG 2, 1.4.1 Use of Color y la técnica G183.
- WCAG 2.4.7 Focus Visible y 2.4.13 Focus Appearance.
- Nielsen Norman Group, Change the Color of Visited Links (Jakob Nielsen, 2004).
- Ratios de contraste calculados con la fórmula de luminancia relativa de WCAG. El texto de muestra está inventado para esta página.
- Publicado por primera vez como carrusel en UX Brainy.
Want links, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
