El color y la tipografía son las dos herramientas visuales que más afectan si alguien puede usar tu interfaz con facilidad o se frustra y la abandona.
Era martes por la mañana y Daniela, diseñadora junior en una startup de pagos digitales en Guadalajara, acababa de recibir un mensaje del CEO. La app que habían lanzado la semana anterior tenía una tasa de abandono del 68% justo en la pantalla de confirmación de pago. Nadie presionaba el botón de "Confirmar". Daniela revisó la pantalla y encontró el problema en segundos: el botón era gris claro sobre fondo blanco, con texto en una fuente delgada de 11 píxeles. Era invisible. No era un error de código. Era un error de color y tipografía.
Por qué el color y la tipografía son decisiones funcionales
Mucha gente cree que elegir colores y fuentes es una decisión artística. Es un error costoso. Según estudios de usabilidad, el 85% de los usuarios decide si confía en un producto digital en los primeros 50 milisegundos de verlo. Y los dos factores que más influyen en esa decisión son exactamente el color y la tipografía. No el contenido. No la funcionalidad. Lo visual primero.
En México esto tiene una capa adicional. Las apps más usadas, desde Mercado Libre hasta el portal del SAT, compiten por la atención de usuarios que en su mayoría acceden desde teléfonos con pantallas de entre 5 y 6 pulgadas, muchas veces bajo luz solar directa. Una paleta mal elegida o un texto demasiado pequeño no solo se ven mal: hacen que el producto sea literalmente inutilizable en condiciones reales.
Aquí está la idea que cambia todo: el color y la tipografía no son decoración. Son infraestructura visual. Funcionan como señales de tráfico: cuando están bien diseñadas, nadie las nota. Cuando están mal diseñadas, todo se detiene.
Cómo construir una paleta de color que funciona
Una paleta funcional para una interfaz no necesita ser complicada. La estructura más simple y efectiva usa tres tipos de color: primario, secundario y neutro.
El color primario es el color de acción. Es el que usas en botones principales, enlaces activos y elementos que quieres que el usuario presione. Liverpool usa un rojo característico. Mercado Libre usa amarillo. FEMSA usa rojo y blanco. Estos colores no son caprichosos: están elegidos para ser reconocibles, generar urgencia o confianza, y destacar sobre el fondo.
El color secundario apoya al primario. Lo usas para estados alternativos, íconos de apoyo o elementos secundarios de navegación. Debe complementar al primario sin competir con él.
Los colores neutros son los que más usarás: blancos, grises y negros. Forman el fondo de casi toda la interfaz. Si los neutros están mal elegidos, todo se ve sucio o plano.
Hay una regla que los diseñadores profesionales aplican siempre: la proporción 60-30-10. El 60% de la interfaz usa el color neutro (generalmente el fondo). El 30% usa el color secundario. Y solo el 10% usa el color primario. Esto evita que la pantalla se vea sobrecargada y dirige la atención del usuario exactamente hacia donde quieres.
El contraste: la regla que no puedes ignorar
El contraste es la diferencia de luminosidad entre un texto y su fondo. Si el contraste es bajo, el texto es difícil de leer. Si es demasiado alto sin equilibrio, cansa la vista.
Existe un estándar internacional llamado WCAG (Guías de Accesibilidad para Contenido Web) que define el contraste mínimo aceptable. Para texto normal, la proporción mínima es 4.5:1. Para texto grande (más de 18 puntos), es 3:1. Puedes verificar el contraste de cualquier combinación de colores con herramientas gratuitas como el Contrast Checker de WebAIM.
Vuelve al caso de Daniela. El botón gris claro sobre fondo blanco tenía una proporción de contraste de apenas 1.8:1. Era inaccesible según cualquier estándar. Cuando cambió el botón a azul oscuro (#1A56DB) con texto blanco, el contraste subió a 7.2:1. La tasa de abandono en esa pantalla bajó del 68% al 31% en la primera semana. Solo por cambiar el color del botón.
Tipografía: más que elegir una fuente bonita
La tipografía en interfaces digitales tiene reglas distintas a las del diseño editorial o la publicidad impresa. Una fuente que se ve elegante en un cartel puede ser ilegible en una pantalla pequeña bajo el sol de la Ciudad de México.
Hay tres decisiones tipográficas que debes tomar en cada proyecto.
La primera es la elección de fuente. Para interfaces digitales, las fuentes sans-serif (sin remates) funcionan mejor en pantalla porque sus trazos son uniformes y limpios. Inter, Roboto y Open Sans son las más usadas en apps mexicanas precisamente por eso. Las fuentes serif (con remates, como Times New Roman) funcionan mejor para textos largos en desktop, pero raramente en apps móviles.
La segunda decisión es el tamaño. El tamaño mínimo recomendado para texto de cuerpo en móvil es 16 píxeles. Muchos diseñadores principiantes usan 12 o 14 píxeles para "que quepa más contenido". El resultado es que los usuarios pellizcan la pantalla para hacer zoom, se frustran y cierran la app. En México, donde una parte significativa de los usuarios tiene más de 40 años, esto es especialmente crítico.
La tercera decisión es la jerarquía tipográfica. Una interfaz necesita que el usuario entienda de inmediato qué es un título, qué es un subtítulo y qué es texto de apoyo. Para lograrlo, los diseñadores usan variaciones de tamaño, peso (bold vs. regular) y color. Una jerarquía simple funciona así: título en 24px bold, subtítulo en 18px medium, cuerpo en 16px regular, y texto de apoyo en 14px regular con color más claro. Esta escala crea orden visual sin necesitar más de dos fuentes diferentes.
El error más común: usar demasiados colores y demasiadas fuentes
Si tienes menos de dos años de experiencia en diseño, hay una trampa casi inevitable: querer usar cinco colores y tres fuentes diferentes porque "se ve más profesional". Ocurre lo contrario. Las interfaces más efectivas de México usan paletas de dos o tres colores y máximo dos fuentes distintas.
Mercado Libre, con millones de usuarios activos diarios, usa amarillo, azul y neutros blancos y grises. Solo dos fuentes. La app de Oxxo Pay, parte del ecosistema FEMSA, usa rojo, blanco y gris. Una sola fuente. La simplicidad no es falta de esfuerzo: es el resultado de mucho esfuerzo.
Otro error frecuente es usar texto en color sobre fondos con imagen o degradado. El texto puede volverse ilegible dependiendo de la parte de la imagen que quede detrás. La solución es siempre agregar una capa semitransparente oscura entre la imagen y el texto, o simplemente evitar esa combinación en elementos críticos como botones o mensajes de error.
De regreso con Daniela
Tres semanas después del cambio de botón, Daniela presentó una propuesta completa de sistema de color y tipografía para toda la app. Paleta de tres colores, dos fuentes, y una tabla de contraste verificada para cada combinación texto-fondo. El equipo de desarrollo tardó dos días en implementarlo. La tasa de conversión en la pantalla de pago llegó al 74%.
Daniela no aprendió eso en la universidad. Lo aprendió mirando un botón gris sobre fondo blanco y haciéndose la pregunta correcta: ¿por qué nadie puede ver esto?
El color y la tipografía son las primeras cosas que el usuario ve y las últimas en las que piensa cuando todo funciona bien. Tu trabajo como diseñador es que nunca las noten.