Colores y contrastes: hacer que tu sitio web sea legible para todos

Este gris claro tan elegante sobre fondo blanco, este texto delicado sobre la hermosa foto, esta fuente fina que respira refinamiento: tantas opciones « de diseño » que hacen que su sitio sea ilegible — para los visitantes bajo el sol en su teléfono, para los ojos que han superado los cuarenta años, para los millones de personas con visión imperfecta… es decir, en un momento u otro, para todos. El contraste no es un detalle técnico: es la condición primera para ser leído. Esta guía le da las reglas, las herramientas de verificación y las correcciones típicas — para un sitio hermoso Y legible, porque uno nunca ha excluido al otro.

Por qué el contraste es el fundamento de todo

La legibilidad de un texto depende primero del contraste de luminosidad entre él y su fondo — el contraste. Cuando es insuficiente, el ojo fuerza: lectura lenta, fatiga, abandono — a menudo sin que el visitante identifique por qué « este sitio es molesto ». Y las condiciones reales lo empeoran todo: pantalla de teléfono al aire libre, luminosidad baja por la noche, pantallas de calidad media, presbicia que afecta a la mayoría de los mayores de 45 años, sin contar las deficiencias visuales duraderas. Diseñar con un contraste sólido no es « hacer accesibilidad » como una casilla por marcar: es servir la lectura del 100% de los visitantes, el 100% del tiempo. Y el beneficio es colateral en todas partes: los motores de búsqueda valoran la experiencia, y un texto legible convierte mejor — mecánicamente.

Las reglas numéricas (simples) a conocer

Los estándares de accesibilidad dan referencias objetivas: la relación de contraste entre un texto y su fondo debe alcanzar 4,5:1 como mínimo para el texto corriente (3:1 para los títulos muy grandes) — el nivel de comodidad apunta a 7:1. No es necesario calcular de cabeza: los verificadores de contraste gratuitos en línea dan la relación pegando dos códigos de color, y las herramientas de desarrollo de los navegadores lo señalan directamente. Traducciones concretas: el gris medio sobre blanco casi siempre falla (el famoso #999999 sobre blanco: reprobado); el texto oscuro sobre fondo claro, o claro sobre fondo oscuro intenso, pasa con facilidad; los colores « de marca » claros (amarillos, pasteles) nunca llevan texto sobre fondo blanco. Cada pareja texto/fondo de su sitio merece su verificación — esto toma diez minutos para todo un sitio.

El buen reflejo. Haga la prueba del sol y la distancia: su sitio en teléfono, luminosidad media, a la luz del día — luego la pantalla con el brazo extendido. Todo lo que se vuelve molesto de leer (textos grises, menciones finas, botones pálidos) fallaría de todas formas en los verificadores. Esta prueba de treinta segundos, repetida en cada nueva página, atrapa el 90% de los errores de contraste antes que sus visitantes.

Los errores clásicos y sus correcciones

• El gris claro chic sobre blanco — el error número 1: oscurezca el gris del texto corriente (apunte a un gris muy oscuro, casi negro): la elegancia sobrevive, la legibilidad renace.
• El texto sobre foto: ilegible tan pronto como la imagen está cargada — añada un velo oscurecedor sobre la imagen o una banda detrás del texto; el texto directamente sobre foto desnuda es casi siempre un error.
• Los colores de marca en texto: su naranja o verde claro identificatorio está hecho para los acentos (botones llenos, iconos), no para los párrafos — reserve el texto para los neutros contrastados.
• Las fuentes demasiado finas: los pesos « light » arruinan el contraste incluso en negro — suba un peso para el texto corriente.
• Los enlaces reconocibles solo por el color: añada un subrayado o un peso — el color solo se escapa a los daltónicos (una parte notable de los hombres) y a las pantallas mal calibradas.
• Los campos de formulario fantasmas: etiquetas grises pálidas en los campos que desaparecen al escribir — prefiera las etiquetas permanentes encima de los campos.

Más allá del contraste: los otros pilares de la legibilidad

El contraste regula la visibilidad; tres compañeros regulan la comodidad: el tamaño — 16 píxeles como mínimo para el texto corriente, sin bloquear el zoom (el visitante debe poder agrandar libremente); el espaciado — interlineado generoso (aproximadamente 1,5), párrafos cortos, márgenes que respiran: el bloque denso desalienta antes de ser leído; y la jerarquía — títulos claramente diferenciados que permiten el escaneo, porque se barre antes de leer. Añada la sobriedad de los fondos (las texturas y patrones detrás del texto son asesinos de lectura) y el respeto por la elección del usuario — modo oscuro propuesto correctamente si su audiencia lo consulta de noche. El conjunto forma un círculo virtuoso: cada mejora de legibilidad aumenta el tiempo pasado, la comprensión… y los contactos.

Para recordar urgentemente si solo cambia una cosa. Oscurezca su texto corriente. La casi totalidad de los sitios de pequeñas estructuras muestran un cuerpo de texto demasiado pálido heredado del tema gráfico — y esta sola corrección (pasar del gris medio a un gris muy oscuro) mejora instantáneamente la lectura para todos, sin tocar el diseño. Dos minutos en los ajustes del tema: la mejor relación esfuerzo/impacto de toda la estética web.

Preguntas frecuentes

¿El modo oscuro resuelve las cuestiones de contraste?

No — las desplaza: el modo oscuro tiene sus propias reglas (evitar el blanco puro cegador sobre negro puro, apuntar a grises claros sobre fondos oscuros matizados). Cada modo se verifica con las mismas herramientas y los mismos umbrales.

¿Puedo mantener mi color de marca claro?

Absolutamente — en accentos: fondos de botones (con texto contrastado encima), iconos, líneas, resaltados. La marca vive en los acentos; la lectura vive en los neutros. Ambos coexisten en todos los grandes sitios del mundo.

¿Cómo verificar todo mi sitio sin pasar días?

Verifique las parejas recurrentes (texto/fondo principal, botones, enlaces, pies de página) — una docena de combinaciones cubren el 95% de un sitio. Las herramientas de auditoría automática luego listan las excepciones página por página.

Lo que hay que recordar

El contraste es la condición de existencia de sus contenidos: una relación de 4,5:1 como mínimo para el texto, verificable en segundos con herramientas gratuitas — y la prueba del teléfono al sol como juez de paz. Corrija los errores clásicos (gris pálido sobre blanco, texto sobre foto desnuda, colores de marca en párrafo, fuentes filiformes, enlaces solo por color), y complete con el tamaño, el espaciado y la jerarquía que hacen la comodidad. Hermoso y legible nunca se han opuesto: los neutros contrastados llevan la lectura, sus colores firman los acentos. Y si solo hace una cosa hoy: oscurezca su texto. Sus lectores — todos sus lectores — lo sentirán sin saber por qué.