Estilos accesibles para el color de enlaces y placeholders en CSS

Los enlaces deben poder reconocerse sin depender solo del color. El subrayado es la señal duradera más sencilla, y los estilos de hover y foco deben reforzar esa distinción en lugar de sustituirla.

a { color: #1d4ed8; text-decoration: underline; }
a:hover { color: #1e40af; }
a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
a:visited { color: #6b21a8; }

La colección de tonos azules ofrece una escala útil para empezar. Comprueba cada estado sobre su superficie real en el verificador de contraste, incluidos los indicadores de foco.

En páginas largas y sitios de documentación, el color de los enlaces visitados también importa. Un estado visitado morado ayuda a orientarse, pero necesita el mismo contraste legible que el color de enlace normal.

El placeholder no es una etiqueta

Un placeholder es un ejemplo o una pista breve. Desaparece cuando la persona escribe, así que nunca debe sustituir a una <label> permanente.

input::placeholder {
  color: #6b7280;
  opacity: 1;
}

Históricamente, algunos navegadores reducían la opacidad del placeholder. Definir opacity: 1 hace que el color elegido sea predecible. El placeholder necesita contraste suficiente para leerse, pero debe quedar visualmente por debajo del texto introducido. Compara opciones en la escala de grises.

Si el placeholder es demasiado tenue, la gente puede confundir un campo vacío con uno deshabilitado. Si es demasiado intenso, puede confundir la pista con contenido ya escrito. Prueba los formularios en modo claro y oscuro.

Si recibes un token de diseño sin un nombre conocido, usa el buscador de nombres de color para encontrar nombres CSS y chinos tradicionales cercanos. Los nombres ayudan a conversar, pero el código debe conservar el valor exacto.

Repasa los principios generales en cómo definir el color del texto en HTML y CSS.