Hay un detalle que separa un diseño que se ve profesional de uno que se ve casero, y no es la tipografía ni la composición. Es que el texto se lea.
Parece obvio, pero es el error más frecuente: gris claro sobre blanco, blanco sobre una foto, texto chico sobre un degradado. En la pantalla grande donde lo diseñaste, con el brillo al máximo, se ve bien. En un celular al sol, no se ve nada.
El contraste es un número, no una opinión
Esto es lo que casi nadie sabe: el contraste entre dos colores se mide. Existe una fórmula estándar que compara su luminancia y devuelve una relación, que va de 1:1 (dos colores idénticos, ilegible) a 21:1 (negro puro sobre blanco puro).
Las pautas internacionales de accesibilidad web fijan estos mínimos:
- 4,5:1 para texto normal. Es el mínimo aceptable.
- 3:1 para texto grande (a partir de unos 24 píxeles, o 19 si está en negrita).
- 3:1 para elementos de interfaz: bordes de botones, íconos, campos de formulario.
- 7:1 si querés el nivel alto, recomendable para textos largos.
Que sea un número cambia la conversación. “No se lee bien” es discutible; “ese gris sobre blanco da 2,8:1 y el mínimo es 4,5”, no. Sirve tanto para revisar tu propio trabajo como para defenderlo frente a un cliente que insiste con un color ilegible.
En el sitio tenés un verificador de contraste: ponés los dos colores y te dice la relación y si pasa o no.
Los cuatro errores que más se repiten
Gris claro sobre blanco
El gris suave sobre fondo blanco se ve elegante y minimalista en tu monitor. El problema es que un gris como #999999 sobre blanco da apenas 2,8:1, bastante por debajo del mínimo. Para texto secundario, no bajes de #767676, que llega justo a 4,5:1.
Texto sobre fotos
Una foto no tiene un color: tiene cientos. El texto puede tener buen contraste sobre la parte oscura y desaparecer sobre la clara.
La solución no es poner sombra al texto, que casi siempre queda sucio. Es poner una capa de color semitransparente entre la foto y el texto —negro al 40% o 50% alcanza—, o un degradado desde abajo. También funciona desenfocar la zona donde va el texto.
Los colores de marca como color de texto
Muchos colores corporativos son medios: amarillos, naranjas, celestes. Se ven bien como fondo o como acento, y son ilegibles como texto sobre blanco.
La salida es tener versiones más oscuras del color de marca para cuando se usa como texto. El amarillo de tu logo puede seguir siendo el amarillo del logo, mientras el texto usa una variante oscura de la misma familia.
Color como única señal
Un campo de formulario que se pone rojo cuando hay un error, y nada más. Un gráfico donde las dos líneas solo se distinguen por el color.
Alrededor del 8% de los hombres tiene algún tipo de daltonismo. Para ellos, rojo y verde pueden ser el mismo gris. Agregá siempre una segunda señal: un ícono, un texto, una línea punteada frente a una continua.
Cómo armar una paleta que funcione
La paleta más práctica para alguien que no es diseñador tiene cinco piezas:
- Un color principal: el de tu marca, el que más se repite.
- Un color de acento: para botones y lo que querés que la gente haga. Usá este con avaricia: si lo ponés en todos lados, deja de destacar.
- Un neutro oscuro: para el texto. No uses negro puro, que resulta duro en pantalla. Un gris muy oscuro como #1A1A1A se lee mejor.
- Un neutro claro: para fondos y separaciones.
- Blanco: el espacio en blanco es parte de la paleta aunque no lo parezca.
Dos criterios para elegir las combinaciones. Si usás colores vecinos en el círculo cromático (análogos), el resultado es armonioso pero plano: necesitás que el acento rompa. Si usás colores opuestos (complementarios), el contraste es fuerte y conviene que uno de los dos aparezca en dosis chicas.
Y la proporción importa tanto como la elección: una regla que funciona es 60% del color dominante, 30% del secundario, 10% del acento.
En el sitio hay un generador de paletas que te arma combinaciones coherentes a partir de un color base.
Tres pruebas rápidas antes de entregar
Mirala en blanco y negro. Saca la saturación de tu diseño. Si en escala de grises se distinguen las partes, el contraste está bien resuelto. Si se vuelve una masa pareja, el color estaba haciendo todo el trabajo.
Mirala en el celular, afuera. Literalmente: sacala a la calle. La pantalla con sol es la condición real en la que mucha gente va a ver tu pieza, y perdona mucho menos que tu monitor.
Alejá la pantalla. Parate a dos metros. Lo que no se lee desde ahí no se va a leer en un feed de Instagram pasando rápido.
Cuando el cliente pide algo ilegible
Pasa seguido: el cliente quiere su gris clarito, o texto sobre una foto que no se banca el texto.
La discusión de gusto no la ganás. La de datos, sí. Mostrale el número de contraste y lo que significa, y ofrecele una alternativa que mantenga la estética que busca: la misma familia de color pero un tono más oscuro, o una capa de fondo que le permita conservar la foto.
La mayoría acepta cuando entiende que no es tu opinión sino un estándar, y sobre todo cuando le decís que una parte de sus clientes directamente no va a poder leer el mensaje.
Deja un comentario