Diseñas en una pantalla calibrada, con luz controlada y a un metro de distancia. Tu cliente lo mira en un teléfono con el brillo al 40 %, en la calle, con el sol de lado. Esa diferencia explica la mayoría de los diseños que «no se leen».
El contraste manda sobre el color
La legibilidad depende de la diferencia de luminosidad entre el texto y el fondo, no de si los colores combinan. Dos colores muy distintos pero con luminosidad parecida (un rojo medio sobre un verde medio) son casi ilegibles, aunque en la paleta se vean bien.
Referencias que conviene tener presentes:
- Texto normal: la recomendación de accesibilidad más extendida pide una relación de contraste de al menos 4.5 a 1.
- Texto grande (a partir de unos 24 px, o 19 px en negrita): 3 a 1.
- Elementos de interfaz como bordes de campos y iconos: 3 a 1.
No hace falta memorizar los números: basta con saber que existen y comprobar los casos dudosos con cualquier verificador de contraste.
Tres pruebas sin herramientas
- Entrecierra los ojos. Si el texto se funde con el fondo, no hay suficiente contraste.
- Conviértelo a escala de grises. Es la prueba más reveladora: si en blanco y negro no se distingue, el diseño dependía solo del tono, no de la luminosidad.
- Míralo en el móvil con poco brillo, idealmente al aire libre. Es la condición real de uso.
La segunda prueba se hace en segundos convirtiendo la imagen con el conversor de imágenes y mirando el resultado, y detecta problemas que en color pasan desapercibidos.
Combinaciones que fallan
- Gris claro sobre blanco: elegante en pantalla grande, invisible en la calle.
- Texto sobre fotografía sin una capa de color intermedia: funciona en una zona de la foto y falla en otra.
- Amarillo sobre blanco y azul oscuro sobre negro: contraste insuficiente en ambos casos.
- Rojo sobre verde o combinaciones que solo se distinguen por tono: quien no diferencia esos colores no ve la información.
- Degradados detrás de texto: el contraste cambia a lo largo de la frase.
Nunca uses solo el color para informar
Un porcentaje relevante de la población tiene alguna dificultad para distinguir ciertos colores. Si en un gráfico la línea roja significa una cosa y la verde otra, esa información se pierde para esas personas.
La solución es sencilla y mejora el diseño para todos: añade una segunda señal. Una etiqueta, un icono, un patrón de línea distinto, o directamente el texto junto al dato.
Una paleta que funciona
Menos colores, mejor resultado. Un esquema sobrio y suficiente:
- Un color de marca para acentos y llamadas a la acción.
- Un neutro oscuro para el texto, que no tiene por qué ser negro puro: un gris muy oscuro cansa menos.
- Un neutro claro para fondos.
- Dos o tres grises intermedios para bordes y textos secundarios.
El error habitual es usar el color de marca para el texto largo. Los colores saturados fatigan la vista en párrafos; resérvalos para lo que debe destacar.
Pantalla e impresión no son lo mismo
Las pantallas emiten luz y las tintas la reflejan. Colores muy saturados que brillan en pantalla salen apagados impresos, sobre todo los verdes eléctricos y los naranjas fluorescentes. Si un diseño va a existir en ambos medios, comprueba una prueba impresa antes de dar por buena la paleta.
Y cuando prepares las versiones para cada canal, mantén el mismo criterio de contraste en todos los formatos. El redimensionador para redes conserva la composición, pero el texto pequeño que se leía bien en horizontal puede quedar demasiado reducido al recortar a vertical: revísalo siempre a tamaño real, y ajusta el peso final con el compresor sin bajar tanto la calidad que aparezcan artefactos alrededor de las letras.
Preguntas frecuentes
¿Cuánto contraste necesita un texto?
La recomendación más extendida es 4.5 a 1 para texto normal y 3 a 1 para texto grande o elementos de interfaz.
¿Cómo compruebo el contraste sin herramientas?
Convierte el diseño a escala de grises y míralo en un móvil con poco brillo. Si ahí no se lee, no funciona.
¿Puedo poner texto sobre una foto?
Sí, añadiendo una capa de color semitransparente o un degradado que garantice contraste en toda la zona del texto.
¿Por qué no debo usar solo el color para informar?
Porque quien no distingue ciertos colores pierde esa información. Añade siempre una etiqueta, un icono o un patrón.
